Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

alias config does not work with Svelte 5 #243

Open
atticuscornett opened this issue Nov 5, 2024 · 2 comments
Open

alias config does not work with Svelte 5 #243

atticuscornett opened this issue Nov 5, 2024 · 2 comments

Comments

@atticuscornett
Copy link

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!

@johnvanhulsen
Copy link

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'),
		}
	}
};

@dummdidumm
Copy link
Member

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants