Registry / web-framework / svelte-loader

svelte-loader

library3.2.4jsnpmunverified

A webpack loader for Svelte components, allowing you to use Svelte with webpack. This version (3.2.4) supports Svelte 3, 4, and 5 (including runes mode). It handles Svelte files (.svelte) and with extra config supports TypeScript in Svelte files. Key differentiator: it's the official webpack integration from the Svelte team, maintained alongside SvelteKit and Vite plugin. Requires manual webpack configuration for CSS extraction, aliasing, and resolving conditions. Alternatives include vite-plugin-svelte for Vite users.

web-framework

npm install svelte-loader

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · SVELTE-LOADER

svelte-loader

web-frameworkjavascriptv3.2.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

svelte-loader (as a webpack rule loader string)

✓ use: 'svelte-loader'

✗ use: 'svelte'

The loader is referenced by its package name; do not confuse with the 'svelte' package itself.

require('svelte-loader') in webpack config

✓ const svelteLoader = require('svelte-loader'); or use as string 'svelte-loader'

✗ const svelte = require('svelte');

You require the loader package, not the Svelte runtime library.

emitCss option

✓ use: { loader: 'svelte-loader', options: { emitCss: true } }

✗ use: 'svelte-loader' (if expecting CSS extraction without options)

CSS extraction is opt-in; default behavior injects styles via JS.

Setup webpack to bundle Svelte components with svelte-loader, including resolve aliasing and CSS extraction.

// webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, resolve: { alias: { svelte: path.resolve('node_modules', 'svelte') }, extensions: ['.mjs', '.js', '.svelte'], mainFields: ['svelte', 'browser', 'module', 'main'], conditionNames: ['svelte', 'browser', 'import'] }, module: { rules: [ { test: /\.svelte$/, use: { loader: 'svelte-loader', options: { emitCss: true } } }, { test: /node_modules\/svelte\/.*\.mjs$/, resolve: { fullySpecified: false } } ] } };

Debug

Known issues

gotchaWebpack 5 requires special handling for .mjs files from svelte node_modules.

fix

Add a rule: { test: /node_modules\/svelte\/.*\.mjs$/, resolve: { fullySpecified: false } }

affects: >=5.0.0

breakingIn Svelte 5, .svelte files with TypeScript need a separate loader order.

fix

Use pattern: test: /\.svelte\.ts$/, use: ['svelte-loader', 'ts-loader']

affects: >=5.0.0

deprecatedSvelteLoader no longer supports automatically determining runtime path; alias must be explicit.

fix

Set resolve.alias: { svelte: path.resolve('node_modules', 'svelte/src/runtime') } for Svelte 3, or path.resolve('node_modules', 'svelte') for Svelte 4/5

affects: >=3.0.0

gotchaFailure to set resolve.mainFields and resolve.conditionNames may cause using compiled Svelte code instead of source.

fix

Add 'svelte' to both mainFields and conditionNames arrays in webpack config.

affects: *

gotchaIf multiple copies of Svelte runtime are bundled (e.g., via npm link), components may behave unpredictably.

fix

Set resolve.alias to point to a single Svelte installation as shown in the README.

affects: *

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'svelte'

Missing alias or Svelte not installed.

fix

Install svelte: npm install svelte --save-dev, and add alias in webpack config: alias: { svelte: path.resolve('node_modules', 'svelte') }

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

.svelte files not being processed by svelte-loader.

fix

Add a rule for .svelte files in webpack config: { test: /\.svelte$/, use: 'svelte-loader' }

Critical dependency: the request of a dependency is an expression

Webpack 5 + Svelte without .mjs rule.

fix

Add rule: { test: /node_modules\/svelte\/.*\.mjs$/, resolve: { fullySpecified: false } }

You may need an additional loader to handle the result of these loaders.

Using svelte-loader with TypeScript without proper chaining.

fix

For Svelte 5+ with TypeScript, use: { test: /\.svelte\.ts$/, use: ['svelte-loader', 'ts-loader'] }

Upgrade

Version history

3.2.4latest on npm

Audit

Dependencies

svelterequiredPeer dependency required at runtime to compile Svelte components

Agent activity

3 hits · last 30 days

node

Resources

githubhttps://github.com/sveltejs/svelte-loader ↗

packagehttps://www.npmjs.com/package/svelte-loader ↗

homepagehttps://svelte.dev ↗