React.createElement: type is invalid - 需要一个字符串，但得到：对象

Posted 2023-02-21

【中文标题】React.createElement: type is invalid - 需要一个字符串，但得到：对象

【英文标题】：React.createElement: type is invalid -- expected a string, but got: object

【发布时间】：2017-06-03 10:54:25

【问题描述】：

我今天刚刚升级到 Webpack 2.2，并且一直在阅读他们的指南，这似乎仍在进行中。

我在设置我的应用程序以使用带有热模块重新加载的 webpack-dev-server 时遇到困难。

我通过 webpack 文档遵循的指南在这里，但我必须修改它以使用开发/生产应用程序。

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

我得到的两个错误如下...

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 路由器的 Redux Provider 组成。

这是两个罪魁祸首文件：

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

对于一些滑入 PR 的 CSS 更改，我深表歉意，但我在这里所做的所有 Webpack 2.2 及更高版本的升级都可能相关！

编辑

我尝试了一些修复，只是那些简单的……但它们没有解决任何问题。

X 将 App 包装在一个 div 中，这样它就会以某种方式认为它是一个 DOM 元素。 X 将 App 导出为扩展 Component 的类

【问题讨论】：

显然这是 React-Hot-Loader 的一个很常见的问题，这里有很多讨论：github.com/gaearon/react-hot-loader/issues/249

【参考方案1】：

您使用的是哪个版本的 React Router？我在控制台中也遇到了Warning: React.createElement 错误，但是从版本3.0.2 切换到4.0.0-alpha.6 预发布版本为我摆脱了它。

【讨论】：

老实说，我摆脱了 React Router，因为我使用它只是为了显示登录门户或应用程序的身份验证。但我在其他地方读到，你发布的解决方案也为很多人解决了问题，所以你得到了检查:)

【参考方案2】：

请查看您尝试在当前组件中导入的组件是如何导出的（您可以通过查看指示故障发生的大致位置的堆栈跟踪来识别当前组件）。

我在导入使用“default”关键字导出的组件时遇到了同样的问题。由于在许多其他组件中导入了相同的组件，因此反应解析器给出了这个错误。将此组件从“导出默认”更改为命名导出（即，没有“默认”关键字）后，我再也没有看到此错误。