How to fix `next dev` esm import errors?

Question

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:

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.

Can you show the real names and stack traces of your dependencies or are these packages you’re developing? Are there any `exports` defined in package.json? — morganney, Jul 07 '23 at 02:30

score 2 · Answer 1 · edited Jul 07 '23 at 01:58

2

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";

edited Jul 07 '23 at 01:58

Anroche

618
1
8
19

answered Jul 06 '23 at 14:12

Kannu Mandora

479
2
10

It's not feasible to me to change require to import inside `node_modules`. – kbo Jul 06 '23 at 15:32

score 0 · Answer 2 · answered Jul 10 '23 at 18:22

0

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.

answered Jul 10 '23 at 18:22

kbo

422
5
17

How to fix `next dev` esm import errors?

2 Answers2