svelte-loader

3.2.4 verified Mon Apr 27 auth: no javascript

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.

Common errors

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

cause 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') }

error 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. ↓

cause .svelte files not being processed by svelte-loader.

fix

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

error Critical dependency: the request of a dependency is an expression ↓

cause Webpack 5 + Svelte without .mjs rule.

fix

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

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

cause Using svelte-loader with TypeScript without proper chaining.

fix

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

Warnings

gotcha Webpack 5 requires special handling for .mjs files from svelte node_modules. ↓

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

breaking In Svelte 5, .svelte files with TypeScript need a separate loader order. ↓

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

deprecated SvelteLoader 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

gotcha Failure 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.

gotcha If 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.

Install

npm install svelte-loader

yarn add svelte-loader

pnpm add svelte-loader

Imports

svelte-loader (as a webpack rule loader string)
wrong
```
use: 'svelte'
```
correct
```
use: 'svelte-loader'
```
The loader is referenced by its package name; do not confuse with the 'svelte' package itself.

require('svelte-loader') in webpack config

wrong

const svelte = require('svelte');

correct

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

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

emitCss option

wrong

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

correct

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

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

Quickstart

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
        }
      }
    ]
  }
};