Question

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

当我在其他项目中使用此lib时，只有一个组件不起作用，它是由react-select（Jed Watson）开发的select输入，单击时崩溃。

所有应用程序崩溃，并且出现此错误：

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

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

无法找到已卸载组件上的节点。

我现在的问题是我的webpack配置，但是我没有找到解决此问题的解决方案。

对社区寄予厚望...

Answer 1

我遇到了类似的情况-我正在开发一个自定义组件库，并将其导入到外部项目中。我在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的修复可能有所不同。

Answer 2

谢谢阿比。

我已经用其他方法解决了。我将所有库添加到我的webpack配置中的“外部”中：

externals: [
  'react-select': {
     root: 'ReactSelect',
     commonjs2: 'react-select',
     commonjs: 'react-select',
     amd: 'react-select',
  },
]

使用react-select将自定义组件导入React并因错误而崩溃：缩小的React错误＃188

2 个答案: