{"id":22426,"library":"svelte-loader","title":"svelte-loader","description":"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.","status":"active","version":"3.2.4","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/sveltejs/svelte-loader","tags":["javascript","svelte","sveltejs","webpack-loader"],"install":[{"cmd":"npm install svelte-loader","lang":"bash","label":"npm"},{"cmd":"yarn add svelte-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add svelte-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required at runtime to compile Svelte components","package":"svelte","optional":false}],"imports":[{"note":"The loader is referenced by its package name; do not confuse with the 'svelte' package itself.","wrong":"use: 'svelte'","symbol":"svelte-loader (as a webpack rule loader string)","correct":"use: 'svelte-loader'"},{"note":"You require the loader package, not the Svelte runtime library.","wrong":"const svelte = require('svelte');","symbol":"require('svelte-loader') in webpack config","correct":"const svelteLoader = require('svelte-loader'); or use as string 'svelte-loader'"},{"note":"CSS extraction is opt-in; default behavior injects styles via JS.","wrong":"use: 'svelte-loader' (if expecting CSS extraction without options)","symbol":"emitCss option","correct":"use: { loader: 'svelte-loader', options: { emitCss: true } }"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  resolve: {\n    alias: {\n      svelte: path.resolve('node_modules', 'svelte')\n    },\n    extensions: ['.mjs', '.js', '.svelte'],\n    mainFields: ['svelte', 'browser', 'module', 'main'],\n    conditionNames: ['svelte', 'browser', 'import']\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.svelte$/,\n        use: {\n          loader: 'svelte-loader',\n          options: {\n            emitCss: true\n          }\n        }\n      },\n      {\n        test: /node_modules\\/svelte\\/.*\\.mjs$/,\n        resolve: {\n          fullySpecified: false\n        }\n      }\n    ]\n  }\n};","lang":"javascript","description":"Setup webpack to bundle Svelte components with svelte-loader, including resolve aliasing and CSS extraction."},"warnings":[{"fix":"Add a rule: { test: /node_modules\\/svelte\\/.*\\.mjs$/, resolve: { fullySpecified: false } }","message":"Webpack 5 requires special handling for .mjs files from svelte node_modules.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Use pattern: test: /\\.svelte\\.ts$/, use: ['svelte-loader', 'ts-loader']","message":"In Svelte 5, .svelte files with TypeScript need a separate loader order.","severity":"breaking","affected_versions":">=5.0.0"},{"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","message":"SvelteLoader no longer supports automatically determining runtime path; alias must be explicit.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Add 'svelte' to both mainFields and conditionNames arrays in webpack config.","message":"Failure to set resolve.mainFields and resolve.conditionNames may cause using compiled Svelte code instead of source.","severity":"gotcha","affected_versions":"*"},{"fix":"Set resolve.alias to point to a single Svelte installation as shown in the README.","message":"If multiple copies of Svelte runtime are bundled (e.g., via npm link), components may behave unpredictably.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install svelte: npm install svelte --save-dev, and add alias in webpack config: alias: { svelte: path.resolve('node_modules', 'svelte') }","cause":"Missing alias or Svelte not installed.","error":"Module not found: Error: Can't resolve 'svelte'"},{"fix":"Add a rule for .svelte files in webpack config: { test: /\\.svelte$/, use: 'svelte-loader' }","cause":".svelte files not being processed by svelte-loader.","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."},{"fix":"Add rule: { test: /node_modules\\/svelte\\/.*\\.mjs$/, resolve: { fullySpecified: false } }","cause":"Webpack 5 + Svelte without .mjs rule.","error":"Critical dependency: the request of a dependency is an expression"},{"fix":"For Svelte 5+ with TypeScript, use: { test: /\\.svelte\\.ts$/, use: ['svelte-loader', 'ts-loader'] }","cause":"Using svelte-loader with TypeScript without proper chaining.","error":"You may need an additional loader to handle the result of these loaders."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}