React.createElement:类型无效——需要一个字符串,但得到:对象 [英] React.createElement: type is invalid -- expected a string, but got: object
问题描述
我今天刚刚升级到 Webpack 2.2 并且一直在阅读他们的指南,这些指南似乎仍在进行中.
I've just upgraded to Webpack 2.2 today and have been reading through their guides, which are still a work in progress it seems.
我在设置我的应用程序以使用带有热模块重新加载的 webpack-dev-server 时遇到困难.
I am having difficulties setting up my application to use webpack-dev-server with hot module reloading.
我通过 webpack 文档遵循的指南在这里,但我必须修改它才能与开发/生产应用程序一起使用.
The guide I was following via the webpack documentation is here, but I am having to modify it to work with a development/production application.
https://webpack.js.org/guides/hmr-react/一个>
我得到的两个错误如下...
The two errors I get are the following...
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 Router Router 的 Redux Provider 组成.
I believe the problem might lie with the fact that my app file is exporting a Component composed of a Redux Provider wrapping a React Router Router.
这是两个罪魁祸首文件:
Here are the two culprit files:
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/文件
If you would like to examine the entire PR that has the changes, that would be awesome! The code is located here: https://github.com/awitherow/aether/pull/64/files
对于一些滑入 PR 的 CSS 更改,我深表歉意,但我在这里所做的所有 Webpack 2.2 及更高版本的升级都可能相关!
I apologise for some of the CSS changes that slipped into the PR as well, but all of the Webpack 2.2 and later upgrades that I have done in here are related potentially!
编辑
我尝试了一些修复,很简单……但他们没有解决任何问题.
I have attempted some fixes, simple ones at that... but they are not solving anything.
- X 将应用包装在一个 div 中,以便它以某种方式认为它是一个 DOM 元素.
- X 将 App 作为扩展组件的类导出
- X Wrapping the App in a div, so that it would somehow think it was a DOM element.
- X exporting App as a class extending Component
推荐答案
您使用的是哪个版本的 React Router?我还在控制台中收到 Warning: React.createElement
错误,但从版本 3.0.2
切换到 4.0.0-alpha.6代码> 预发行版为我摆脱了它.
Which version of React Router are you using? I was also getting the Warning: React.createElement
error in the console, but switching from version 3.0.2
to the 4.0.0-alpha.6
pre-release got rid of it for me.
这篇关于React.createElement:类型无效——需要一个字符串,但得到:对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!