Conflicts with mini-css-extract-plugin
crodriguez-plitzi opened this issue · comments
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]
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),
}
send a pr
typeof window !== undefined should do it
Hi, any news about this issue? I have the same pb