Conflicts with mini-css-extract-plugin

[crodriguez-plitzi]

hi, Testing this library i found problems with mini-css-extract-plugin, is there a way to solve this ?

ERROR in ./src/assets/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: window is not defined
    at tryRunOrWebpackError (/home/carlos/htdocs/plitzi-sdk/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/carlos/htdocs/plitzi-sdk/node_modules/webpack/lib/Compilation.js:4979:12)
    at /home/carlos/htdocs/plitzi-sdk/node_modules/webpack/lib/Compilation.js:5003:11
    at symbolIterator (/home/carlos/htdocs/plitzi-sdk/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/carlos/htdocs/plitzi-sdk/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/carlos/htdocs/plitzi-sdk/node_modules/neo-async/async.js:3463:5)
    at /home/carlos/htdocs/plitzi-sdk/node_modules/webpack/lib/Compilation.js:4879:16
    at symbolIterator (/home/carlos/htdocs/plitzi-sdk/node_modules/neo-async/async.js:3485:9)
    at done (/home/carlos/htdocs/plitzi-sdk/node_modules/neo-async/async.js:3527:9)
    at /home/carlos/htdocs/plitzi-sdk/node_modules/webpack/lib/Compilation.js:4794:8
-- inner error --
ReferenceError: window is not defined
    at webpack/runtime/live reloading runtime module:2:1
    at /home/carlos/htdocs/plitzi-sdk/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:460:11
    at Hook.eval [as call] (eval at create (/home/carlos/htdocs/plitzi-sdk/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:9:1)
    at /home/carlos/htdocs/plitzi-sdk/node_modules/webpack/lib/Compilation.js:4981:39
    at tryRunOrWebpackError (/home/carlos/htdocs/plitzi-sdk/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/carlos/htdocs/plitzi-sdk/node_modules/webpack/lib/Compilation.js:4979:12)
    at /home/carlos/htdocs/plitzi-sdk/node_modules/webpack/lib/Compilation.js:5003:11
    at symbolIterator (/home/carlos/htdocs/plitzi-sdk/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/carlos/htdocs/plitzi-sdk/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/carlos/htdocs/plitzi-sdk/node_modules/neo-async/async.js:3463:5)

Generated code for webpack/runtime/live reloading runtime module
 1 | 
 2 | if(!window.liveReload) {
 3 | window.liveReload = true
 4 | 	const socket = new WebSocket('ws://localhost:40001');
 5 | 	socket.addEventListener('open', function (event) {
 6 | 		console.log(`Client opened connection to server.`);
 7 | 	});
 8 | 
 9 | 	socket.addEventListener('message', function (event) {
10 | 		var message = JSON.parse(event.data);
11 | 		if (message.type === 'reload') {
12 | 			console.log('Reloading page due to reload event...');
13 | 			window.location.reload();
14 | 		}
15 | 	});
16 | 	socket.addEventListener('close', (event) => {
17 | 		console.log('Closing socket');
18 | 		socket.close();
19 | 	});
20 | 
21 | }
22 | 
 @ ./src/App.js 25:0-29
 @ ./WidgetEntryPointBootstrap.js 21:0-28 41:34-37 76:32-35
 @ container entry ./Sdk[0]

[danbiilee]

Hi, I had the same issue too.

I couldn't find the reason, but I solved it by not using fmr in development mode.
So this way may not be appropriate if it must be separated into a css file even in development mode.

This is my webpack.config.js

const isDevelopment = process.env.NODE_ENV !== 'production'

module.exports = {
  ...
  module: {
    rules: [
	...
	{
	    test: /\.s?css$/,
	    use: [
	        isDevelopment
	            ? 'style-loader'
	            : MiniCssExtractPlugin.loader,
	        'css-loader',
	        'sass-loader',
	    ].filter(Boolean),
	},
    ]
  },
  plugins: [
    ...
    !isDevelopment &&
      new MiniCssExtractPlugin({
          filename: '[name].[contenthash:8].css',
      }),
  ].filter(Boolean),
}

[ScriptedAlchemy]

send a pr
typeof window !== undefined should do it

[TristanBlg]

Hi, any news about this issue? I have the same pb