reactjs - 使用 Webpack 在 Electron 项目中使用外部目录中的组件

Question

我试图尽可能简单地做到这一点，我研究了 Yarn Workspaces 一段时间，但这是一个目前不适用于 Electron 的解决方案，问题太多了。

我在这里有一个 Electron 项目:./electron/

我在这里有一个包含组件的目录:./common/

这些组件是在 React/JSX 中开发的，它们并没有什么花哨的地方。也就是说，我正在使用钩子(Hook)(useXXX)。
我尝试了很多方法来包含这些组件(理想情况下，我想使用 Yarn Workspaces，但它只会增加问题的数量)，但它们都失败了。这就是为什么我想避免使用 yarn 链接或工作区或使公共(public)库成为库等的原因。我只希望我的 Electron 项目的行为就像文件位于 ./electron 下一样。就是这样。
我最接近解决方案的是使用 electron-webpack，并使用以下配置覆盖它:

module.exports = function(config) {
  config = merge.smart(config, {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          //include: /node_modules/,
          include: Path.resolve(__dirname, '../common'),
          loaders: ['react-hot-loader/webpack', 'babel-loader?presets[]=@babel/preset-react']
        },
      ]
    },
    resolve: {
      alias: {
        '@common': Path.resolve(__dirname, '../common')
      }
    }
  })

  return config
}

我可以导入模块，它们可以工作......除非我使用钩子(Hook)。我收到“无效的 Hook 调用警告”: https://reactjs.org/warnings/invalid-hook-call-warning.html .
我觉得/common 文件夹没有被 babel 正确编译，但事实是我不知道去哪里看或尝试什么。我想有一个解决方案，通过那个 webpack 配置。
在此先感谢您的帮助 :)

Answer 1

我找到了解决方案。发生这种情况是因为/common 和/electron 的 React 实例不同。
这个想法是添加一个别名，如下所示:

'react': Path.resolve('./node_modules/react')

当然，对于需要完全位于同一实例上的其他模块，也可以这样做。如果这个答案不完全正确，请不要犹豫发表评论。