Issue 1:
Bug report

What is the current behavior?

Webpack builds have started failing in our automated deployments as of the 5.45.0 release a few hours ago

If the current behavior is a bug, please provide the steps to reproduce.

In our project. ag-grid-community and GraphQL dependencies fail to compile (stack trace and webpack config file below).

Our project is closed source unfortunately but here is what I suspect are repro steps:

Initialize an NPM project. Install ag-grid-community and/or GraphQL

Add an index.js which depends on these files in a way that requires them to be packed

execute webpack

What is the expected behavior?

Webpack should pack the files without error similar to the behavior of 5.44.0

Other relevant information:

webpack version: 5.45.0

Node.js version: 12.18.1

Operating System: MACOS/Linux/Windows all reproduce

Additional tools: Terser Plugin, Preamble Plugin

Webpack Config: https://github.com/pdemro/webpack-config-5.45.0-suspected-bug/blob/main/webpack.config.js

Stack Trace:

Entrypoint index 3.99 MiB = runtime-bundle.js 7.57 KiB vendor-bundle.js 2.14 MiB index-bundle.js 1.84 MiB
runtime modules 3.63 KiB 8 modules
modules by path ./src/ 1.43 MiB
javascript modules 1.31 MiB 319 modules
json modules 55.4 KiB 13 modules
asset modules 64.5 KiB
modules by path ./src/images/*.png 16.6 KiB 8 modules
3 modules
modules by path ./node_modules/ 4.17 MiB
modules by path ./node_modules/graphql/ 41.3 KiB 9 modules
modules by path ./node_modules/highcharts/ 346 KiB 7 modules
modules by path ./node_modules/graphql-request/ 16.6 KiB 4 modules
modules by path ./node_modules/extract-files/public/*.js 2.06 KiB 4 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 2.38 KiB
./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/getUrl.js 830 bytes [built] [code generated]

ERROR in ./node_modules/ag-grid-community/dist/ag-grid-community.cjs.js 1530:19
Module parse failed: Unexpected token (1530:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| modules.forEach(function (module) { return ModuleRegistry.register(module, moduleBased); });
| };
> ModuleRegistry.assertRegistered = function (moduleName, reason) {
| if (this.isRegistered(moduleName)) {
| return true;
@ ./src/components/agGridPopout/ag-grid-popout.ts 16:28-56
@ ./src/ sync (^.?|\.[^d]|[^.]d|[^.][^d])\.(j|t)sx?$ ./components/agGridPopout/ag-grid-popout.ts
@ ./src/index.ts 5:12-81

ERROR in ./node_modules/graphql/index.mjs 38:2
Module parse failed: Unexpected token (38:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| , SchemaMetaFieldDef, TypeMetaFieldDef, TypeNameMetaFieldDef // Predicates
| , isSchema, isDirective, isType, isScalarType, isObjectType, isInterfaceType, isUnionType, isEnumType, isInputObjectType, isListType, isNonNullType, isInputType, isOutputType, isLeafType, isCompositeType, isAbstractType, isWrappingType, isNullableType, isNamedType, isRequiredArgument, isRequiredInputField, isSpecifiedScalarType, isIntrospectionType, isSpecifiedDirective // Assertions
> , assertSchema, assertDirective, assertType, assertScalarType, assertObjectType, assertInterfaceType, assertUnionType, assertEnumType, assertInputObjectType, assertListType, assertNonNullType, assertInputType, assertOutputType, assertLeafType, assertCompositeType, assertAbstractType, assertWrappingType, assertNullableType, assertNamedType // Un-modifiers
| , getNullableType, getNamedType // Validate GraphQL schema.
| , validateSchema, assertValidSchema } from "./type/index.mjs";
@ ./node_modules/graphql-tag/lib/index.js 2:0-32 65:21-26
@ ./src/generated/graphql.ts 7:38-60
@ ./src/ sync (^.?|\.[^d]|[^.]d|[^.][^d])\.(j|t)sx?$ ./generated/graphql.ts
@ ./src/index.ts 5:12-81

webpack 5.45.0 compiled with 2 errors in 31329 ms

Issue 2:
Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

Hello,

When I build with NODE_ENV=production, React-Router does not render any routes. Otherwise, I works in developpment.

build script

"build": "rm -rf ./dist && NODE_ENV=production webpack --config build/webpack.config.js -p"

.babel-rc

{
"presets": [
["@babel/preset-env", {
"modules": false,
"targets": {
"browsers": ["last 2 versions"]
},
"development": {
"plugins": [
"babel-plugin-styled-components"
]
},
"production": {
"plugins": [
"babel-plugin-styled-components"
]
},
"exclude": ["transform-regenerator", "transform-async-to-generator"]
}]
],
"plugins": [
["@babel/plugin-transform-react-jsx", {"pragma": "h"}],
["@babel/plugin-proposal-object-rest-spread"],
["transform-react-remove-prop-types"],
["babel-plugin-styled-components"],
["syntax-dynamic-import"],
["module:fast-async", {
"compiler": {
"promises": true,
"generators": false
},
"runtimePattern": "home.js",
"spec": true
}]
]
}

webpack.config.js

const config = require('../config.js');
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const TidyHtmlWebpackPlugin = require('tidy-html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const { InjectManifest } = require('workbox-webpack-plugin');
const autoprefixer = require('autoprefixer');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const production = process.env.NODE_ENV === 'production';

const sw = path.join(__dirname, '../src/sw.js');
const plugins = [
new MiniCSSExtractPlugin({
filename: '[name].[contenthash].css'
}),
ProgressBarPlugin()
];

const devServer = {
contentBase: config.contentBase,
hot: true,
hotOnly: true,
historyApiFallback: true,
port: config.port.front,
compress: production,
inline: !production,
hot: !production,
stats: {
assets: true,
children: false,
chunks: false,
hash: true,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true
}
}

if (production) {
plugins.push(
new webpack.optimize.OccurrenceOrderPlugin(),
new htmlWebpackPlugin({
template: config.template,
minify: {
removeComments: true
},
//cache: true,
// make it work consistently with multiple chunks
chunksSortMode: 'dependency'
}),
// preload main bundles
// prefetch should be done with webpack
// when native support for prefetch will land
new PreloadWebpackPlugin({
rel: 'preload',
include: 'initial'
}),
// new TidyHtmlWebpackPlugin(),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../src/assets/'),
to: path.resolve(__dirname, '../dist/assets/')
},
{
from: path.resolve(__dirname, '../src/manifest.json'),
to: path.resolve(__dirname, '../dist/manifest.json')
},
{
from: path.resolve(__dirname, '../src/third_party/idb-keyval.min.js'),
to: path.resolve(__dirname, '../dist/third_party/idb-keyval.min.js')
}
]),
new InjectManifest({
swSrc: sw
})
);
} else {
plugins.push(
new webpack.HotModuleReplacementPlugin(), // hot reload
new htmlWebpackPlugin({ // generate index.html
template: config.template,
}),
new FriendlyErrorsPlugin()
);
};

const common = {
devtool: config.devtool,
mode: production ? 'production' : 'development',
// do not continue build if any errors
bail: true,
// watch mode
watch: !production,
entry: {
app: config.entry.front
},
output: {
path: path.resolve('dist'),
filename: production ? '[name].bundle.[hash].js' : '[name].bundle.js',
publicPath: '/'
},
resolve: {
extensions: ['.js', '.jsx', '.css', '.scss'],
alias: {
// in order to use css-transition-group
// you have to aliase react and react-dom
react: 'preact-compat',
'react-dom': 'preact-compat',
'react-addons-css-transition-group': 'preact-css-transition-group',
components: config.componentsPath,
routes: config.routesPath,
src: config.staticPath
}
},
module: {
rules: [{
test: /\.(css|scss)$/,
use: [
MiniCSSExtractPlugin.loader,
{
loader: 'css-loader', options: {minimize: true}
},
{
loader: 'sass-loader'
}
]
},{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: path.resolve(__dirname, "../src"),
loader: 'babel-loader'
},
{
test: /\.(.png|svg)$/,
// compress images
loader: 'image-webpack-loader',
// Ensure this loader run before svg-loader or url-loader
enforce: 'pre'
},
// {
// test: /\.svg$/,
// loader: 'svg-url-loader',
// options: {
// // Inline image smaller than 10kb
// limit: 10 * 1024,
// // remove quotes from url
// // https://developers.google.com/web/fundamentals/performance/webpack/decrease-frontend-size
// noquotes: true
// }
// },
{
test: /\.(png|svg)$/,
loader: production ? 'file-loader' : 'url-loader',
query: {
limit: 10 * 1024,
name: '[name]-[hash:7].[ext]'
}
}]
},
optimization: {
concatenateModules: production,
nodeEnv: process.env.NODE_ENV,
minimize: production,
// optimization.minimizer overrides default optimization
// in webpack 4.
// plugin optimizer should be put here
// not in plugins anymore as before
minimizer: [
// minify js
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false
}),
// Compress extracted CSS.
// Possible duplicated CSS from differents components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
})
],
runtimeChunk: true,
splitChunks: {
chunks: 'all'
}
},
performance: {
hints: production ? 'warning' : false
},
plugins,
devServer
};

module.exports = common;

What is the expected behavior?

As it works in dev, it should work in prod.

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.