Обновлен до React v16, смотри Ошибка: parentComponent должен быть допустимым компонентом React - PullRequest
Новая
       12

Обновлен до React v16, смотри Ошибка: parentComponent должен быть допустимым компонентом React

0 голосов
/ 07 мая 2018

Я добавил новый компонент в свой проект с помощью частного пакета NPM. Он имеет следующие зависимости, как указано в моем проекте system.config.js: 

"npm:dialog@0.6.4": {
  "material-ui": "npm:material-ui@0.19.4",
  "prop-types": "npm:prop-types@15.6.0",
  "react": "npm:react@16.2.0",
  "whatwg-fetch": "npm:whatwg-fetch@1.1.1"
}

Когда я запускаю свое приложение, я вижу следующую ошибку консоли: 

invariant.js:21 Uncaught (in promise) Error: parentComponent must be a valid React Component
at invariant (invariant.js:21)
at unstable_renderSubtreeIntoContainer (react-dom.development.js:11680)
at RenderToLayer.renderLayer (RenderToLayer.js:119)
at RenderToLayer.componentDidMount (RenderToLayer.js:56)
at eval (ReactCompositeComponent.js:149)
at measureLifeCyclePerf (ReactCompositeComponent.js:52)
at eval (ReactCompositeComponent.js:148)
at CallbackQueue.notifyAll (CallbackQueue.js:34)
at ReactReconcileTransaction.close (ReactReconcileTransaction.js:31)
at ReactReconcileTransaction.closeAll (Transaction.js:73)
at ReactReconcileTransaction.perform (Transaction.js:39)
at ReactUpdatesFlushTransaction.perform (Transaction.js:30)
at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:60)
at Object.flushBatchedUpdates (ReactUpdates.js:104)
at ReactDefaultBatchingStrategyTransaction.closeAll (Transaction.js:73)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:39)

Некоторые поиски в Google заставляют меня поверить, что тот факт, что в проекте установлено несколько версий реагирования, может быть причиной ошибки. Мои зависимости зависят от нескольких версий реакции, а именно: v0.14.9, v15.4.2, v16.2.0 (которая добавлена ​​здесь в соответствии с требованиями этого нового компонента) и v16.3.2. У меня также установлены react-dom v15.4.2 и v16.3.2. Дан Абрамов писал здесь , что существуют проблемы с несколькими версиями реакции, пытающимися сосуществовать в одном проекте. Учитывая, что мой проект теперь содержит версию реакции выше 16.0.0, я выполнил команду: 

jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>

React рекомендует эту команду при переходе к v16 +

Часть моей функции render(), которая содержит этот ломающий компонент, выглядит следующим образом: 

{this._showDialog() &&
              selectedItems.length > 0 && (
                <Dialog
                  acm={
                    selectedItems.length === 1
                      ? cachedObjects[selectedItems[0]].access
                      : {}
                  }
                  onSelect={(access) => {
                    this._onAccessSave(access)
                   }}
                  onCancel={()=>{}}
                  serviceBaseEndpoint={serviceEndpoint}
                  open={openAccess}
                  userObject={Auth.fetchUserIfNeeded(true)
                    .then(user => {
                      return user})
                  }
                >
                  <a
                    id="access-button"
                    onClick={this._onAccessClick}
                    title="Set Access"
                    {...this._getViewState(_thingSelected)}
                  >
                    <img src="icons/padlock.svg" />
                  </a>
                </Dialog>
              )}

Как я могу устранить ошибку консоли? Я должен представить, что эта проблема связана с реагирующими версиями и конфигурацией моего приложения. Мои зависимости, основанные на этих более старых версиях реакции, являются критически важными и не могут быть заменены. Они также в курсе, хотя они используют старые версии реакции. Это разрешимая проблема, учитывая эту информацию?

...