Develop Reference

Migrating from Webpack v4 to v5. Styling not picked up

I've migrated Webpack to v5 in my React project and none of my .scss files are picked up when I run it
I've followed this guide on migrating webpack https://webpack.js.org/migrate/5/ updated all plugins and loaders (all of them are MAJOR updates) that I use in development mode, updated configuration file to accommodate new versions but none of the styles are applied
My package.json:
"devDependencies": {
...
"clean-webpack-plugin": "^4.0.0",
"compression-webpack-plugin": "^10.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
...
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^6.2.6",
"html-webpack-plugin": "^5.5.0",
...
"mini-css-extract-plugin": "^2.6.1",
...
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"react-hot-loader": "^4.13.0",
"sass-loader": "^13.1.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.6",
"ts-loader": "^9.4.1",
"webpack": "^5.74.0",
"webpack-bundle-analyzer": "^4.6.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
"sideEffects": [
"*.css",
"*.scss"
]
}
My webpack.config.json:
module.exports = {
mode: 'development',
entry: './src/index.tsx',
output: {
publicPath: '/',
path: outPath,
filename: 'bundle.js',
globalObject: 'this'
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: [
/(node_modules)/,
/\.test.tsx?$/,
/\.spec.tsx?$/
],
use: [
{loader: 'react-hot-loader/webpack'},
{
loader: 'ts-loader',
options: {
transpileOnly: true,
allowTsInNodeModules: false,
onlyCompileBundledFiles: true
}
}
]
},
{
test: /\.(css|scss)$/,
use: [
{loader: 'style-loader'},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
}
]
}
]
}
};
This is how I import styles in my modules:
const styles = require('./index.scss')
<div className={styles['some-class']}>
When I was on previous webpack version everything worked fine, but as soon as I upgraded webpack and all the webpack related packages, styling is no longer applied.
Any help is highly appreciated

Since you're using require and not import, you have to specify default:
const styles = require('./index.scss').default;

Javascript es6 class is not defined

After building my project it gives me this error but in the console of chrome it gives me the following error. Could someone help me? I have no idea what causes this. It feels like im using export and class in a wrong way.
Node version: v11.6.0
Npm version: 4.6.1
webpack.config.js
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
module.exports = {
entry:
{
widget: ['./src/js/widget/v1/widget.js', './src/sass/widget/widget.scss'],
website: ['./src/sass/website/website.scss', './src/js/website/website.js']
},
output: {
path: path.resolve(__dirname, 'static'),
filename: '[name]/[name].js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
enforce: 'pre',
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
},
},
{
test: /\.(css|scss)$/,
loaders: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader?minimize!sass-loader'],
}),
},
{
test: /\.(scss)$/,
loader: "sass-loader", // compiles Sass to CSS
options: {
data: "$HOST-URL: '" + "localhost:8000" + "';"
}
},
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/font-woff' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/font-woff' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/octet-stream' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
],
},
stats: {
colors: true,
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
HOST_URL: "localhost:8000"
}),
new CopyWebpackPlugin([
{ from: './node_modules/font-awesome/fonts/', to: './assets/fonts/' },
{ from: './src/widget/', to: './widget/' },
{ from: './src/website/', to: './website/' },
]),
new StyleLintPlugin(),
new ExtractTextPlugin({
filename: '[name]/css/[name].css',
allChunks: true,
}),
new UglifyJSPlugin(),
],
};
package.json
{
"name": "name",
"version": "0.0.1",
"main": "index.js",
"author": "author",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.26.3",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.4.0",
"babel-preset-es2015": "^6.22.0",
"css-loader": "^0.26.4",
"eslint": "^3.17.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-loader": "^1.6.3",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.0",
"file-loader": "^0.10.1",
"http-server": "^0.11.1",
"node-sass": "^4.9.2",
"postcss-loader": "^1.3.3",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"stylelint-config-standard": "^16.0.0",
"stylelint-webpack-plugin": "^0.7.0",
"uglifyjs-webpack-plugin": "^0.3.0",
"webpack": "^2.7.0",
"webpack-shell-plugin": "^0.5.0"
},
"scripts": {
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
"webpack": "webpack",
"watch": "webpack --watch"
},
"dependencies": {
"bootstrap": "^4.0.0",
"bootstrap-datepicker": "^1.6.4",
"bootstrap-sass": "^3.3.7",
"copy-webpack-plugin": "^4.5.2",
"extract-text-webpack-plugin": "^2.1.0",
"font-awesome": "^4.7.0",
"formdata-polyfill": "^3.0.9",
"jquery": "^3.2.1",
"popper.js": "^1.12.9"
}
}
widget.js
import Video from './video';
import Overlay from './overlay';
class Widget {
...
}
export {Widget as default}
window.Widget = Widget;
Video and Overlay are also classes and exported the same way as the Widget class. Before this, it was declares as
export default class Widget{}
The code where I am trying to access Widget is in the index.html, where I create a new Widget inside the script tag.
index.html
<script type="text/javascript">
var widget = new Widget({
});
widget.render();
</script>

[webpack2]Style not loaded(.css/.less)

I'm currently working on a webpack2 + react + antd-mobile application, everything's working except styles not loaded(.css/.less). I can't really find the problem, there are no error printed on the console.
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
// antd-mobile SVG配置方式
const svgDirs = [
require.resolve('antd-mobile').replace(/warn\.js$/, ''),
path.resolve(__dirname, 'src/assets/svg'),
];
module.exports = {
devtool: 'source-map',
context: path.join(__dirname, 'src'),
entry: './index',
output: {
filename: '[hash].js',
},
resolve: {
modules: ['node_modules', path.join(__dirname, 'src')],
extensions: ['.web.js', '.js', '.json', '.less', '.css'],
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.(css|less)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'less-loader'],
}),
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.(svg)$/i,
use: 'svg-sprite-loader',
include: svgDirs,
},
],
},
plugins: [
new ExtractTextPlugin('main.css'),
new HtmlWebpackPlugin({
template: 'index.html',
hash: true,
}),
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV === 'development' || 'true')),
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: () => {
return [
pxtorem({ rootValue: 100, propWhiteList: [] }),
autoprefixer,
];
},
},
}),
],
};
I can import less in but style is not loaded and no error output shown on the console;
import styles from './styles/AssetItem.less';
package.json
{
"private": true,
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --hot --port 8000",
"build": "webpack -p --progress --colors",
"lint": "eslint --ext .js src test"
},
"dependencies": {
"antd-mobile": "^1.1.0",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-native": "0.42.3",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-redux": "^4.0.8",
"redux": "^3.6.0",
"redux-saga": "^0.14.8",
"regenerator-runtime": "^0.10.3"
},
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.0.0",
"babel-plugin-import": "^1.1.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cross-env": "^4.0.0",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"extract-text-webpack-plugin": "^2.1.0",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"postcss": "^5.2.17",
"postcss-loader": "^1.3.3",
"postcss-pxtorem": "^4.0.0",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.6",
"style-loader": "^0.16.1",
"svg-sprite-loader": "^0.3.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.5"
}
}

I don't know if it can help you but there my part to resolve css file with webpack2
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: false
}
}
]
},

this should work:
module: {
rules: [
{
test: /.js$/,
use: [
{ loader: 'babel-loader' }
],
},
{
test: /(\.css|\.less)$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: "css-loader!less-loader",
}),
},
],
},
plugins: [
new ExtractTextPlugin('main.css'),
],

I think, the problem is that you forgot about new ExtractTextPlugin syntax, more information you can read here: https://webpack.js.org/guides/migrating/#extracttextplugin-extract
plugins: [
new ExtractTextPlugin({
filename: "main.css"
})
You should add path for output files
output: {
filename: '[hash].js',
path: path.resolve(__dirname, 'public'),
},

Webpack does not look for changes in SCSS

I'm trying to make the css and js in one big main.js but it is now listen for this changes I can't see the error, the terminal does not show error works fine for react. the webpack version that I'm using is 1.13.1. here is the list of my dependencies:
"devDependencies": {
"babel-cli": "^6.14.0",
"babel-core": "^6.14.0",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-2": "^6.13.0",
"css-loader": "^0.25.0",
"eslint": "^3.5.0",
"eslint-config-airbnb": "^11.1.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-import": "^1.15.0",
"eslint-plugin-jsx-a11y": "^2.2.2",
"eslint-plugin-react": "^6.3.0",
"node-sass": "^3.10.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1"
}, "dependencies": {
"electron": "^1.4.1",
"electron-prebuilt": "^1.4.1",
"fs": "0.0.1-security",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"redux": "^3.6.0",
"redux-form": "^6.0.5",
"redux-promise": "^0.5.3",
"webpack": "^1.13.1"
}
and my file structure is:
src
app
components
style
app.jsx
And here is my web pack file:
const path = require("path");
const webpack = require("webpack");
module.exports = {
context: path.resolve("src/app/"),
entry: "./app.jsx",
output: {
path: path.resolve("src/"),
publicPath: "src/",
filename: "main.js"
},
devServer: {
contentBase: "./"
},
module: {
preLoaders: [
{
test: /(\.jsx$|\.js$)/,
exclude: /node_modules/,
loader: "eslint-loader"
}
],
loaders: [
{
test: /(\.jsx$|\.js$)/,
exclude: /node_modules/,
loaders: ["babel-loader"]
}, {
test: /\.scss$/,
exclude: /node_modules/,
loader: "style-loader!css-loader!sass-loader"
}
]
},
eslint: {
configFile: ".eslintrc"
},
resolve: {
extensions: [
"", ".js", ".jsx"
]
},
watch: true,
devtool: "inline-source-map"
};

I believe you have installed the necessary loaders. If not,
npm install --save-dev sass-loader css-loader style-loader
then,
loaders: [
// ...
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
then require your scss file in your js file:
require('../sass/mystyle.scss');

Can't export reducer with Babel

This is most likely some typo but I've been trying to fix it for the last hour and came up with nothing.
I have a file called app/reducers/index.js:
export viewportSize from "./viewportSize";
app/reducers/viewportSize.js is simply:
export default function viewportSize (state = {}) {
return state;
}
And in app/app.js I do:
import reducers from "./reducers";
Babel is giving me back this error
ERROR in ./app/reducers/index.js
1:8 error Parsing error: Unexpected token viewportSize
I have other import and export in the project but this one doesn't want to work.
This is my .babelrc file:
{
"presets": ["es2015", "react", "stage-2"]
}
Update
These are my dependencies
"devDependencies": {
"babel-core": "6.5.2",
"babel-loader": "6.2.3",
"babel-preset-es2015": "6.5.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-2": "6.5.0",
"eslint": "2.2.0",
"eslint-loader": "1.3.0",
"eslint-plugin-react": "4.1.0",
"file-loader": "0.8.5",
"react-hot-loader": "1.3.0",
"webpack": "1.12.14",
"webpack-dev-server": "1.14.1"
},
"dependencies": {
"babel-preset-stage-0": "6.5.0",
"immutable": "3.7.6",
"react": "0.14.7",
"react-dom": "0.14.7",
"react-redux": "4.4.0",
"react-router": "2.0.0",
"react-router-redux": "4.0.0",
"redux": "3.3.1"
}
Update
This is my webpack config file
var webpack = require("webpack");
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./app.js",
html: "./index.html",
css: "./style.css",
},
output: {
filename: "app.js",
path: __dirname + "/dist",
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
include: __dirname,
loaders: ["react-hot", "babel-loader", "eslint-loader"],
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
},
{
test: /\.css$/,
loader: "file?name=[name].[ext]",
},
],
},
};