web-dev-qa-db-ja.com

React.createElement：タイプが無効です-文字列が必要ですが、取得しました：オブジェクト

私は今日Webpack2.2にアップグレードしたばかりで、ガイドを読んでいますが、まだ進行中のようです。

ホットモジュールのリロードでwebpack-dev-serverを使用するようにアプリケーションを設定するのに問題があります。

Webpackのドキュメントでフォローしていたガイドはこちらですが、開発/本番アプリケーションで動作するように変更する必要があります。

https://webpack.js.org/guides/hmr-react/

私が得る2つのエラーは次のとおりです...

Uncaught Error: _registerComponent(...): Target container is not a DOM element.
    at invariant (eval at <anonymous> (index.js:2), <anonymous>:44:15)
    at Object._renderNewRootComponent (eval at <anonymous> (index.js:64), <anonymous>:311:44)
    at Object._renderSubtreeIntoContainer (eval at <anonymous> (index.js:64), <anonymous>:401:32)
    at render (eval at <anonymous> (index.js:64), <anonymous>:422:23)
    at hotRenderer (eval at <anonymous> (index.js:73), <anonymous>:41:28)
    at eval (eval at <anonymous> (index.js:73), <anonymous>:47:5)
    at eval (eval at <anonymous> (index.js:73), <anonymous>:54:5)
    at Object.<anonymous> (index.js:73)
    at e (index.js:1)
    at Object.<anonymous> (index.js:146)

そして

Warning: React.createElement: type is invalid -- expected a string (for built-in components) 
or a class/function (for composite components) but got: object.
printWarning    @   warning.js?8a56:36
warning @   warning.js?8a56:60
createElement   @   ReactElementValidator.js?a599:171
hotRenderer @   index.js?2018:30
(anonymous) @   index.js?2018:35
(anonymous) @   index.js?2018:25
(anonymous) @   index.js:73
e   @   index.js:1
(anonymous) @   index.js:146
e   @   index.js:1
(anonymous) @   index.js:1
(anonymous) @   index.js:1

問題は、私のアプリファイルがReactルータールーターをラップするReduxプロバイダーで構成されるコンポーネントをエクスポートしているという事実にあると思います。

2つの原因ファイルは次のとおりです。

index.js

import './lib/styles.css'
import React from 'react'
import { render } from 'react-dom'

import App from './App'

if (process.env.NODE_ENV === 'development') {
  const { AppContainer } = require('react-hot-loader')
  const hotRender = (Component) => {
    render(
      <AppContainer>
        <Component/>
      </AppContainer>,
      document.getElementById('root')
    )
  }

  hotRender(App)

  if (module.hot) {
    module.hot.accept('./App', () => {
      const NewApp = require('./App').default
      hotRender(NewApp)
    })
  }
} else {
  render(App, document.getElementById('app'))
}

App.js

import React from 'react'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import store from './redux/store'

import { Router, hashHistory } from 'react-router'
import routes from './routes'

let s = createStore(store,
  process.env.NODE_ENV === 'development' ? (
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__()
  ) : null
)

const App = () => (
  <Provider store={s}>
    <Router history={hashHistory} routes={routes} />
  </Provider>
)


export default App

変更が加えられたPR全体を調べたい場合は、それは素晴らしいことです。コードはここにあります： https://github.com/awitherow/aether/pull/64/files

一部のCSSの変更がPRにも反映されたことをお詫びしますが、ここで行ったWebpack2.2以降のアップグレードはすべて潜在的に関連しています。

[〜＃〜]編集[〜＃〜]

私はいくつかの修正を試みましたが、それは簡単な修正です...しかし、それらは何も解決していません。

  1. [〜＃〜] x [〜＃〜]アプリをdivでラップし、どういうわけかそれがDOM要素であると見なすようにします。
  2. [〜＃〜] x [〜＃〜]コンポーネントを拡張するクラスとしてアプリをエクスポートする
reactjswebpackreduxreact-routerwebpack-dev-server
6
Austin Witherow

どのバージョンのReactルーターを使用していますか？コンソールでもWarning: React.createElementエラーが発生していましたが、バージョン3.0.2から4.0.0-alpha.6preに切り替えました-リリースは私のためにそれを取り除きました。

7
Anarosa PM

現在のコンポーネントにインポートしようとしているコンポーネントがどのようにエクスポートされるかを確認してください（障害が発生したおおよその場所を示すスタックトレースを調べることで、現在のコンポーネントを特定できます）。

「default」キーワードでエクスポートされたコンポーネントをインポートしているときに、同じ問題が発生しました。同じコンポーネントが他の多くのコンポーネントにインポートされていたため、reactパーサーがこのエラーを出していました。このコンポーネントを「exportdefault」から名前付きexport（つまり、「default」キーワードなし）に変更した後、このエラーは二度と発生しませんでした。

0
manjum2050