server imports lack the file extensions required by native esm #14597

v-romanyuk · 2022-08-15T18:50:18Z

Environment

Operating System: Darwin
Node Version: v16.15.1
Nuxt Version: 3.0.0-rc.8
Package Manager: yarn@1.22.19
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-a2yhjt?file=app.vue

Describe the bug

Importing anything from the node_modules without explicit extension will return an error that module is not found. Here is the example of importing a function from lodash. However if I import it with the explicit extension like 'lodash/cloneDeep.js' everything works well.

Additional context

No response

Logs

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/projects/nuxt-starter-a2yhjt/node_modules/lodash/cloneDeep' imported from /home/projects/nuxt-starter-a2yhjt/.nuxt/dist/server/server.mjs
Did you mean to import lodash/cloneDeep.js?
    at InternalError.get (https://nuxt-starter-a2yhjt.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:292488)
    at defaultResolve (https://nuxt-starter-a2yhjt.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:622935)
    at ESMLoader.resolve (https://nuxt-starter-a2yhjt.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:1210848)
    at ESMLoader.getModuleJob (https://nuxt-starter-a2yhjt.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:1208564)
    at ESMLoader.import (https://nuxt-starter-a2yhjt.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:1208951)
    at importModuleDynamically (https://nuxt-starter-a2yhjt.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:981760)
    at i.importModuleDynamicallyCallback (https://nuxt-starter-a2yhjt.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:246238)
    at _0x69e4ca (https://nuxt-starter-a2yhjt.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:15:291665)
    at $id_3IjiM7kU2H (file:///home/projects/nuxt-starter-a2yhjt/.nuxt/dist/server/server.mjs:3544:1)
    at __instantiateModule__ (file:///home/projects/nuxt-starter-a2yhjt/.nuxt/dist/server/server.mjs:3690:9)
    at __ssrLoadModule__ (file:///home/projects/nuxt-starter-a2yhjt/.nuxt/dist/server/server.mjs:3628:25)
    at ssrImport (file:///home/projects/nuxt-starter-a2yhjt/.nuxt/dist/server/server.mjs:3653:13)
    at $id_jJopoG4kMT (file:///home/projects/nuxt-starter-a2yhjt/.nuxt/dist/server/server.mjs:3383:37)
    at async __instantiateModule__ (file:///home/projects/nuxt-starter-a2yhjt/.nuxt/dist/server/server.mjs:3690:3) {
  code: 'ERR_MODULE_NOT_FOUND'
}
[nuxt] [request error] [unhandled] [500] [vite dev] Error loading external "lodash/cloneDeep".
  at async eval (./.nuxt/dev/index.mjs:117:22)  
  at async eval (./node_modules/h3/dist/index.mjs:571:19)  
  at async Server.nodeHandler (./node_modules/h3/dist/index.mjs:517:7)

The text was updated successfully, but these errors were encountered:

AndrewSparrowww · 2022-08-15T18:51:39Z

@pi0 I can also reproduce this issue.

516310460 · 2022-08-15T23:45:50Z

Resolution: https://stackblitz.com/edit/nuxt-starter-zwu1fk?file=nuxt.config.ts,app.vue
build and vite

AndrewSparrowww · 2022-08-16T13:10:42Z

Resolution: https://stackblitz.com/edit/nuxt-starter-zwu1fk?file=nuxt.config.ts,app.vue build and vite

Added this options returns in other errors:

[nuxt] [request error] [unhandled] [500] request to http://localhost:3000/__nuxt_vite_node__/manifest failed, reason: connect ECONNREFUSED 127.0.0.1:3000 ()

Other potential fix may be to add extension of the import module like:

import cloneDeep from 'lodash/cloneDeep'

import cloneDeep from 'lodash/cloneDeep.js'

516310460 · 2022-08-16T13:15:36Z

Resolution: https://stackblitz.com/edit/nuxt-starter-zwu1fk?file=nuxt.config.ts,app.vue build and vite

Added this options returns in other errors:
[nuxt] [request error] [unhandled] [500] request to http://localhost:3000/__nuxt_vite_node__/manifest failed, reason: connect ECONNREFUSED 127.0.0.1:3000 ()
Other potential fix may be to add extension of the import module like:

import cloneDeep from 'lodash/cloneDeep'

import cloneDeep from 'lodash/cloneDeep.js'

In stack seems normal

vis97c · 2022-08-21T02:26:45Z

Resolution: https://stackblitz.com/edit/nuxt-starter-zwu1fk?file=nuxt.config.ts,app.vue build and vite

Added this options returns in other errors:
[nuxt] [request error] [unhandled] [500] request to http://localhost:3000/__nuxt_vite_node__/manifest failed, reason: connect ECONNREFUSED 127.0.0.1:3000 ()
Other potential fix may be to add extension of the import module like:

import cloneDeep from 'lodash/cloneDeep'

import cloneDeep from 'lodash/cloneDeep.js'

Stack one also didn't work for me. Switching from rc.6 to rc.8 created this issue.

I had this on my config

export default defineNuxtConfig({
	nitro: {
		externals: {
			inline: ["uuid", "lodash"],
		},
	},
})

now it doesn't seem to work.

Did you figure it out @v-romanyuk ?

vis97c · 2022-08-21T22:47:38Z

For anyone wondering what the issue is? es6 modules like uiid needs to be transpiled.

export default defineNuxtConfig({
	build: {
		transpile: ["uuid"],
	},
})

Anything else must be commonjs and additionally folder import are no longer a thing

You will need to especify the file for imports within libraries like so:

import cloneDeep from "lodash/cloneDeep.js";

gezichenshan · 2022-08-22T06:29:47Z

Resolution: https://stackblitz.com/edit/nuxt-starter-zwu1fk?file=nuxt.config.ts,app.vue build and vite

Added this options returns in other errors:
[nuxt] [request error] [unhandled] [500] request to http://localhost:3000/__nuxt_vite_node__/manifest failed, reason: connect ECONNREFUSED 127.0.0.1:3000 ()
Other potential fix may be to add extension of the import module like:
import cloneDeep from 'lodash/cloneDeep'

import cloneDeep from 'lodash/cloneDeep.js'
Stack one also didn't work for me. Switching from rc.6 to rc.8 created this issue.

I had this on my config
export default defineNuxtConfig({
	nitro: {
		externals: {
			inline: ["uuid", "lodash"],
		},
	},
})
now it doesn't seem to work.

Did you figure it out @v-romanyuk ?

Same error here happened after switching from rc.6 to rc.8

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/user/ryanown/ownwork/abroad-go/web/node_modules/lodash-es/isPlainObject' imported from /Users/user/ryanown/ownwork/abroad-go/web/.nuxt/dist/server/server.mjs
Did you mean to import lodash-es/isPlainObject.js?

v-romanyuk · 2022-08-22T06:50:32Z

@gezichenshan I just put a file extension in the import path for now. Not a big deal but still a bit inconvenient.
es6 modules have to be included in the build -> transpile object to make them properly work.

gezichenshan · 2022-08-22T07:57:21Z

@v-romanyuk I've tried to add lodash-es in the build -> transpile but nothing works.

The issue originated that I want to use @pinia/nuxt in my nuxt3 project (3.0.0-rc.6). Then I encountered an issue that pinia says its peerDependency "vue-demi " isn't a common js module and didn't export the functions I want. So I follow the doc adding "vue-demi" into the build -> transpile but no help.
Then I saw some comments that upgrade nuxt3 to rc.8 will solve the issue, but then I got stuck here 😂.

alisdg · 2022-08-23T11:48:12Z

Resolution: https://stackblitz.com/edit/nuxt-starter-zwu1fk?file=nuxt.config.ts,app.vue build and vite

Added this options returns in other errors:
[nuxt] [request error] [unhandled] [500] request to http://localhost:3000/__nuxt_vite_node__/manifest failed, reason: connect ECONNREFUSED 127.0.0.1:3000 ()
Other potential fix may be to add extension of the import module like:
import cloneDeep from 'lodash/cloneDeep'

import cloneDeep from 'lodash/cloneDeep.js'
Stack one also didn't work for me. Switching from rc.6 to rc.8 created this issue.
I had this on my config
export default defineNuxtConfig({
	nitro: {
		externals: {
			inline: ["uuid", "lodash"],
		},
	},
})
now it doesn't seem to work.
Did you figure it out @v-romanyuk ?
Same error here happened after switching from rc.6 to rc.8
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/user/ryanown/ownwork/abroad-go/web/node_modules/lodash-es/isPlainObject' imported from /Users/user/ryanown/ownwork/abroad-go/web/.nuxt/dist/server/server.mjs
Did you mean to import lodash-es/isPlainObject.js?

exact same error here, Has anyone found any solution ?

vis97c · 2022-08-23T14:30:31Z

@alisdg @gezichenshan Use the commonjs module "lodash" and for file import add the .js file extension. Like this. This is not a nuxt issue but a intended nodejs package resolution feature.

rowanwins · 2022-08-25T10:46:12Z

I'm getting the same lodash error when trying to run npm run dev with rc.8.
I'm not using lodash in any of my own code

Cannot find module '/mysite/node_modules/lodash-es/isPlainObject' imported from mysite/.nuxt/dist/server/server.mjs
Did you mean to import lodash-es/isPlainObject.js?

brtinney · 2022-08-27T15:50:08Z

I'm getting this with pinia on rc.8. In my server output when I yarn build, it ends up being import 'pinia/dist/pinia'; which fails to be able to load node_modules/pinia/dist/pina.mjs.

Cannot find module '/var/task/.output/server/node_modules/pinia/dist/pinia' imported from /var/task/.output/server/chunks/_..._.mjs

Adding pinia to transpile in the Nuxt configuration doesn't seem to do anything. I'm guessing there's something I can do with vite settings in the Nuxt configuration to get it to explicitly use .mjs, but I haven't figured it out yet.

516310460 · 2022-08-27T22:59:21Z

I'm getting this with pinia on rc.8. In my server output when I yarn build, it ends up being import 'pinia/dist/pinia'; which fails to be able to load node_modules/pinia/dist/pina.mjs.

Using @nuxt/pinia
Or
You can refer to my code https://github.com/516310460/pinia-nuxt-persist

brtinney · 2022-08-28T00:37:36Z

Using @nuxt/pinia Or You can refer to my code https://github.com/516310460/pinia-nuxt-persist

That’s not the issue. I have that module already set up. And everything works great when using the dev server. I just wrote a script to add the .mjs after I build, which solves my problem for now.

gbdubs · 2022-09-29T14:31:20Z

I'm not sure if this is relevant, but I was experiencing this component of this issue:

Added this options returns in other errors:

[nuxt] [request error] [unhandled] [500] request to http://localhost:3000/__nuxt_vite_node__/manifest failed, reason: connect ECONNREFUSED 127.0.0.1:3000 ()

And changing my npm version to that of a collaborator (who was not experiencing this issue on the same, clean, repo) fixed this symptom.

NVM: nvm use 16.13
NPM: 8.1.2
Node: v16.13.2

I don't know enough about nuxt to know if this is likely to be helpful for others, so I'm happy to delete this if it's not useful.

szwenni · 2022-10-04T20:29:18Z

Using @nuxt/pinia Or You can refer to my code https://github.com/516310460/pinia-nuxt-persist

That’s not the issue. I have that module already set up. And everything works great when using the dev server. I just wrote a script to add the .mjs after I build, which solves my problem for now.

Can you share that script ? I'm hanging now on the same issue.

brtinney · 2022-10-04T20:38:49Z

Using @nuxt/pinia Or You can refer to my code https://github.com/516310460/pinia-nuxt-persist

That’s not the issue. I have that module already set up. And everything works great when using the dev server. I just wrote a script to add the .mjs after I build, which solves my problem for now.

Can you share that script ? I'm hanging now on the same issue.

I just used sed. The following script does that replacement in the two files, and is run during CI/CD in a node-alpine container after the build is done.

#!/bin/sh
sed -i "s#pinia/dist/pinia'#pinia/dist/pinia.mjs'#g" .output/server/chunks/_..._.mjs
sed -i "s#pinia/dist/pinia'#pinia/dist/pinia.mjs'#g" .output/server/chunks/_orders.mjs

justwiebe · 2022-11-04T15:52:19Z

I'm getting this error in webpack mode even though I've got extensions set

[nuxt] [request error] [unhandled] [500] Cannot find module '{repoPath}\node_modules\@company\uikit\es\mixins\date-formats' imported from {repoPath}\.nuxt\dist\server\server.mjs
Did you mean to import @company/uikit/es/mixins/date-formats.js?
  at new NodeError (node:internal/errors:371:5)
  at finalizeResolution (node:internal/modules/esm/resolve:416:11)
  at moduleResolve (node:internal/modules/esm/resolve:932:10)
  at defaultResolve (node:internal/modules/esm/resolve:1044:11)
  at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
  at link (node:internal/modules/esm/module_job:75:36)

export default defineNuxtConfig({
  alias: {
    '~': path.resolve(__dirname, 'node_modules'),
    '@/': path.resolve(__dirname, 'src')
  },
  vite: false,
  webpack: {
    resolve: {
      extensions: [
        ".js",
        ".vue",
        ".mjs"
      ]
    }
  },
  extensions: [
    ".js",
    ".vue",
    ".mjs"
  ]

justwiebe · 2022-11-04T16:05:29Z

I tried adding file extensions, but then I get this...

[nuxt] [request error] [unhandled] [500] Unknown file extension ".vue" for {repoPath}\node_modules\@company\uikit\es\loading\Loading.vue
  at new NodeError (node:internal/errors:371:5)
  at Object.file: (node:internal/modules/esm/get_format:72:15)
  at defaultGetFormat (node:internal/modules/esm/get_format:85:38)
  at defaultLoad (node:internal/modules/esm/load:13:42)
  at ESMLoader.load (node:internal/modules/esm/loader:303:26)
  at ESMLoader.moduleProvider (node:internal/modules/esm/loader:230:58)
  at new ModuleJob (node:internal/modules/esm/module_job:63:26)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:244:11)
  at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:78:21)
  at async Promise.all (index 4)

danielroe · 2022-11-08T13:43:26Z

The original reproduction is no longer reproducible for me with Nitro 0.6.1: https://stackblitz.com/edit/nuxt-starter-shejcp. If someone is still experiencing a similar problem, please open a new issue with a reproduction and I will address.

v-romanyuk added the pending triage label Aug 15, 2022

v-romanyuk closed this as completed Aug 19, 2022

v-romanyuk reopened this Aug 23, 2022

danielroe added bug nitro 🔨 p3-minor-bug ❗ p4-important and removed pending triage 🔨 p3-minor-bug labels Aug 30, 2022

danielroe changed the title ~~Cannot find module~~ server imports lack the file extensions required by native esm Aug 30, 2022

This was referenced Jan 19, 2023

Heroicons not working with Nuxt v3.0.0-rc.8 #14767

Closed

Error [ERR_MODULE_NOT_FOUND] of "dayjs" #14716

Closed

danielroe self-assigned this Sep 12, 2022

danielroe closed this as completed Nov 8, 2022

brtinney mentioned this issue Jan 19, 2023

Server imports missing file extension #15460

Closed

borisdiakur mentioned this issue Jan 11, 2023

bug: Cannot find module dist/vue-component-lib/utils in Nuxt 3 ionic-team/stencil-ds-output-targets#319

Open

3 tasks

danielroe added the 3.x label Jan 19, 2023

danielroe transferred this issue from nuxt/framework Jan 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

server imports lack the file extensions required by native esm #14597

server imports lack the file extensions required by native esm #14597

v-romanyuk commented Aug 15, 2022

AndrewSparrowww commented Aug 15, 2022

516310460 commented Aug 15, 2022

AndrewSparrowww commented Aug 16, 2022

516310460 commented Aug 16, 2022

vis97c commented Aug 21, 2022 •

edited

vis97c commented Aug 21, 2022 •

edited

gezichenshan commented Aug 22, 2022

v-romanyuk commented Aug 22, 2022

gezichenshan commented Aug 22, 2022

alisdg commented Aug 23, 2022

vis97c commented Aug 23, 2022

rowanwins commented Aug 25, 2022

brtinney commented Aug 27, 2022

516310460 commented Aug 27, 2022 •

edited

brtinney commented Aug 28, 2022

gbdubs commented Sep 29, 2022

szwenni commented Oct 4, 2022

brtinney commented Oct 4, 2022

justwiebe commented Nov 4, 2022

justwiebe commented Nov 4, 2022

danielroe commented Nov 8, 2022

server imports lack the file extensions required by native esm #14597

server imports lack the file extensions required by native esm #14597

Comments

v-romanyuk commented Aug 15, 2022

Environment

Reproduction

Describe the bug

Additional context

Logs

AndrewSparrowww commented Aug 15, 2022

516310460 commented Aug 15, 2022

AndrewSparrowww commented Aug 16, 2022

516310460 commented Aug 16, 2022

vis97c commented Aug 21, 2022 • edited

vis97c commented Aug 21, 2022 • edited

gezichenshan commented Aug 22, 2022

v-romanyuk commented Aug 22, 2022

gezichenshan commented Aug 22, 2022

alisdg commented Aug 23, 2022

vis97c commented Aug 23, 2022

rowanwins commented Aug 25, 2022

brtinney commented Aug 27, 2022

516310460 commented Aug 27, 2022 • edited

brtinney commented Aug 28, 2022

gbdubs commented Sep 29, 2022

szwenni commented Oct 4, 2022

brtinney commented Oct 4, 2022

justwiebe commented Nov 4, 2022

justwiebe commented Nov 4, 2022

danielroe commented Nov 8, 2022

vis97c commented Aug 21, 2022 •

edited

vis97c commented Aug 21, 2022 •

edited

516310460 commented Aug 27, 2022 •

edited