主工程导入.esm.mjs依赖，组件库导入cjs.js依赖

Question

我们的主项目使用了一个自制的组件库，该组件库使用了peerDependency（react-hook-form）。 主项目也使用react-hook-form作为依赖。

查看 JS 调试器时，主要组件的“react-hook-form”导入是这样解析的： “./node_modules/react-hook-form/dist/index.esm.mjs”

但是对于来自外部库的组件来说是这样的： “./node_modules/react-hook-form/dist/index.cjs.js”

由于它们不匹配，因此无法从组件库中使用主项目中创建的上下文，它始终返回 null。

我们尝试将“react-hook-form”定义为peerDependency和webpack-configs中的外部，但似乎没有任何效果。

任何想法都会受到欢迎。

Answer 1

我们找到了解决方案。组件库实际上是用commonJS构建的，而主项目是用esModules构建的。

我们必须做两件事：

• 找到一种使用 esModules 构建组件库的方法（通常在 webpack 配置文件中完成）
• 从库组件更改 package.json 中的“main”路径。在我们的例子中，我们的项目创建了多个输出文件夹，每个文件夹对应一种模块类型。我们必须瞄准 esm