时间戳

首页 > 解决方案 > 使用 react-select 在 React 中导入自定义组件并崩溃并出现错误：Minified React 错误 #188

javascript - 使用 react-select 在 React 中导入自定义组件并崩溃并出现错误：Minified React 错误 #188

问题描述

我在 React(16.4) 和 Webpack 4 中开发了一个自定义组件库。配置被弹出并使用 git+ssh://git@bitbucket.org.... 在 package.json 上导入到其他项目。

当我在其他项目中使用此库时，只有一个组件不起作用，它是使用 react-select (Jed Watson) 开发的选择输入，单击时会崩溃。

所有应用程序崩溃，我有这个错误：

未捕获的错误：缩小的 React 错误 #188；访问https://reactjs.org/docs/error-decoder.html?invariant=188以获取完整消息，或使用非缩小开发环境获取完整错误和其他有用的警告。

来自上述错误链接的消息：

无法在未安装的组件上找到节点。

我现在的问题是我的 webpack 配置，但我找不到任何解决方案来解决这个问题。

与社区的最后希望...

标签： javascriptreactjswebpackreact-select

解决方案

我有类似的情况 - 我正在开发一个自定义组件库并将其导入到外部项目中。我遇到了 react-bootstrap、react-transition-group 和其他在生产中动态挂载/卸载 DOM 元素的外部库的问题；缩小反应错误 #188 会使生产版本崩溃。这是我在 module.exports 下的 webpack 配置中解决它的方法（开发和产品配置）：

alias: {
  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  "react-native": "react-native-web",
  react: path.resolve("./node_modules/react"),
  "react-dom": path.resolve("./node_modules/react-dom"),
  "react-transition-group": path.resolve(
    "./node_modules/react-transition-group"
  )
}

这应该覆盖所有依赖项中这些特定库的任何其他实例；每当它们被导入/使用时，它们都被迫使用我的项目在 package.json 中指定的版本。请记住，我使用的是 Webpack 3，因此 Webpack 4 的修复可能会有所不同。

推荐阅读