We Keep Coding

Babel Errors in Webpack Configs after Updating Webpack

I am trying to update Webpack to a newer versions (by removing node_modules then running yarn), but I am not able to solve all the config errors shown below.
So far in the Webpack config, I have changed query to options, and loaders to rules. In package.json, I have replaced --colors with --color.
Original webpack.config.js [Source]:
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
entry: {
background: path.join(__dirname, './src/background'),
entry: path.join(__dirname, './src/entry'),
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js',
},
plugins: [
new CopyWebpackPlugin([
{ from: 'src/manifest.json' },
{ from: 'images/**/*' }
]),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
],
resolve: {
extensions: ['.js']
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
},
exclude: /node_modules/
}]
}
}
Current webpack.config.js:
const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
entry: {
background: path.join(__dirname, "./src/background"),
entry: path.join(__dirname, "./src/entry"),
},
output: {
path: path.join(__dirname, "./dist"),
filename: "[name].js",
},
plugins: [
new CopyWebpackPlugin([
{ from: "src/manifest.json" },
{ from: "images/**/*" },
]),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production"),
},
}),
],
resolve: {
extensions: [".js"],
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
options: {
presets: ["react", "es2015", "stage-0"],
},
exclude: /node_modules/,
},
],
},
};
Still many of the following errors...
ERROR in ./src/background.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'babel' of undefined
at Object.module.exports (/home/gameveloster/sidebar/node_modules/babel-loader/lib/index.js:103:36)
but there's no babel in the files stated in the errors, like ./src/background.js.
What is the correct way to fix this issue? Thanks!
package.json:
{
"name": "sidebar",
"private": true,
"version": "0.1.0",
"main": "dist/entry.js",
"license": "UNLICENSED",
"scripts": {
"build": "webpack --progress --profile --color",
"watch": "webpack --watch --progress --color",
"dev": "npm run watch"
},
"dependencies": {
"chrome-sidebar": "file:../chrome-sidebar",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "6.24.0",
"babel-eslint": "^7.2.3",
"babel-generator": "6.24.0",
"babel-loader": "6.4.1",
"babel-plugin-module-resolver": "2.6.2",
"babel-plugin-react-require": "3.0.0",
"babel-plugin-transform-class-properties": "6.22.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.24.0",
"babel-plugin-transform-object-rest-spread": "6.22.0",
"babel-plugin-transform-react-jsx-source": "6.22.0",
"babel-plugin-transform-react-remove-prop-types": "0.3.3",
"babel-plugin-transform-runtime": "6.22.0",
"babel-preset-env": "^1.4.0",
"babel-preset-latest": "6.24.0",
"babel-preset-node6-es6": "^11.2.5",
"babel-preset-react": "6.23.0",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "6.23.0",
"copy-webpack-plugin": "^4.0.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
}
}

Uncaught ReferenceError: regeneratorRuntime when using Sync/Await

I'm getting the following error when using Async/Await for functions:
Uncaught ReferenceError: regeneratorRuntime
Seems to be a common problem but I've tried a couple of solutions I found on stackoverflow to no avail, I've now ended up with a huge list of babel dependencies. :) I'm very confused about all this, could someone spot what's wrong with my babel/webpack files?
Thank you
Package.json (relevant dependencies only)
"devDependencies": {
"#babel/plugin-transform-runtime": "^7.12.1",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.6",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.44.2",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"#babel/runtime": "^7.12.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"webpack-cli": "^3.3.7"
}
.babelrc
{
"presets": [
"react",
[
"env"
]
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
webpack.config.js
const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
entry: ["./src/index"],
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/"
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.js$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /\.(jpe?g|png|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 20000
}
},
"image-webpack-loader"
]
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
]
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.html',
inject: true,
filename: 'index.html'
}),
],
devServer: {
historyApiFallback: true,
}
};
module.exports = config;

I took the config files you've provided and did a small test - https://codesandbox.io/s/async-await-webpack-ljv7h?file=/src/App.js I don't see anything wrong with it. I was able to use async/await just fine. May be try a clean up and reinstall - rm package-lock.json && rm -rm node_modules && npm install and see if that fixes your issue.

you forgot to add the plugin
.babelrc
"plugins": ["#babel/plugin-transform-runtime"]
in my case I always do this:
npm install -D babel-loader #babel/core #babel/preset-env webpack webpack-cli
I also suggest you use:
.babelrc
"presets": ["#babel/preset-env"]
and if you are using react you may also need preset "#babel/preset-react"
"presets": [
"#babel/preset-react",
"#babel/preset-env"
]

Webpack production mode does not minify js file

I created react app with by initializing webpack with npm init -y and then modified scripts and webpack config file manually. My file's contents are as below:
package.json
{
"name": "arw.ecahangirov",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
"build": "webpack --mode production ./frontend/src/index.js --output ./static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"uglifyjs-webpack-plugin": "^2.2.0",
"weak-key": "^1.0.1",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"axios": "^0.19.0",
"materialize-css": "^1.0.0-rc.2",
"moment": "^2.24.0",
"style-loader": "^1.0.0"
}
}
webpack.config.js
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: {
extensions: [".js", ".jsx", ".css"]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
include: /\.js$/
})
]
}
};
Problem is that, when I run npm run build, webpack does not minify main.js file which is output. It results with 716kb file size and by opening output file I observe that file is multilined and also contains comments. Why webpack does not care of minifiying in this case, although I started it with --mode production?

You have to specify a minifier for css.
Load this at top of your webpack config file
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
To the rules block:
rules: [
//...
{
test: /\.(sa|sc|c)ss$/,
use: [{loader: MiniCssExtractPlugin.loader},
'css-loader',
'postcss-loader',
'sass-loader',
],
},
//...
]
To the optimization block:
optimization: {
minimizer: new OptimizeCSSAssetsPlugin({})
}
To the plugins block:
plugins: [
//...
new MiniCssExtractPlugin({
filename: [name].[hash].css',
chunkFilename: '[id].[hash].css',
}),
//...
]
You will need to load that plugins first
npm install --save-dev mini-css-extract-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
You can find a working config here

webpack4 css bundling not working for custom style names

I'm working on a making my own boilerplate for React using Webpack4 and have run the issue of my css file being bundled and not rendering specific custom styles. As you can see I am using the sass-loader compile all my .sass/scss files together and postcss-loader to autoprefixing, css-loader to load the compiled css files, MiniCssExtractPlugin.loader extracts CSS into separate files, and finally style-loader to inject my css. It does all this correctly buy doesn't seem to actually apply the styles. Could anybody explain why this occurs?
The repo can be found
here
webpack.config.js
/* Required Packages */
const webpack = require('webpack')
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
//entry to bundled js file
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js' //output filename
},
//want to use the src/index.js file as entry point to bundle all of its imported files
module:{
rules:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader','sass-loader'],
exclude: ["node_modules"]
}
]
},
//webpack server hot module replacement
plugins: [
new CleanWebpackPlugin('dist', {}),
new MiniCssExtractPlugin({
filename: 'style.[hash].css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash(),
new webpack.HotModuleReplacementPlugin()
],
resolve: {
extensions: ['*', '.js', '.jsx'] //array of extensions to compile js
},
devServer: {
contentBase: './dist',
hot: true
}
}
package.json
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development --config ./webpack.config.js --open --hot --history-api-fallback"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Nickadiemus/ns-react-boilerplate.git"
},
"author": "Nick Sladic",
"license": "MIT",
"bugs": {
"url": "https://github.com/Nickadiemus/ns-react-boilerplate/issues"
},
"homepage": "https://github.com/Nickadiemus/ns-react-boilerplate#readme",
"devDependencies": {
"autoprefixer": "^8.6.5",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.9.2",
"postcss-loader": "^2.1.6",
"react-hot-loader": "^4.3.3",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-md5-hash": "0.0.6"
},
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1"
}
}

Use either 'style-loader' or MiniCssExtractPlugin.loader, not both:
const devMode = process.env.NODE_ENV !== 'production';
...
{
test: /\.scss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
],
exclude: ["node_modules"]
}
Source: mini-css-extract-plugin docs

How to properly load .eot and .woff files with Babel?

Trying to run my project and getting the following error (You may need an appropriate loader to handle this file type.) for .eot, .woff, .ttf, and .svg files:
ERROR in ./src/styles/fonts/nm/icons/nm-icons.svg?aaf8685e87a6901c76c52d0018389547
Module parse failed: C:\BaseProject\src\styles\fonts\nm\icons\nm-icons.svg?aaf8685e87a6901c76c52d0018389547 Unexpected t
oken (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
at Parser.pp$4.raise (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseExprAtom (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExpression (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:1573:21)
at Parser.pp$1.parseStatement (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:727:47)
at Parser.pp$1.parseTopLevel (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:638:25)
at Parser.parse (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:516:17)
at Object.parse (C:\BaseProject\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39)
at Parser.parse (C:\BaseProject\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (C:\BaseProject\node_modules\webpack\lib\NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (C:\BaseProject\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
# ./~/css-loader?sourceMap!./src/styles/main.min.css 6:42409-42482
There are three other errors like the above for the other file types.
Here are my files:
webpack.config.dev.js:
import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
export default {
debug: true,
devtool: 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
noInfo: true, // set to false to see a list of every file being bundled.
entry: [
'webpack-hot-middleware/client?reload=true',
'babel-polyfill',
'./src/index'
],
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: `${__dirname}/src`, // Note: Physical files are only output by the production build task `npm run build`.
publicPath: 'http://localhost:3000/', // Use absolute paths to avoid the way that URLs are resolved by Chrome when they're parsed from a dynamically loaded CSS blob. Note: Only necessary in Dev.
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
__DEV__: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
template: 'src/index.ejs',
minify: {
removeComments: true,
collapseWhitespace: true
},
inject: true
})
],
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'},
{test: /\.(jpe?g|png|gif)$/i, loaders: ['file']},
{test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
{test: /\.css$/, loaders: ['style', 'css?sourceMap']},
{test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},
{test: /\.less$/, loaders: ['style', 'css?sourceMap', 'less?sourceMap']}
]
}
};
.babelrc:
{
"presets": [
"es2015",
"react",
"stage-1"
],
"env": {
"development": {
"presets": [
"react-hmre"
]
}
}
}
package.json: (removed some irrelevant dependencies)
{
"name": "project",
"version": "0.1.0",
"description": "",
"engines": {
"npm": ">=3"
},
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm-run-all --parallel start-message remove-dist",
"start": "npm-run-all --parallel test:watch open:src lint:watch",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && npm run open:dist",
"open:cover": "npm run test:cover && open coverage/index.html"
},
"devDependencies": {
"babel-cli": "6.10.1",
"babel-core": "6.10.4",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-polyfill": "6.13.0",
"babel-preset-es2015": "6.9.0",
"babel-preset-react": "6.11.1",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-1": "6.5.0",
"babel-register": "6.9.0",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.22.0",
"less": "2.7.1",
"less-loader": "2.2.3",
"node-sass": "3.8.0",
"npm-run-all": "2.3.0",
"open": "0.0.5",
"replace": "0.3.0",
"sass-loader": "4.0.0",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.1",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.12.1",
}
}
Any ideas?

Found the solution - I replaced my eot, woff, ttf, and svg loaders with the following line:
{test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: "file-loader"}

Your configured test expressions don't match the resources you're trying to load. Try with something simpler:
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
{test: /\.eot(\?[0-9a-z\-=]+)?$/, loader: 'file'},
{test: /\.woff(2)(\?[0-9a-z\-=]+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?[0-9a-z\-=]+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?[0-9a-z\-=]+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'},
{test: /\.(jpe?g|png|gif)$/i, loaders: ['file']},
{test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
{test: /\.css$/, loaders: ['style', 'css?sourceMap']},
{test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},
{test: /\.less$/, loaders: ['style', 'css?sourceMap', 'less?sourceMap']}
]