Having around 20 vulnerabilities in my current package.json I decided to begin upgrading them.
After an npm audit fix --force webpack (& laravel mix) has been updated from 2.x to 4.x.
I am running a React webapp with CSS modules (react-css-modules) and also use the ExtractTextPlugin. However, both ExtractTextPlugin and react-css-modules seem to be deprecated.
My current webpack.mix.js (this all worked fine on webpack 2):
'use strict';
let mix = require('laravel-mix');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let LiveReloadPlugin = require('webpack-livereload-plugin');
let path = require('path');
const backendExtract = new ExtractTextPlugin("css/backend/app.min.css");
mix.react('resources/assets/backend/js/app.js', 'public/dashboard_assets/js')
.sass('resources/assets/frontend/sass/core.scss', 'css/frontend.min.css')
.sass('resources/assets/backend/sass/custom.scss', 'css/backend/custom.min.css')
.webpackConfig({
module: {
"rules": [
{
"test": /\.css$/,
"loader": backendExtract.extract({
"fallback": "style-loader",
"use": "css-loader?modules=true&localIdentName=[name]__[local]--[hash:base64:6]&minimize=true"
})
}
]
},
"plugins": [
backendExtract,
new LiveReloadPlugin()
]
});
Dependencies in my package.json
"devDependencies": {
"@babel/preset-react": "^7.0.0",
"babel-preset-react": "^6.23.0",
"bootstrap": "^4.1.3",
"cross-env": "^5.2.0",
"laravel-mix": "^2.1.14",
"lodash": "^4.17.11",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"webpack-livereload-plugin": "^1.2.0"
},
"dependencies": {
"axios": "^0.17.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"imagemin": "^6.0.0",
"jquery": "^3.2",
"js-cookie": "^2.2.0",
"popper.js": "^1.14.6",
"prettysize": "^2.0.0",
"react": "^16.6.3",
"react-dom": "^16.2.0",
"react-css-modules": "^4.7.8",
"react-redux": "^5.1.1",
"react-router-dom": "^4.3.1",
"react-scroll": "^1.7.11",
"react-select-country-list": "^1.0.7",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"style-loader": "^0.20.3"
}
Since extract-text-webpack-plugin is not compatible with webpack 4 I decided to replace it with mini-css-extract-plugin. However now I keep getting this error:
Error: Rule can only have one result source (provided use and loaders) in {
"test": {},
"loaders": [
"style-loader",
{
"loader": "css-loader",
"options": {
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"plugins": [
null,
null,
null
]
}
}
],
"use": [
"style-loader",
{
"loader": "/path-to-project/node_modules/mini-css-extract-plugin/dist/loader.js",
"options": {
"hmr": true
}
},
{
"loader": "css-loader",
"options": {
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"plugins": [
null,
null,
null
]
}
}
]
}
at checkUseSource (/path-to-project/node_modules/webpack/lib/RuleSet.js:149:11)
at Function.normalizeRule (/path-to-project/node_modules/webpack/lib/RuleSet.js:287:4)
at rules.map (/path-to-project/node_modules/webpack/lib/RuleSet.js:110:20)
at Array.map (<anonymous>)
at Function.normalizeRules (/path-to-project/node_modules/webpack/lib/RuleSet.js:109:17)
at new RuleSet (/path-to-project/node_modules/webpack/lib/RuleSet.js:104:24)
at VueLoaderPlugin.apply (/path-to-project/node_modules/vue-loader/lib/plugin.js:35:23)
at webpack (/path-to-project/node_modules/webpack/lib/webpack.js:47:13)
at processOptions (/path-to-project/node_modules/webpack-cli/bin/cli.js:256:16)
at yargs.parse (/path-to-project/node_modules/webpack-cli/bin/cli.js:366:3)
at Object.parse (/path-to-project/node_modules/yargs/yargs.js:567:18)
at /path-to-project/node_modules/webpack-cli/bin/cli.js:49:8
at Object.<anonymous> (/path-to-project/node_modules/webpack-cli/bin/cli.js:368:3)
at Module._compile (internal/modules/cjs/loader.js:738:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
at Module.load (internal/modules/cjs/loader.js:630:32)
at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
at Function.Module._load (internal/modules/cjs/loader.js:562:3)
at Module.require (internal/modules/cjs/loader.js:667:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/path-to-project/node_modules/webpack/bin/webpack.js:156:2)
at Module._compile (internal/modules/cjs/loader.js:738:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
at Module.load (internal/modules/cjs/loader.js:630:32)
at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
at Function.Module._load (internal/modules/cjs/loader.js:562:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:801:12)
at internal/main/run_main_module.js:21:11
Having the following in my webpack.mix.js:
'use strict';
let mix = require('laravel-mix');
let LiveReloadPlugin = require('webpack-livereload-plugin');
let path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
mix.react('resources/assets/backend/js/app.js', 'public/dashboard_assets/js')
.sass('resources/assets/frontend/sass/core.scss', 'css/frontend.min.css')
.sass('resources/assets/backend/sass/custom.scss', 'css/backend/custom.min.css')
.webpackConfig({
module: {
"rules": [
{
"test": /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new LiveReloadPlugin()
]
});
I have tried many variations, but either I keep getting errors, or the CSS in the react components is not being extracted.
How can I simply replace the extract-text-webpack-plugin package with the mini-css-extract-plugin package? I try to keep using laravel-mix, but if that's what causing the issue I'd rather go without.
