Issue 1:
I migrate from webpack from 1.x to latest 2.3.1, when I start, always show module.entry is invalid.

my webpack config as follwing， I did not see any issue in the config.

var webpack = require('webpack');

var autoprefixer = require('autoprefixer');

var path = require('path');

var config = require('config')

var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');

module.exports = {

resolve: {

extensions: ['.js', '.ts', '.tsx', '.js'],

modules: ['node_modules'],

alias: {

bower: path.resolve(__dirname, 'ui/bower_components'),

"matches-selector/matches-selector": "desandro-matches-selector",

"eventEmitter/EventEmitter": "wolfy87-eventemitter",

"get-style-property/get-style-property": "desandro-get-style-property"

}

},

entry: {
app: path.resolve(__dirname, 'ui/app/index.ts')
'app.vendor': './ui/editor/app.index.ts',
home: './ui/home/index.ts',
'home.vendor': './ui/home/vendor.index.ts',
},

output: {
path: path.resolve(__dirname, 'ui/build'),
pathinfo: true,
publicPath: config.uiServer.protocol + config.uiServer.host + ':' + config.uiServer.port + '/build/',
filename: '[name].js'
},

devServer: {
contentBase: './ui'
},

module: {
rules: [
{
test: /\-template\.(|html|js)$/,
use: ['raw']
}, {
test: /\.css$/,
loader: "style!css"
}, {
test: /\.scss$/,
include: [/node_modules/, /bower_components/],
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}, {
test: /\.scss$/,
exclude: [/node_modules/, /bower_components/],
use: [{
loader: "style-loader"
}, {
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}]
}, {
test: /\.tsx?$/,
use: ['ts-loader']
}, {
test: /\.coffee$/,
use: ["coffee"]
}, {
test: /\.json$/,
use: ["json"]
}, {
test: /\.pug$/,
use: ["ngtemplate?relativeTo=" + __dirname + "!raw!pug-html?basedir=" + __dirname]
}, {
test: /\.png$/,
use: ['url-loader?limit=8192'],
query: { mimetype: "image/png" }
}, {
test: /\.jpg$/,
use: ['url-loader?limit=8192&mimetype=image/jpg'],
query: { mimetype: "image/jpg" }
}, {
test: /\.gif$/,
use: ['url-loader?limit=8192&mimetype=image/gif'],
query: { mimetype: "image/gif" }
}, {
test: /\.webp$/,
use: ['url-loader?limit=8192&mimetype=image/webp'],
query: { mimetype: "image/webp" }
}, {
test: /\.swf$/,
use: ['url-loader?mimetype=application/x-shockwave-flash'],
query: { mimetype: "application/x-shockwave-flash" }
},
// Added for bootstrap-css-loader
{
test: /bootstrap.*\/javascripts\//,
use: ['imports?jQuery=jquery']
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: ["url?limit=10000&mimetype=application/font-woff"]
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: ["url?limit=10000&mimetype=application/font-woff"]
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: ["url?limit=10000&mimetype=application/octet-stream"]
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: ["file"]
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: ["url?limit=10000&mimetype=image/svg+xml"]
}
],

noParse: [
/bower_components/
]
},

plugins: [
new CommonsChunkPlugin({
name: 'app.vendor',
chunks: ['app', 'app.vendor']
}),
new CommonsChunkPlugin({
name: 'home.vendor',
chunks: ['home', 'home.vendor']
}),
new webpack.SourceMapDevToolPlugin({
exclude: /.*\.vendor\.js/,
columns: false,
module: true
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
"window.jQuery": 'jquery',
'_': 'lodash',
i18next: 'i18next'
}),
],

};

the error message as following:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

configuration.entry should be one of these:

object { : non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function

The entry point(s) of the compilation.

Details:

configuration.entry['home'] should be a string.

configuration.entry['home'] should NOT have duplicate items (items ## 1 and 3 are identical) ({

"keyword": "uniqueItems",

"dataPath": ".entry['home']",

"schemaPath": "#/definitions/common.nonEmptyArrayOfUniqueStringValues/uniqueItems",

"params": {

"i": 3,

"j": 1

},

"message": "should NOT have duplicate items (items ## 1 and 3 are identical)",

"schema": true,

"parentSchema": {

"items": {

"minLength": 1,

"type": "string"

},

"minItems": 1,

"type": "array",

"uniqueItems": true

},

"data": [

"/usr/local/lib/node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:4000",

"webpack/hot/dev-server",

"/Users/yishuihanxiao/ws/ror/University_Work/node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:4000",

"webpack/hot/dev-server",

"./ui/home/index.ts"

]

}).

[non-empty string]

configuration.entry['home'] should be one of these:

non-empty string | [non-empty string]

configuration.entry should be a string.

configuration.entry should be an array:

[non-empty string]

configuration.entry should be an instance of function

function returning an entry object or a promise..

Issue 2:
Bug report

What is the current behavior?

If we have two modules say A and B. A and B imports react.

During dynamic import of these two module I found react code to be duplicated.

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

This is the repo link.

This is the source and public.

//src/index.js
import "@styles/index.css";
import "jquery/dist/jquery.slim"

import(/* webpackExports: ["default"] */"./app").then(({default:App})=>{
import(/* webpackExports: ["default"] */"./app2").then(({default:render})=>{
render(App)
})
})

//src/app.js
import { Modal } from 'bootstrap';
import{ useEffect, useState } from 'react';

export default function App() {
const [state] = useState(Date.now())

useEffect(()=>{
if(document.getElementById("myModal")) {
let elem = document.getElementById("myModal")
let modal = new Modal(elem)
modal.hide()
}
},[])

return (
<div>
<div>Hello WORLD</div>
<div>{state}</div>
</div>
)
}

//src/app2.js
import React from 'react';
import ReactDOM from 'react-dom';

export default function render(App) {
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
}

//webpack.prod.js
mode: 'production',
output: {
filename: '[name].[contenthash].js',
chunkFilename:'[id].[contenthash].js',
},
plugins: [ ... ],
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: false,
}),
new CssMinimizerPlugin()
],
moduleIds: 'deterministic',
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
cacheGroups: {
vendorsInitial: {
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
},
vendorsAsync: {
test: /[\\/]node_modules[\\/]/,
chunks: 'async',
},

npm ci
npm run build

These are the build assets:

310.3f191f82792ae2cafdf4.js
589.7d374a5468098e334db1.js
598.dccce690a646df0467cb.js
601.05cbbc0a1fa75c999014.js
70.af0523773e96dec9c092.js
favicon.ico
index.html
main.099275078be1d62b3b50.css
main.aa06ebf00a2dc10cbae3.js
runtime.fd41db16facc83bbd2f9.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>React Min</title>
<link rel="icon" href="/favicon.ico" />
<link href="/main.099275078be1d62b3b50.css" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
<script defer="defer" src="/runtime.fd41db16facc83bbd2f9.js"></script>
<script defer="defer" src="/70.af0523773e96dec9c092.js"></script>
<script defer="defer" src="/main.aa06ebf00a2dc10cbae3.js"></script>
</body>
</html>

310.3f191f82792ae2cafdf4.js: this one is src/app.js chunk

589.7d374a5468098e334db1.js: node_modules code chunk for src/app2.js (showing comments only..):

/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
...
/** @license React v17.0.2
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
...
/** @license React v17.0.2
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
...
/** @license React v17.0.2
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
...
/** @license React v0.20.2
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
...

598.dccce690a646df0467cb.js: this one is src/app2.js chunk

601.05cbbc0a1fa75c999014.js: node_modules code chunk for src/app.js (showing comments only..):

... // <-- popperjs code
/*!
* Bootstrap v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
...
/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
...
/** @license React v17.0.2
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
...
/** @license React v17.0.2
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
...

70.af0523773e96dec9c092.js: this one include jquery code only. Remember we imported jquery in src/index.js. It is a entry module.

main.aa06ebf00a2dc10cbae3.js: src/index.js code is included in it. It is a entry module.

runtime.fd41db16facc83bbd2f9.js: runtime. It is a entry module.

main.099275078be1d62b3b50.css: style imported inside src/index.js .

favicon.ico

As one can see these two chunks: 601.05cbbc0a1fa75c999014.js & 589.7d374a5468098e334db1.js has code in common:

/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
...
/** @license React v17.0.2
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
...
/** @license React v17.0.2
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

What is the expected behavior?

Webpack should be able to check that if it has generated chunk for library say React, Bootstrap, React-dom etc then it should not generate code again if it founds that library has been imported inside a dynamically imported module.

Other relevant information:

webpack version: ^5.44.0

Node.js version: 14.17.3

Operating System: Windows 10

Additional tools: