Conflicts with mini-css-extract-plugin

crodriguez-plitzi commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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

TristanBlg commented 1 year ago

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

module-federation / fmr

Conflicts with mini-css-extract-plugin #4