Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/node_modules/[Some Module]/[Name].esm.js

[Artur-Galstyan]

Describe the bug

Pretext: I'm not sure if this is a general SvelteKit problem yet. It might be.

I'm using a project called wavesurfer.js. That project has some plugins, for example wavesurfer.js/dist/plugins/regions.js. Sveltekit tries to import wavesurfer.js/dist/plugins/regions.esm.js once built and deployed to Vercel (and Netlify too). That leads to this error message:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/node_modules/wavesurfer.js/dist/plugins/regions.esm.js' imported from /var/task/.svelte-kit/output/server/entries/pages/_page.svelte.js
    at new NodeError (node:internal/errors:399:5)
    at finalizeResolution (node:internal/modules/esm/resolve:331:11)
    at moduleResolve (node:internal/modules/esm/resolve:994:10)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:938:12)
    at defaultResolve (node:internal/modules/esm/resolve:1202:79)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

This error however only appears if I deploy to Vercel or Netlify. It doesn't happen locally if I build and preview the project. Since it happens both on Vercel and Netlify, I thought it's probably a Sveltekit issue, as it's the common denominator.

I had also created an issue at wavesurfer.js but as the author stated, it's probably not a wavesurfer issue.

Reproduction

1. Create a skeleton project with sveltekit
2. run npm install --save wavesurfer.js
3. paste this into the +page.svelte file:

<script lang="ts">
    import { onMount } from "svelte";
    import WaveSurfer from "wavesurfer.js";
    import RegionsPlugin from "wavesurfer.js/dist/plugins/regions.js";
    import type { Region } from "wavesurfer.js/dist/plugins/regions.js";

    onMount(() => {
        const ws = WaveSurfer.create({
            container: "#waveform",
            waveColor: "rgb(200, 0, 200)",
            progressColor: "rgb(100, 0, 100)",
            url: "https://plazma-public-songs.s3.amazonaws.com/g989a7rqv6s7jlv.mp3"
        });
        const wsRegions = ws.registerPlugin(RegionsPlugin.create());

        // Give regions a random color when they are created
        const random = (min, max) => Math.random() * (max - min) + min;
        const randomColor = () =>
            `rgba(${random(0, 255)}, ${random(0, 255)}, ${random(
                0,
                255
            )}, 0.5)`;

        // Create some regions at specific time ranges
        ws.on("decode", () => {
            // Regions
            let region: Region = wsRegions.addRegion({
                start: 0,
                end: 8,
                content: "Resize me",
                color: randomColor(),
                drag: false,
                resize: true
            });
        });
    });
</script>

<div id="waveform" />

4. run npm i -D @sveltejs/adapter-vercel
5. paste this in the svelte.config.js file:

import adapter from "@sveltejs/adapter-vercel";
import { vitePreprocess } from "@sveltejs/kit/vite";

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: vitePreprocess(),

    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter()
    }
};

export default config;

6. Deploy on Vercel (or Netlify in which case you need a different adapter)
7. Be sad that it doesn't work :(

Logs

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/node_modules/wavesurfer.js/dist/plugins/regions.esm.js' imported from /var/task/.svelte-kit/output/server/entries/pages/_page.svelte.js
    at new NodeError (node:internal/errors:399:5)
    at finalizeResolution (node:internal/modules/esm/resolve:331:11)
    at moduleResolve (node:internal/modules/esm/resolve:994:10)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:938:12)
    at defaultResolve (node:internal/modules/esm/resolve:1202:79)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

System Info

System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 97.22 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - /opt/homebrew/opt/node@18/bin/node
    npm: 9.6.7 - /opt/homebrew/opt/node@18/bin/npm
  Browsers:
    Chrome: 115.0.5790.114
    Safari: 16.5.2
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0 
    @sveltejs/adapter-netlify: ^2.0.8 => 2.0.8 
    @sveltejs/adapter-vercel: ^3.0.3 => 3.0.3 
    @sveltejs/kit: ^1.20.4 => 1.22.4 
    svelte: ^4.0.5 => 4.1.2 
    vite: ^4.4.2 => 4.4.8

Severity

annoyance

Additional Information

No response

[thedevbc]

We are using the node adapter, but we recently noticed the same behavior, and I changed added some ssr configuration to our vite.config.ts file:
`import { sveltekit } from '@sveltejs/kit/vite';
import pkg from './package.json';

/** @type {import('vite').UserConfig} */
const config = {
plugins: [
sveltekit()
],
server: {
host: true,
port: 8100
},
ssr: {
noExternal: Object.keys(pkg.dependencies || {})
}
};
`
I found that here: #928 (comment)

I'm not sure if something changed with sveltekit or with vite recently, but this didn't seem to be necessary 4+ weeks ago. I've tried rolling back sveltekit versions to see if that made a difference (it didn't), but I haven't done the same for the node adapter or vite. Adding that ssr, noExternal config to the vite config is our solution for now.

[thedevbc]

We are using the node adapter, but we recently noticed the same behavior, and I changed added some ssr configuration to our vite.config.ts file: `import { sveltekit } from '@sveltejs/kit/vite'; import pkg from './package.json';

/** @type {import('vite').UserConfig} */ const config = { plugins: [ sveltekit() ], server: { host: true, port: 8100 }, ssr: { noExternal: Object.keys(pkg.dependencies || {}) } }; ` I found that here: #928 (comment)

I'm not sure if something changed with sveltekit or with vite recently, but this didn't seem to be necessary 4+ weeks ago. I've tried rolling back sveltekit versions to see if that made a difference (it didn't), but I haven't done the same for the node adapter or vite. Adding that ssr, noExternal config to the vite config is our solution for now.

So, we discovered our actual issue was we had a .dockerignore file that was keeping some node_modules out of our containers. So I'm actually removing that unnecessary ssr configuration from the vite config.

[amanullah-swe]

i am also have same issue but in defferent package when i deploy my backend project on vercel it and give me same error but it run on my machine fine not only just that it also run on vercel few time and i just update some cors configration to access backend from my frontend it crash and i didn't find any solution on internet if any has any idea pleas help me out i wana deploy my project

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/node_modules/stripe/esm/stripe.esm.node.js' imported from /var/task/controller/payments.js
Did you mean to import stripe/cjs/stripe.cjs.node.js?

[eltigerchino]

closing as it seems to be fixed by wavesurfer.js and I can't reproduce it on the latest version of wavesurfer.js

i am also have same issue but in defferent package when i deploy my backend project on vercel it and give me same error but it run on my machine fine not only just that it also run on vercel few time and i just update some cors configration to access backend from my frontend it crash and i didn't find any solution on internet if any has any idea pleas help me out i wana deploy my project

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/node_modules/stripe/esm/stripe.esm.node.js' imported from /var/task/controller/payments.js Did you mean to import stripe/cjs/stripe.cjs.node.js?

I can't reproduce this issue with stripe. Please create a minimal reproduction and submit a new issue.