We use webpack to bundle our resources before deployment. However, now we want to also bundle our sass files through webpack is it simplifies our build process. Now, we do have an issue where the MiniCssExtractPlugin claims that webpack_require is not defined.
We have no clue as to why this is happening but they underlying issue seems to be related to css-loader's code.
We have tried many things to resolve this issue (such as trying different versions, reinstalling the packages, checking for left-over global packages, etc. But none of these seemed to have any effect on the outcome.
Thanks for any help in advance.
error:
ERROR in ./css/theme.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: __webpack_require__(...) is not a function
at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:123:63)
at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4919:41)
at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4809:28)
at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
at ****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:85:18
at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:88:10)
at Module._compile (****project/_dev/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at exec (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:60:10)
at childCompiler.runAsChild (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:153:14)
at compile (****project/_dev/node_modules/webpack/lib/Compiler.js:343:11)
at hooks.afterCompile.callAsync.err (****project/_dev/node_modules/webpack/lib/Compiler.js:681:15)
at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
at compilation.seal.err (****project/_dev/node_modules/webpack/lib/Compiler.js:678:31)
at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
at hooks.optimizeAssets.callAsync.err (****project/_dev/node_modules/webpack/lib/Compilation.js:1423:35)
at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
at hooks.optimizeChunkAssets.callAsync.err (****project/_dev/node_modules/webpack/lib/Compilation.js:1414:32)
at _promise1.then._result1 (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
at process._tickCallback (internal/process/next_tick.js:68:7)
@ multi ./js/global.js ./css/theme.scss global[1]
webpack.config.js
const path = require('path');
const AssetsPlugin = require('assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const SriPlugin = require('webpack-subresource-integrity');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "production",
entry: {
runtime: ['./js/runtime.js', './css/inline.scss'],
vendor: ['./js/vendor.js']
},
output: {
path: path.resolve(__dirname, '../assets/js'),
filename: '[name].[contenthash].js',
crossOriginLoading: 'anonymous'
},
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
minChunks: 2
}
}
},
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
extractComments: '/@extract/i'
}),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', {discardComments: { removeAll: true } }],
}
})
]
},
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader'
}],
include: [
path.resolve('js'),
path.resolve('node_modules')
],
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
indentWidth: 4,
includePaths: ['css/*/'],
},
},
},
]
}
]
},
plugins: [
new SriPlugin({
hashFuncNames: ['sha256', 'sha384'],
enabled: true
}),
new AssetsPlugin({
filename: 'assets.json',
integrity: true,
prettyPrint: true,
path: path.resolve(__dirname, '../config')
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[name].[contenthash].css'
}),
new CleanWebpackPlugin(),
new FixStyleOnlyEntriesPlugin()
]
};
Package.json
{
"dependencies": {
"@babel/core": "7.6.4",
"@babel/polyfill": "^7.6.0",
"babel-loader": "8.0.6",
"core-js": "^3.3.2",
"css-loader": "^3.2.0",
"jquery": "^3.4.0",
"mini-css-extract-plugin": "^0.8.0",
"modernizr-webpack-plugin": "^1.0.7",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"path": "^0.12.7",
"postcss-loader": "^3.0.0",
"promise-polyfill": "^8.1.3",
"regenerator-runtime": "^0.13.3",
"sass": "^1.22.12",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"swiper": "^5.1.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-fix-style-only-entries": "^0.4.0",
"webpack-subresource-integrity": "^1.3.4",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/preset-env": "7.6.3",
"assets-webpack-plugin": "^3.9.10",
"clean-webpack-plugin": "^3.0.0"
}
}