Make it work with Webpack 5, use webpack-virtual-modules as a dependency

Author: non25

README.md

@@ -33,6 +33,13 @@ Configure inside your `webpack.config.js`:
         test: /\.(html|svelte)$/,
         exclude: /node_modules/,
         use: 'svelte-loader'
+      },
+      {
+        // required to prevent errors from Svelte on Webpack 5+
+        test: /svelte\/.*\.mjs$/,
+        resolve: {
+          fullySpecified: false
+        }
       }
       ...
     ]
@@ -54,9 +61,13 @@ Webpack's [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#r
 
 If your Svelte components contain `<style>` tags, by default the compiler will add JavaScript that injects those styles into the page when the component is rendered. That's not ideal, because it adds weight to your JavaScript, prevents styles from being fetched in parallel with your code, and can even cause CSP violations.
 
-A better option is to extract the CSS into a separate file. Using the `emitCss` option as shown below would cause a virtual CSS file to be emitted for each Svelte component. The resulting file is then imported by the component, thus following the standard Webpack compilation flow. Add [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to the mix to output the css to a separate file.
+A better option is to extract the CSS into a separate file. Using the `emitCss` option as shown below would cause a virtual CSS file to be emitted for each Svelte component. The resulting file is then imported by the component, thus following the standard Webpack compilation flow. Add [MiniCssExtractPlugin](https://webpack.js.org/plugins/mini-css-extract-plugin/) to the mix to output the css to a separate file.
+
+Make sure to add SveltePlugin like shown below, which allows emitting virtual CSS files. It is a wrapper around webpack-virtual-modules, connected to the svelte-loader.
 
 ```javascript
+  const SveltePlugin = require('svelte-loader').plugin;
+  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   ...
   module: {
     rules: [
@@ -73,17 +84,20 @@ A better option is to extract the CSS into a separate file. Using the `emitCss`
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader',
-        }),
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader'
+        ]
       },
       ...
     ]
   },
   ...
   plugins: [
-    new ExtractTextPlugin('styles.css'),
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    }),
+    new SveltePlugin(),
     ...
   ]
   ...
@@ -115,19 +129,26 @@ module.exports = {
             },
           },
         },
+
         {
           test: /\.css$/,
-          use: ExtractTextPlugin.extract({
-            fallback: 'style-loader',
-            use: [{ loader: 'css-loader', options: { sourceMap: true } }],
-          }),
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: { sourceMap: true }
+            }
+          ]
         },
         ...
       ]
     },
     ...
     plugins: [
-      new ExtractTextPlugin('styles.css'),
+      new MiniCssExtractPlugin({
+        filename: '[name].css'
+      }),
+      new SveltePlugin(),
       ...
     ]
     ...

index.js

@@ -1,6 +1,6 @@
 const { basename, extname, relative } = require('path');
 const { getOptions } = require('loader-utils');
-const VirtualModules = require('./lib/virtual');
+const VirtualModules = require('webpack-virtual-modules');
 
 const hotApi = require.resolve('./lib/hot-api.js');
 
@@ -96,13 +96,9 @@ function deprecatePreprocessOptions(options) {
 	options.preprocess = options.preprocess || preprocessOptions;
 }
 
-const virtualModuleInstances = new Map();
-
-module.exports = function(source, map) {
-	if (this._compiler && !virtualModuleInstances.has(this._compiler)) {
-		virtualModuleInstances.set(this._compiler, new VirtualModules(this._compiler));
-	}
+let virtualModuleInstances = new WeakMap();
 
+function loader(source, map) {
 	const virtualModules = virtualModuleInstances.get(this._compiler);
 
 	this.cacheable();
@@ -169,9 +165,26 @@ module.exports = function(source, map) {
 			css.code += '\n/*# sourceMappingURL=' + css.map.toUrl() + '*/';
 			js.code = js.code + `\nimport '${posixify(cssFilepath)}';\n`;
 
-			if (virtualModules) {
-				virtualModules.writeModule(cssFilepath, css.code);
+			if (!virtualModules) {
+				throw new Error(
+					`
+
+					To be able to use emitCss: true, add
+
+						const SveltePlugin = require('svelte-loader').plugin;
+
+					to the top of your webpack.config.js and
+					SveltePlugin to the plugins array like this
+
+						plugins: [
+							...
+							new SveltePlugin()
+						]
+					`.split('\n').map(s => s.slice(5)).join('\n')
+				);
 			}
+
+			virtualModules.writeModule(cssFilepath, css.code);
 		}
 
 		callback(null, js.code, js.map);
@@ -180,4 +193,15 @@ module.exports = function(source, map) {
 		// context when logging to console
 		callback(new Error(`${err.name}: ${err.toString()}`));
 	});
-};
+}
+
+class SveltePlugin extends VirtualModules {
+	apply(compiler) {
+		virtualModuleInstances.set(compiler, this);
+		super.apply(compiler);
+	}
+}
+
+loader.plugin = SveltePlugin;
+
+module.exports = loader;

lib/virtual-stats.js

@@ -1,6 +1,6 @@
 {
   "name": "svelte-loader",
-  "version": "2.13.6",
+  "version": "3.0.0",
   "author": "Nico Rehwaldt <[email protected]>",
   "description": "A webpack loader for svelte",
   "license": "MIT",
@@ -16,7 +16,8 @@
   ],
   "dependencies": {
     "loader-utils": "^1.1.0",
-    "svelte-dev-helper": "^1.1.9"
+    "svelte-dev-helper": "^1.1.9",
+    "webpack-virtual-modules": "^0.4.1"
   },
   "devDependencies": {
     "chai": "^4.1.2",
@@ -25,7 +26,7 @@
     "mocha": "^5.2.0",
     "sinon": "^6.1.5",
     "sinon-chai": "^3.2.0",
-    "svelte": "^3.0.0-beta.5"
+    "svelte": "^3.0.0"
   },
   "peerDependencies": {
     "svelte": ">1.44.0"

lib/virtual.js

@@ -208,19 +208,6 @@ describe('loader', () => {
 					{}
 				)
 			);
-
-			it(
-				'should configure emitCss=true',
-				testLoader(
-					'test/fixtures/css.html',
-					function(err, code, map) {
-						expect(err).not.to.exist;
-
-						expect(code).to.match(/import '.+\.css';/);
-					},
-					{ emitCss: true }
-				)
-			);
 		});
 
 		describe('preprocess', () => {