React "Uncaught Invariant Violation: Element type is invalid" 与多个（最新的）第 3 方 React 库

Question

我正在构建一个非常基本的 React 应用程序作为新项目的起点，并尝试集成 Mobx 和 Styled Components。我运行遇到的问题是，每当我尝试在我的反应树中包含样式化组件或用 mobx observer 包裹的反应组件时，我都会收到以下错误：

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.`

我已经更新到每个相关库的最新版本，并升级到最新版本的 node 和 npm（目前分别为 15.2.0 和 7.0.8）。我已经运行研究了一段时间（使用旧版本）并且对解决方案感到非常困惑。我假设这与我的 build/bundle 过程有关，所以我在下面链接了相关文件。很高兴包含任何其他可能有用的文件。非常感谢任何指点！

Here is my package.json
Here is my webpack config
这是我的应用程序的最简化版本，它产生了错误：

import ReactDOM from "react-dom"
import { observer } from "mobx-react"
import { makeAutoObservable } from "mobx"

class Store {
  counter = 1

  constructor() {
    makeAutoObservable(this)
  }

  get counterPlusOne () {
    return this.counter + 1
  }

  incrementCounter = () => {
    this.counter++
  }
}

const store = new Store()

// Removing `observer` on the next line removes the error but fails to integrate mobx
const App = observer(({store}) => {
  return (
    <div>
      <p className="counter-state">Counter is at: {store.counter}</p>
      <button onClick={store.incrementCounter}>
        Increment counter
      </button>
      <p className="next-counter-state">
        Clicking the button will set the counter to: {store.counterPlusOne}
      </p>
    </div>
  )
})

ReactDOM.render(
  <App store={store} />,
  document.getElementById("root")
)

还值得注意：我对这个错误的谷歌搜索主要是提示导入问题，但我相当确定在这种情况下这不是问题所在。

Answer 1

您最好共享您的代码（或开发者控制台中的错误日志），而不是配置。但基本上出错的元素不应该是对象，而是字符串（内置组件名称）或 Class 组件（例如：class MyComp extends Component）

Answer 2

我终于明白了。由于某种原因，在我的 JS 文件所在的 app 目录中有一个 node_modules 目录（比主 package.json 和 node_modules 低一级）。由于某些其他原因，webpack/babel 除了较新的目录之外，似乎还捆绑了来自该目录的旧版本的 React，这导致了错误。

泄露的是 webpack/babel 输出的聚合 LICENSE.txt 文件包含来自两个版本的 React 的许可证。我在整个项目目录中搜索了较旧的 react 的版本字符串，并找到了流氓 node_modules.

React "Uncaught Invariant Violation: Element type is invalid" 与多个（最新的）第 3 方 React 库

React "Uncaught Invariant Violation: Element type is invalid" with multiple (up-to-date) 3rd-party react libraries

reactjs

babeljs

mobx

mobx-react

styled-components