大多数情况下，这是由于不正确的导出/导入。

常见错误：

// File: LeComponent.js
export class LeComponent extends React.Component { ... }

// File: App.js
import LeComponent from './LeComponent';

可能的选择：

// File: LeComponent.js 
export default class LeComponent extends React.Component { ... }

// File: App.js
import LeComponent from './LeComponent';

有几种方法可能是错误的，但该错误是因为每次都有 60% 的导入/导出不匹配。

编辑

通常，您应该获得一个堆栈跟踪，指示故障发生的大致位置。这通常紧跟在您在原始问题中收到的消息之后。

如果它没有显示，则可能值得调查原因（这可能是您缺少的构建设置）。无论如何，如果它不显示，唯一的行动方针是缩小其中的导出/导入失败。

可悲的是，没有堆栈跟踪的唯一方法是手动删除每个module/子module，直到您不再收到错误为止，然后按自己的方式返回堆栈。

编辑 2

通过评论，这确实是一个导入问题，特别是导入了一个不存在的module

我也收到了这个错误。

我正在使用：

import BrowserRouter from 'react-router-dom';

修复是这样做的，而不是：

import { BrowserRouter } from 'react-router-dom';

试试这个

npm i react-router-dom@next

在你的App.js 中

import { BrowserRouter as Router, Route } from 'react-router-dom'

const Home = () => <h1>Home</h1>

const App = () =>(
  <Router>
    <Route path="/" component={Home} />
  </Router>
)

export default App;

组件数组

获取此错误的常见方法是使用components 数组，并使用位置索引从数组中选择要呈现的组件。我多次看到这样的代码：

const checkoutSteps = [Address, Shipment, Payment]

export const Checkout = ({step}) => {

  const ToRender = checkoutSteps[step]

  return (
    <ToRender />
  )
}

这不一定是坏代码，但是如果您使用错误的索引调用它（例如-1， 或者3在这种情况下），ToRender组件将是undefined，抛出React.createElement: type is invalid...错误：

<Checkout step={0} /> // <Address />
<Checkout step={1} /> // <Shipment />
<Checkout step={2} /> // <Payment />
<Checkout step={3} /> // undefined
<Checkout step={-1} /> // undefined

合理的解决方案

您应该使用更明确的方法来保护自己和您的同事免受这种难以调试的代码的影响，避免使用幻数并使用 PropTypes：

const checkoutSteps = {
  address: Address,
  shipment Shipment,
  payment: Payment
}

const propTypes = {
  step: PropTypes.oneOf(['address', 'shipment', 'payment']),
}

/* TIP: easier to maintain
const propTypes = {
  step: PropTypes.oneOf(Object.keys(checkoutSteps)),
}
*/

const Checkout = ({step}) => {

  const ToRender = checkoutSteps[step]

  return (
    <ToRender />
  )
}

Checkout.propTypes = propTypes

export default Checkout

您的代码将如下所示：

// OK
<Checkout step="address" /> // <Address />
<Checkout step="shipment" /> // <Shipment />
<Checkout step="payment" /> // <Payment />

// Errors
<Checkout step="wrongstep" /> // explicit error "step must be one of..."
<Checkout step={3} /> // explicit error (same as above)
<Checkout step={myWrongVar} /> // explicit error (same as above)

这种方法的好处

• 代码更明确，可以清楚地看到要渲染的内容
• 你不需要记住数字和它们隐藏的含义（1是地址，2是...）
• 错误是明确的太
• 不为你的同龄人头疼:)

你需要知道named export和default export。请参阅何时应该使用花括号进行 ES6 导入？

就我而言，我通过更改从

import Provider from 'react-redux'

到

import { Provider } from 'react-redux'