Svelte 4 Support

[mgreystone]

Neither the documentation nor the example template do not work with svelte 4.

1. Clone the template
2. Upgrade to svelte 4 npm install svelte@latest
3. Start webpack npm run dev

Webpack fails to build with errors. Internal svelte modules do not resolve.

> [email protected] dev
> webpack serve

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.206:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/mgreystone/src/template-webpack/public' directory
compilerOptions.css as a boolean is deprecated. Use 'injected' instead of true.
asset build/bundle.js 305 KiB [emitted] (name: build/bundle) 1 related asset
asset build/bundle.css 1.12 KiB [emitted] (name: build/bundle) 1 related asset
Entrypoint build/bundle 306 KiB (345 KiB) = build/bundle.css 1.12 KiB build/bundle.js 305 KiB 2 auxiliary assets
runtime modules 44 KiB 23 modules
orphan modules 5.55 KiB [orphan] 3 modules
modules by path ./node_modules/ 218 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules
  modules by path ./node_modules/svelte-hmr/runtime/*.js 32.7 KiB 6 modules
  modules by path ./node_modules/webpack/hot/*.js 5.3 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.8 KiB 4 modules
  modules by path ./node_modules/mini-css-extract-plugin/dist/hmr/*.js 5.92 KiB 2 modules
  + 3 modules
modules by path ./src/ 6.38 KiB (javascript) 890 bytes (css/mini-extract)
  modules by path ./src/*.css 323 bytes (javascript) 890 bytes (css/mini-extract)
    ./src/global.css 323 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./src/global.css 890 bytes [built] [code generated]
  ./src/main.js 157 bytes [built] [code generated]
  ./src/App.svelte 5.92 KiB [built] [code generated]

ERROR in ./node_modules/svelte-hmr/runtime/proxy-adapter-dom.js 2:0-49
Module not found: Error: Can't resolve 'svelte/internal' in '/Users/mgreystone/src/template-webpack/node_modules/svelte-hmr/runtime'
 @ ./src/App.svelte 155:122-279 155:850-885
 @ ./src/main.js 3:0-31 5:16-19

ERROR in ./node_modules/svelte-hmr/runtime/svelte-hooks.js 7:0-11:24
Module not found: Error: Can't resolve 'svelte/internal' in '/Users/mgreystone/src/template-webpack/node_modules/svelte-hmr/runtime'
 @ ./node_modules/svelte-hmr/runtime/proxy.js 8:0-58 242:6-28
 @ ./node_modules/svelte-hmr/runtime/hot-api.js 3:0-55 78:4-15 106:23-36 152:10-23
 @ ./node_modules/svelte-hmr/runtime/index.js 1:0-43 1:0-43
 @ ./node_modules/svelte-loader/lib/hot-api.js 1:0-50 60:24-36
 @ ./src/App.svelte 155:0-122 155:346-376
 @ ./src/main.js 3:0-31 5:16-19

ERROR in ./src/App.svelte 2:0-19:25
Module not found: Error: Can't resolve 'svelte/internal' in '/Users/mgreystone/src/template-webpack/src'
 @ ./src/main.js 3:0-31 5:16-19

ERROR in ./src/App.svelte 21:0-42
Module not found: Error: Can't resolve 'svelte/internal/disclose-version' in '/Users/mgreystone/src/template-webpack/src'
 @ ./src/main.js 3:0-31 5:16-19

4 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.88.0 compiled with 4 errors in 364 ms

Example: https://github.com/mgreystone/template-webpack

[fvarano]

Same here.
I found a workaround for now, which is editing the resolve.alias option in the webpack config from:

svelte: path.resolve('node_modules', 'svelte')

to:

svelte: path.resolve('node_modules', 'svelte/src/runtime')

I don't think this should be the solution, tho.
This takes advantage of the file structure of the Svelte package, rather than the exports field in its package.json. This is brittle.

[dummdidumm]

Could anyone shed some light on why that resolve.alias is needed anyway? I've removed it and it continues to work in the webpack template. I suspect this is a leftover from some ancient webpack version which is no longer needed / causing harm now.

Edit: The explanation in the svelte-loader sheds some light on this. I think this is not needed in the vast majority of cases, so it's probably best to comment it out (and people can comment it in if they need to)

[dummdidumm]

The readme and webpack-template have been updated.

[fvarano]

Thanks!
In my case, it would fail to compile even without doing npm link to another package.
For some reason, if you use a Svelte component library package, there's a chance that Webpack will compile your app and the component library separately. When that happens, you have two runtimes in the same app, and things fall apart quickly.
It is really hard to debug, cause you can't see those two conflicting versions unless you're really looking for it.

I think that the option could be left there uncommented because it creates way more confusion not having it in case you need it, than having it but being somewhat linked to the package structure.

Maybe someone could come up with a better and less brittle solution.

[dummdidumm]

I see, I'll add it back uncommented then. I don't think there's a better solution to this if webpack behaves this weirdly - we'll just have to make sure the internal path doesn't change between major versions of Svelte (which it shouldn't, anyway).

[fvarano]

I see, I'll add it back uncommented then. I don't think there's a better solution to this if webpack behaves this weirdly - we'll just have to make sure the internal path doesn't change between major versions of Svelte (which it shouldn't, anyway).

Even if the internal structure changes, now you know that it could have this impact and you could communicate it.
Furthermore, I think that googling one submodule not resolving in webpack after an update could be more insightful than googling for this weird problem that could happen for many reasons, one of which is that resolve.alias thing.