如何修复`next dev`的ESM导入错误?

huangapple go评论61阅读模式
英文:

How to fix `next dev` esm import errors?

问题

当我在这个项目上运行 next dev 时,我会收到以下类型的错误。它们都是由一个内部库引起的,其他内部库作为依赖关系需要它:<br>

指向这种类型的行:

var style_lib_1 = require("@company/style-lib");

位于此路径内:

./node_modules/@company/another-component-library/node_modules/@company/utils-lib/lib/cjs/components/Component/Component.js:51:0

所以,这是一个嵌套的依赖关系,我无法更改导入/导出逻辑。奇怪的是,同一项目在其他团队成员的本地环境中运行时没有问题。此外,在我的 Windows 机器上也曾正常运行,直到出现这个错误。在本地的 MacOS 上很长一段时间都运行正常,直到昨天 - 突然出现了看似没有原因的相同问题(没有重大的项目设置更改)。

我尝试多次删除 node_modulesyarn.lock,清除 npm 缓存并重新运行,但都没有成功。

还尝试将这个内容添加到 next.config.js 中:

experimental: {
    transpilePackages: ['@company/style-lib'],
    esmExternals: true,
  },

我尝试通过将所有 require 语句替换为 import 语句来进行调试,但只得到了这种类型的错误:

TypeError: (0 , _company__style_lib__WEBPACK_IMPORTED_MODULE_3__.styled) is not a function

这是 style-libpackage.json 中的模块设置:

{
  "module": "dist/index.mjs",
  "type": "module",
...
}

主项目使用 volta 来管理 node/yarn 版本:

"volta": {
    "node": "16.13.1",
    "yarn": "1.22.17"
  }

请告诉我哪些附加信息可能有助于解决这个问题。

英文:

When I run next dev on this project I get the following kind of errors. They are all caused by one internal library required by other internal libraries as dependency:<br>

Module not found: ESM packages (@company/style-lib) need to be imported. Use &#39;import&#39; to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

Pointing to this kind of line:

var style_lib_1 = require(&quot;@company/style-lib&quot;);

Which is inside this path:

./node_modules/@company/another-component-library/node_modules/@company/utils-lib/lib/cjs/components/Component/Component.js:51:0

So, it's a deeply embedded dependency that I can't change the import/export logic of. The strange part is that same project runs without issues on other teammates local environments. Also it used to run fine at one point on my Windows machine, until this error appeared. Worked fine on MacOS locally for a long time, until yesterday - until same issue appeared for what looked like no reason (no major project setup changes).

I tried (without any success) multiple times deleting node_modules, yarn.lock, cleaning npm cache and running again.

Also tried adding this to next.config.js

experimental: {
    transpilePackages: [&#39;@company/style-lib&#39;],
    esmExternals: true,
  },

I tried to debug by replacing all require statements with import ones, which just yielded this kind of errors:

TypeError: (0 , _company__style_lib__WEBPACK_IMPORTED_MODULE_3__.styled) is not a function

This is module setup from package.json of style-lib:

{
  &quot;module&quot;: &quot;dist/index.mjs&quot;,
  &quot;type&quot;: &quot;module&quot;,
...
}

The main project uses volta for node/yarn versions:

&quot;volta&quot;: {
    &quot;node&quot;: &quot;16.13.1&quot;,
    &quot;yarn&quot;: &quot;1.22.17&quot;
  }

Please let me know what kind of additional info could be helpful for solving this issue.

答案1

得分: 2

不能在package.json中启用type: module时使用commonJS,尝试使用ES6 Syntax

import styleComponent from "@company/style-lib";

英文:

You can't use commonJS if you are enabled type: module in package.json
try to use ES6 Syntax

import styleComponent from &quot;@company/style-lib&quot;;

答案2

得分: 0

通过不删除 yarn.lock,只移除 node_modules 并运行 yarn 解决了。
为了确保,我还删除了 .config/yarn/Data/link 中的包含 @company 文件夹和其他库的内容,这里没有问题。

英文:

Solved by NOT deleting yarn.lock, only removing node_modules and running yarn.
For good measure I also deleted the .config/yarn/Data/link containing @company folder with other library, not one of the offenders here.

huangapple
  • 本文由 发表于 2023年7月4日 21:00:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/76612920.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定