ReactDOM.render did not take effect

When

react render, there is no component to render to the id= "root" node of the template?
Why

the code is as follows:
index.html

    <!DOCTYPE html>
        <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>index page</title>
    </head>
    <body>
      <div id="root">template...</div>
    </body>
    </html>

index.tsx

    class App extends React.Component {
    public render () {
        return (
                <div>app...</div>
            )
        }
    }
    ReactDOM.render(
        <App />, // App 
        document.getElementById("root")
    )

found the reason, it"s my webpack configuration
where chunks is common

new HTMLPlugin({
                    filename: key + ".html",
                    template: fileName,
                    chunks: ["common", key] // script.js
                }))

optimization configure name: "vendor" causes vendor not to be introduced into html

    
    optimization: {
        splitChunks:{
            cacheGroups:{
                common: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    name: "vendor" 
                }

            }
        }
    }