'Webpack doesn't work in prod but in dev env is fine

I am serving with NodeJS react as static but index.html cant render bundle.js file (in network tab it says that bundle.js is Not found) ;

Express looks like this:

    app.get(/^\/ui\/(?!images|vendor|assets|packages)/, function (req, res, next) {
    res.sendFile(path.join(__dirname, 'public/ui/index.html'))
});
app.use(express.static(path.join(__dirname, 'public')));

app.listen(port, function () {
    console.log('App listening on port ' + port);

});

The folder structure looks like this:

the index html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--    Font Awesome CDN-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
          integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skenario Labs - Banking</title>
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>

Webpack common :

module.exports = {
entry: path.resolve(__dirname, '..', '/src/index.tsx'),
resolve: {
    extensions: ['.tsx', '.ts', '.js'],
},
module: {
    rules: [
        {
            test: /\.(ts|js)x?$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'babel-loader',
                },
            ],
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.s[ac]ss$/i,
            use: [
                // Creates `style` nodes from JS strings
                "style-loader",
                // Translates CSS into CommonJS
                "css-loader",
                // Compiles Sass to CSS
                "sass-loader"
            ]
        },
        {
            test: /\.(woff(2)?|eot|ttf|otf|)$/,
            type: 'asset/inline',
        },
        {
            test: /\.(png|jpe?g|gif|jp2|webp|ico|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
            },
        },
    ],
},
output: {
    path: path.resolve(__dirname, '..', './build'),
    filename: 'bundle.js',
},
plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '..', './public/ui/index.html'),
        favicon: "./public/ui/assets/images/favicon.png",
        filename: 'index.html',
        inject: 'body'
    }),
],
stats: 'errors-only',

}

Ive tried to use it both ways :

<script src="/bundle.js"></script>
<script src="bundle.js"></script>

But then getting status 304 and the bundle.js inside shows white screen instead of JS

reactjs webpack

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Webpack doesn't work in prod but in dev env is fine

Sources

Related Questions