英文:
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_modules
、yarn.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-lib
的 package.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 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
Pointing to this kind of line:
var style_lib_1 = require("@company/style-lib");
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: ['@company/style-lib'],
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
:
{
"module": "dist/index.mjs",
"type": "module",
...
}
The main project uses volta
for node/yarn versions:
"volta": {
"node": "16.13.1",
"yarn": "1.22.17"
}
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 "@company/style-lib";
答案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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论