sveltejs/svelte-loader

alias config does not work with Svelte 5

atticuscornett opened this issue · 5 comments

As briefly mentioned in #242, the alias config as provided in the README appears to be broken in Svelte 5 as svelte/src/runtime does not exist.

When building with the alias config, errors such as Can't resolve 'svelte/internal/disclose-version' and Can't resolve 'svelte/internal/client' occur.

Removing the alias rule fixes these errors. Either removing, fixing, or adding a note to the alias config would be very helpful so that others don't have to troubleshoot this problem themselves. Thank you!

Had the same issue. Solution for me: Remove Svelte from resolve.alias.

With the module rules in webpack down under, Webpack will be build Svelte 5 correctly with the following versions:

  • ts-loader 9.5.1
  • svelte 5.1.15
  • svelte-loader 3.2.4
  • webpack 5.96.1
module: {
	rules: [
		{
			test: /\.svelte\.ts$/,
			use: ["svelte-loader", "ts-loader"],
		},
		{
			test: /(?<!\.svelte)\.ts$/,
			loader: "ts-loader",
		},
		{
			test: /\.(svelte|svelte\.js)$/,
			use: 'svelte-loader'
		},
		{
			test: /node_modules\/svelte\/.*\.mjs$/,
			resolve: {
				fullySpecified: false
			}
		},
		{
			test: /\.css$/,
			use: [
				MiniCssExtractPlugin.loader,
				'css-loader'
			]
		}
	]
},

My full webpack config, based on https://github.com/sveltejs/template-webpack:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';

module.exports = {
	entry: {
		'build/bundle': ['./src/main.ts']
	},
	resolve: {
		extensions: ['.mjs', '.js', '.svelte'],
		mainFields: ['svelte', 'browser', 'module', 'main'],
		conditionNames: ['svelte', 'browser']
	},
	output: {
		path: path.join(__dirname, '/public'),
		filename: '[name].js',
		chunkFilename: '[name].[id].js'
	},
	module: {
		rules: [
			{
				test: /\.svelte\.ts$/,
				use: [ "svelte-loader", "ts-loader"],
			},
			{
				test: /(?<!\.svelte)\.ts$/,
				loader: "ts-loader",
			},
			{
				test: /\.(svelte|svelte\.js)$/,
				use: 'svelte-loader'
			},
			{
				test: /node_modules\/svelte\/.*\.mjs$/,
				resolve: {
					fullySpecified: false
				}
			},
			{
				test: /\.css$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader'
				]
			}
		]
	},
	mode,
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].css'
		})
	],
	devtool: prod ? false : 'source-map',
	devServer: {
		hot: true,
		static: {
			directory: path.join(__dirname, 'public'),
		}
	}
};

Once again querying the webpack experts here: During #234 I briefly commented the alias out with an explanation that you rarely need it, then someone pointed out that you need it more often than not, and it's hard to debug, so I put it back in. But in its current form its pretty useless for Svelte 5, and now it seems it isn't really needed?