Dynamic page loading failed for main.js

[knightswatch3]

The production mode of webpack build when served issues the error:

Uncaught (in promise) Error: Dynamic page loading failed: value@http://localhost:3000/main.js:2:171897

in the browser.

The development mode works just fine.

Could someone help me spotting the issue here ? What is wrong with my production webpack file here:

*BEGINS HERE

module.exports = Object.assign({}, baseClientConfig, {
mode: 'production',
optimization: {
splitChunks: {
chunks: 'async',
minSize: 2
}
},
resolve:{
fallback:{
"util": require.resolve("util/"),
"https": require.resolve("https-browserify"),
"http": require.resolve("stream-http"),
"buffer": require.resolve("buffer/")
}
},
entry: [...config.client.entry],
module: {
rules: [
...baseClientConfig.module.rules,
{
test: /.(scss|sass)$/,
use: [
{loader: MiniCssExtractPlugin.loader},
{
loader: "css-loader",
options: {
importLoaders: 1,
// localIdentName: "[path][name][local]--[hash:base64:8]",
}
},
{
loader: "resolve-url-loader"
},
{
loader: "postcss-loader",
options: {
postcssOptions:{
config: config.client.postcss
}
}
},
{
loader: "sass-loader",
options: {
implementation: require("node-sass"),
sassOptions:{
includePaths: config.client.sass_include_paths
}
}
},
{
loader: "import-glob"
}
]
},
{
test: /.less$/,
use: [
{loader: MiniCssExtractPlugin.loader},
{
loader: "css-loader",
options: {
importLoaders: 1,
// localIdentName: "[path][name][local]--[hash:base64:8]",
}
},
{
loader: "postcss-loader",
options: {
postcssOptions:{
config: config.client.postcss
}
}
},
{
loader: "less-loader",
options: {
strictMath: true,
noIeCompat: true
}
}
]
},
{
test: /.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{
loader: "css-loader",
options: {
importLoaders: 1,
// localIdentName: "[path][name]_[local]--[hash:base64:8]",
}
},
{
loader: "postcss-loader",
options: {
postcssOptions:{
config: config.client.postcss
}
}
}
]
}
]
},
devtool:"cheap-module-source-map",
plugins: [
// new webpack.optimize.ModuleConcatenationPlugin(),
...baseClientConfig.plugins,
new Dotenv(),
new webpack.EnvironmentPlugin({
AUTH_PROTOCOL: "HTTPS",
AUTH_SERVER_HOST: null,
AUTH_SERVER_PORT: null,
DEBUG: false,
DEV_TOOLS: false,
HOST: null,
NODE_ENV: "production",
PORT: null,
PROTOCOL: "HTTPS",
SERVER_HOST: null,
SERVER_PORT: null,
WS_SERVER_HOST: null,
WS_SERVER_PORT: null,
WS_PROTOCOL: "wss",
REACT_APP_BRANCH: JSON.stringify(process.env.REACT_APP_BRANCH) || JSON.stringify(dotenv.parsed['REACT_APP_BRANCH']),
REACT_APP_ENVIRONMENT: JSON.stringify(process.env.REACT_APP_ENVIRONMENT) || JSON.stringify(dotenv.parsed['REACT_APP_ENVIRONMENT']),
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: 'stylesheets/[name].css',
chunkFilename: '[id].css',
ignoreOrder: true, // Enable to remove warnings about conflicting order
}),
]
});

*ENDS HERE

[knightswatch3]

Here is my v3 of webpack configuration:

Which I am trying ti migrate to webpack5 compatible.

BEGINS HERE

module.exports = Object.assign({}, baseClientConfig, {
entry: [...config.client.entry],
devtool: "nosources-source-map",
module: {
rules: [
...baseClientConfig.module.rules,
{
test: /.(scss|sass)$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
importLoaders: 1,
// localIdentName: "[path][name][local]--[hash:base64:8]",
}
},
{
loader: "resolve-url-loader"
},
{
loader: "postcss-loader",
options: {
config: {
path: config.client.postcss
}
}
},
{
loader: "sass-loader",
options: {
includePaths: config.client.sass_include_paths
}
},
{
loader: "import-glob"
}
]
})
},
{
test: /.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
importLoaders: 1,
// localIdentName: "[path][name][local]--[hash:base64:8]",
}
},
{
loader: "postcss-loader",
options: {
config: {
path: config.client.postcss
}
}
},
{
loader: "less-loader",
options: {
strictMath: true,
noIeCompat: true
}
}
]
})
},
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
importLoaders: 1,
// localIdentName: "[path][name]_[local]--[hash:base64:8]",
}
},
{
loader: "postcss-loader",
options: {
config: {
path: config.client.postcss
}
}
}
]
})
}
]
},
plugins: [
// new webpack.optimize.ModuleConcatenationPlugin(),
...baseClientConfig.plugins,
new webpack.EnvironmentPlugin({
AUTH_PROTOCOL: "HTTPS",
AUTH_SERVER_HOST: null,
AUTH_SERVER_PORT: null,
DEBUG: false,
DEV_TOOLS: false,
HOST: null,
NODE_ENV: "production",
PORT: null,
PROTOCOL: "HTTPS",
SERVER_HOST: null,
SERVER_PORT: null,
WS_SERVER_HOST: null,
WS_SERVER_PORT: null,
WS_PROTOCOL: "wss"
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new ExtractTextPlugin({
filename: "stylesheets/[name].css",
disable: false,
allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin({
async: true,
children: true,
minChunks: 2
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
comments: false,
compress: {
warnings: false,
drop_console: false,
screw_ie8: true
},
//mangle: false,
mangle: {
except: ["$", "webpackJsonp", "this", "exports", "require", "pattern", "options"],
screw_ie8: true,
keep_fnames: true
},
output: {
comments: false,
screw_ie8: true
}
})
]
});

ENDS HERE

[alexander-akait]

Your problem is not readable

[knightswatch3]

Please look at it now.

[knightswatch3]

I realized it has to do with lazy-loading some components in my code. But I receive. this following error stating missing files:

index.js.map:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Webpack is forcing me to get rid of the sourceMapFileName from the configuration but enabling that yeilds me the following error:

**ERROR in Conflict: Multiple assets emit different content to the same filename main.map

ERROR in Conflict: Multiple assets emit different content to the same filename main.map**

Can someone unblock me please.

[alexander-akait]

Please create reproducible test repo instead posting configurations, it is hard to read