Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import is not supported resolving ES modules

[perevezencev]

I'm building a nextjs app and my own UI library. I had a problem while writing the library. When I run "next build" I get this error:

Error

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/pavel/Dev/github//examples/with-nextjs/node_modules/my-own-ui-library/ui/esm/src' is not supported resolving ES modules imported from /Users/pavel/Dev/github//examples/with-nextjs/node_modules/my-own-ui-library/ui/esm/index.js
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:390:17)
    at moduleResolve (node:internal/modules/esm/resolve:944:10)
    at defaultResolve (node:internal/modules/esm/resolve:1041:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  type: 'Error',
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///Users/pavel/Dev/github//examples/with-nextjs/node_modules/my-own-ui-library/ui/esm/src'
}

package.json

{
  "name": "my-own-ui-library",
  "version": "0.1.0",
  "type": "module",
  ...
  "sideEffects": false,
  "main": "./cjs/index.js",
  "types": "./types/index.d.ts",
  "module": "./esm/index.js",
  "exports": {
    ".": {
      "import": "./esm/index.js",
      "require": "./cjs/index.js",
      "types": "./types/index.d.ts"
    }
  }
}

Because of {"type": "module"} field in package.json, I am trying to run NODE_OPTIONS="--experimental-specifier-resolution=node" yarn build but in this case I get this error:

TypeError [ERR_INVALID_MODULE_SPECIFIER]: Invalid module "file:///Users/pavel/Dev/github//examples/with-nextjs/node_modules/next/dist/bin/next" 
    at new NodeError (node:internal/errors:371:5)
    at ESMLoader.load (node:internal/modules/esm/loader:380:13)
    at async ESMLoader.moduleProvider (node:internal/modules/esm/loader:280:47)
    at async link (node:internal/modules/esm/module_job:70:21) {
  code: 'ERR_INVALID_MODULE_SPECIFIER'
}

Can I solve this problem myself, or is it a bug on the nextjs side?

[chukamorka]

Please someone help. I have the same issue

[jeremytenjo]

Try

https://github.com/martpie/next-transpile-modules

[man-shar]

was this resolved?

[rayboschbr]

I'm facing the same issue and this seems to be related to webpack. Does anyone know of a way to workaround this ?

[U-4-E-A]

I have the same issue. Anyone?