Errors after context="module" to module change in Svelte 5

[tommyminds]

Describe the bug

After updating from 230 to 240, which includes the context="module" to module change, and updating my script tags to just use module, I am getting errors when running npm run dev. The actual code does what I expect though.

Error:   Failed to scan for dependencies from entries:
  /Users/minds/repos/test2/src/routes/+page.svelte

  ✘ [ERROR] No matching export in "html:/Users/minds/repos/test2/src/lib/ComponentB.svelte" for import "someExport"

    script:/Users/minds/repos/test2/src/lib/ComponentA.svelte?id=0:2:10:
      2 │   import { someExport } from '$lib/ComponentB.svelte';
        ╵            ~~~~~~~~~~


    at failureErrorWithLog (/Users/minds/repos/test2/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1472:15)
    at /Users/minds/repos/test2/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:945:25
    at runOnEndCallbacks (/Users/minds/repos/test2/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1315:45)
    at buildResponseToResult (/Users/minds/repos/test2/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:943:7)
    at /Users/minds/repos/test2/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:955:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (/Users/minds/repos/test2/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:954:54)
    at handleRequest (/Users/minds/repos/test2/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:647:17)
    at handleIncomingPacket (/Users/minds/repos/test2/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:672:7)
    at Socket.readFromStdout (/Users/minds/repos/test2/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:600:7)

Reproduction

Create a new skeleton application using pnpm create svelte@latest and add the following three files:

src/lib/routes/+page.svelte

<script>
	import ComponentA from '$/lib/ComponentA.svelte';
</script>

<ComponentA />

src/lib/ComponentA.svelte

<script>
	import { someExport } from '$lib/ComponentB.svelte';

	function onClick() {
		console.log(someExport.foo);
	}
</script>

<button onclick={onClick}>Click me</button>

src/lib/ComponentB.svelte

<script module>
	export const someExport = { foo: 'bar' };
</script>

Then run pnpm run dev. You will see the beforementioned errors. If I switch back to using context="module", it works again.

Logs

No response

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 72.22 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.19.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
    pnpm: 9.9.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.26 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 127.0.6533.122
    Safari: 17.6
  npmPackages:
    svelte: ^5.0.0-next.240 => 5.0.0-next.240

Severity

annoyance

[dummdidumm]

I can't reproduce this given the above steps. Please provide a reproduction using Stackblitz or a Github repo

[tommyminds]

I created a repo here: https://github.com/tommyminds/svelte-5-issue

It has two commits, the initial one is from a clean pnpm create svelte@latest command, the second with the above files in them.

Something very strange is going on. When I tried today using the steps above, it did work initially. However, when I removed node_modules and did a pnpm install again, the errors came back. Now I can't get that repo to work anymore. Tried pruning pnpm store, removing the cache entirely etc, I get the errors every single time now. I just had a colleague clone the repo, run a pnpm install and pnpm run dev, and he instantly had the issue. Hopefully that is the case for you as well and you are able to reproduce it...

[webJose]

Maybe you're experiencing the Svelte language server not reacting to the file changes. In VS Code, after pnpm install, open the commands menu and search for the command "Svelte: Restart language server".

[tommyminds]

This is not in VS Code. In VS Code the language server actually correctly identifies the import. This is an error that Vite throws when you run the 'pnpm run dev' command.

[henrikvilhelmberglund]

I tested the repo, for me it works fine using pnpm, npm and bun.

Edit: repro below also works for me, now I'm just confused.

[stephanedemotte]

Got the same error here my fresh svelte install

https://github.com/stephanedemotte/svelte5-bug-import-module

Work if i change to <script context="module">

[mustafa0x]

Same error here.

Also, another strange issue: the LSP complains about valid js syntax.

Reverting to context=module fixes this oddity.

[stephanedemotte]

Same as @mustafa0x with LSP

[dummdidumm]

@mustafa0x / @stephanedemotte which version of Svelte tooling are you using exactly (VS Code extension or something else, and which version)?

[mustafa0x]

@mustafa0x / @stephanedemotte which version of Svelte tooling are you using exactly (VS Code extension or something else, and which version)?

https://github.com/sublimelsp/LSP-svelte v3.1.4

[ronny-rentner]

I also have this problem, changing context="module" to module makes Svelte not find the exported functions anymore.

[tommyminds]

Is there still someone looking into this? I have been able to reproduce this with the provided repo on many different laptops, from clean states even. Maybe it's related to the fact that all those laptops are macbooks?

[paoloricciuti]

Do you have the latest version of the svelte extension?

[tommyminds]

This is not an issue in the Vs code extension. The language server in vscode is actually working great with these changes and can autocomplete and jump to the variables without any problems.

The errors happen when you run 'pnpm run dev'

[paoloricciuti]

I'll try to take a look later

[paoloricciuti]

I've tried exploring a bit without much success...the error is thrown by esbuild for some reason but unfortunately you can't really debug that well since it's an executable and it only communicate with JS.

However at least for me everything works fine and after the second load the error even goes away. I'm not really sure this is a problem with svelte and i'm more inclined to think this is an upstream problem but let's try again some other time

[paoloricciuti]

@dominikg likely found the issue and it's upstream in vite

https://github.com/vitejs/vite/blob/952bae3efcbd871fc3df5b1947060de7ebdafa36/packages/vite/src/node/optimizer/scan.ts#L287

They are using a regex to scan for dependencies...will PR later to vite to fix this

[mustafa0x]

I'm quite curious how an egregious show-stopper bug persisted this long. 😅

[paoloricciuti]

I'm quite curious how an egregious show-stopper bug persisted this long. 😅

It's not really a show-stopper issue...it only matters of you are using vite and svelte and exporting something from context module and you look at the console (because the actual code works fine, it's just an error that es build throws while scanning for does)

[mustafa0x]

Thanks Paolo!

because the actual code works fine

I did not realize that! When running pnpm run dev a prominent error saying ✘ [ERROR] No matching export in <path> was shown, so I assumed nothing was working.

[benmccann]

Please ping me when you send a PR to Vite and I will review it there

[tommyminds]

This seems to be working fine now with the changes to Vite and this issue can be closed