I'm using webpack and MiniCssExtractPlugin now but when CSS/SCSS file containe any file, I will encounter error say ReferenceError: window is not defined.
I already do some research, saw lot of post say this error happened when you using MiniCssExtractPlugin and style-loader at same time. But this is not my case. I only using MiniCssExtractPlugin.
So hope anyone can give me a hint.
package.json
{
"name": "5913",
"version": "1.0.0",
"main": "index.js",
"directories": {
"doc": "doc",
"lib": "lib"
},
"scripts": {
"dev": "node ./node_modules/gulp/bin/gulp",
"test": "echo "Error: no test specified" && exit 1"
},
"repository": {
"type": "git",
"url": "http://XXXXXXX.XXXXXXX.com:XXXXX/XXX/XXX.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^7.1.4",
"browser-sync": "^2.26.3",
"core-js": "^3.8.3",
"gulp": "^3.9.1",
"gulp-postcss": "^7.0.0",
"gulp-sass": "^3.1.0",
"mjml": "^4.4.0-beta.2",
"node-sass": "^4.14.1"
},
"devDependencies": {
"@babel/core": "^7.12.13",
"@babel/preset-env": "^7.12.13",
"@storybook/preset-scss": "^1.0.3",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^1.3.5",
"mini-svg-data-uri": "^1.2.3",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.20.2",
"webpack-cli": "^4.5.0"
},
"keywords": [],
"description": ""
}
webpack.config.js
const path = require('path');
const svgToMiniDataURI = require('mini-svg-data-uri');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
entry: {
'applications/bearworks/bearworks-index': path.resolve(__dirname, 'src/applications/bearworks/bearworks-index.js')
},
output: {
path: path.resolve(__dirname, 'apps/statics/js/dist'),
filename: "[name].js",
chunkFilename: '[name].chunk.js'
},
module: {
rules: [
{
test: /.jsx?$/,
include: [
path.resolve(__dirname, 'src')
],
exclude: [
path.resolve(__dirname, 'node_modules')
],
use: {
loader: 'babel-loader',
options: {
presets: [
["@babel/env", {
useBuiltIns: 'usage',
corejs: 3,
"targets": {
"browsers": ["last 2 versions", "IE 11"]
}
}]
]
}
}
},
{
test: /.vue$/,
use: [{loader: 'vue-loader'}]
},
{
test: /.(css)$/,
exclude: path.resolve(__dirname, 'node_modules'),
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /.(scss)$/,
exclude: path.resolve(__dirname, 'node_modules'),
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /.(png|jpe?g|gif)$/i,
use: [
{ loader: 'file-loader', options: {name: '[path]/[name].[ext]'} },
],
},
{
test: /.(svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path]/[name].[ext]',
generator: (content) => svgToMiniDataURI(content.toString()),
}
},
],
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
}),
new CleanWebpackPlugin(),
new VueLoaderPlugin()
],
resolve: {
extensions: ['.json', '.js', '.jsx', '.vue'],
alias: {
src: path.resolve(__dirname, 'src'),
scss: path.resolve(__dirname, 'apps/statics/scss/'),
// `/img` is because our legacy css using '/img/.....' to load url image.
'/img': path.resolve(__dirname, 'apps/statics/img/'),
}
},
devtool: 'source-map'
};
and here is the output:
c:AppServ{$PROJECTNAME}>webpack --mode=development
assets by path apps/statics/img/bear/pages/index// 37.7 KiB
asset apps/statics/img/bear/pages/index//menu-bg.png 37 KiB [compared for emit] [from: apps/statics/img/bear/pages/index/menu-bg.png]
asset apps/statics/img/bear/pages/index//ic_member.svg 713 bytes [compared for emit] [from: apps/statics/img/bear/pages/index/ic_member.svg]
assets by path apps/statics/img/index/icon//*.svg 1.55 KiB
asset apps/statics/img/index/icon//ic_member.svg 901 bytes [compared for emit] [from: apps/statics/img/index/icon/ic_member.svg]
asset apps/statics/img/index/icon//mission.svg 684 bytes [compared for emit] [from: apps/statics/img/index/icon/mission.svg]
asset applications/bearworks/bearworks-index.js 84.7 KiB [compared for emit] (name: applications/bearworks/bearworks-index) 1 related asset
asset apps/statics/img/bearworks/index//menu_bg.svg 4.79 KiB [compared for emit] [from: apps/statics/img/bearworks/index/menu_bg.svg]
runtime modules 1.13 KiB 5 modules
modules by path ./node_modules/core-js/internals/*.js 32.2 KiB 61 modules
modules by path ./src/ 5.37 KiB
./src/applications/bearworks/bearworks-index.js 411 bytes [built] [code generated]
./src/components/header.vue 1.05 KiB [built] [code generated]
./src/components/header.vue?vue&type=template&id=29e8c3c6& 204 bytes [built] [code generated]
./src/components/header.vue?vue&type=script&lang=js& 416 bytes [built] [code generated]
./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/header.vue?vue&type=template&id=29e8c3c6& 2.99 KiB [built] [code generated]
./node_modules/babel-loader/lib/index.js??clonedRuleSet-1[0].rules[0].use!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/header.vue?vue&type=script&lang=js& 327 bytes [built] [code generated]
modules by path ./node_modules/core-js/modules/*.js 1.66 KiB
./node_modules/core-js/modules/es.array.find-index.js 930 bytes [built] [code generated]
./node_modules/core-js/modules/es.array.map.js 768 bytes [built] [code generated]
./node_modules/vue-loader/lib/runtime/componentNormalizer.js 2.71 KiB [built] [code generated]
./apps/statics/scss/components/bear/bear-all-header.css 39 bytes [built] [code generated] [1 error]
ERROR in ./apps/statics/scss/components/bear/bear-all-header.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: window is not defined
at Object../apps/statics/img/bear/pages/index/menu-bg.png (c:AppServ{$PROJECTNAME}
ode_modulescss-loaderdistcjs.js!c:AppServ{$PROJECTNAME}appsstaticsscsscomponentsearear-all-header.css:219:65)
at __webpack_require__ (c:AppServ{$PROJECTNAME}
ode_modulescss-loaderdistcjs.js!c:AppServ{$PROJECTNAME}appsstaticsscsscomponentsearear-all-header.css:298:41)
at Object../node_modules/css-loader/dist/cjs.js!./apps/statics/scss/components/bear/bear-all-header.css (c:AppServ{$PROJECTNAME}
ode_modulescss-loaderdistcjs.js!c:AppServ{$PROJECTNAME}appsstaticsscsscomponentsearear-all-header.css:22:91)
at __webpack_require__ (c:AppServ{$PROJECTNAME}
ode_modulescss-loaderdistcjs.js!c:AppServ{$PROJECTNAME}appsstaticsscsscomponentsearear-all-header.css:298:41)
at c:AppServ{$PROJECTNAME}
ode_modulescss-loaderdistcjs.js!c:AppServ{$PROJECTNAME}appsstaticsscsscomponentsearear-all-header.css:349:18
at Object.<anonymous> (c:AppServ{$PROJECTNAME}
ode_modulescss-loaderdistcjs.js!c:AppServ{$PROJECTNAME}appsstaticsscsscomponentsearear-all-header.css:350:12)
at Module._compile (c:AppServ{$PROJECTNAME}
ode_modulesv8-compile-cachev8-compile-cache.js:192:30)
at evalModuleCode (c:AppServ{$PROJECTNAME}
ode_modulesmini-css-extract-plugindistutils.js:41:10)
at c:AppServ{$PROJECTNAME}
ode_modulesmini-css-extract-plugindistloader.js:178:57
at c:AppServ{$PROJECTNAME}
ode_moduleswebpacklibCompiler.js:513:11
at c:AppServ{$PROJECTNAME}
ode_moduleswebpacklibCompiler.js:1065:17
at Hook.eval [as callAsync] (eval at create (c:AppServ{$PROJECTNAME}
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:4:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (c:AppServ{$PROJECTNAME}
ode_modulesapablelibHook.js:18:14)
at c:AppServ{$PROJECTNAME}
ode_moduleswebpacklibCompiler.js:1061:33
at c:AppServ{$PROJECTNAME}
ode_moduleswebpacklibCompilation.js:2413:11
at Hook.eval [as callAsync] (eval at create (c:AppServ{$PROJECTNAME}
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:4:1)
@ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-1[0].rules[0].use!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/header.vue?vue&type=script&lang=js& 30:0-50
@ ./src/components/header.vue?vue&type=script&lang=js& 1:0-199 1:215-218 1:220-416 1:220-416
@ ./src/components/header.vue 2:0-58 3:0-53 3:0-53 9:2-8
@ ./src/applications/bearworks/bearworks-index.js 3:0-52
webpack 5.20.2 compiled with 1 error in 2096 ms
c:AppServ{$PROJECTNAME}>
question from:
https://stackoverflow.com/questions/66058517/webpack-minicssextractplugin-referenceerror-window-is-not-defined 
