'React/Node/Webpack - On refresh the page will not load assets

Ive been on this issue already few days and cant figure it out. I am using React JS that is provided by NODEjs as a static file. However the issue happens in also devServer(webpack) and when the app is rendered with server.js(static from node). So i am using "assets" from a folder which got some css/js files in them.

On initial when i open the page as "localhost:port" will work fine and will also get the assets as it should.

But issue happens if i open with another route manually or refreshing the page f.ex "localhost:port/someroute/".(It is fine if route changes with react router ). Then the page will still render but it will not manage to fetch the assets folder.

When i look in to the dev console it fetches the assets items like:

http://localhost:8080/SOMEROUTE/assets/packages/cssfile/cssfile.css

But it should fetch them as in "/" route:

http://localhost:8080/assets/packages/leaflet/leaflet.css

My folder setup looks like this:

enter image description here

I suspect issue is in webpack.common

module.exports = {
entry: "./app/scripts",
output: {
    path: path.resolve(__dirname, "../public/ui/assets/"),
    filename: "[name].bundle.js",
    publicPath: "/ui/assets/"
},
module: {
    rules: [
        {
            test: /\.(png|jpg|gif)$/i,
            use: [
                {
                    loader: "url-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: /\.svg$/,
            use: {
                loader: "file-loader",
                options: {
                    name: "media/[name].[hash:8].[ext]"
                }
            }
        },
        {
            test: /\.m?js$/,
            resolve: {
                fullySpecified: false
            }
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/i,
            type: "asset/resource"
        }, {
            test: /\.txt$/i,
            use: 'raw-loader',
        },
    ]
},

webpack dev file

    mode: "development",
devtool: "eval-source-map",
devServer: {
    compress: false,
    hot: true,
    historyApiFallback: true,
    port: 8080,
    client: {
        overlay: {
            warnings: false,
            errors: true
        },
    },
    static: {
        publicPath: "/",
        directory: path.join(__dirname, "../public/ui/"),
    },

index.html script imports

 <script src="./assets/vendor/jquery.min.js"></script>
<script src="./assets/vendor/jquery.bootstrap-growl.min.js"></script>
<script src="./assets/packages/theme-marketing/builded/toolkit.js"></script>
<script src="./assets/packages/leaflet/leaflet.js"></script>
<script src="./assets/packages/leaflet.fullscreen/Leaflet.fullscreen.js"></script>
<script src="./assets/packages/leaflet.draw/leaflet.draw.js"></script>
<script src="./assets/packages/leaflet.sidebar/L.Control.Sidebar.js"></script>
<script src="./assets/packages/leaflet.markercluster/leaflet.markercluster.js"></script>
<script src="./assets/vendor/leaflet-geodesy.js"></script>
<script src="./assets/vendor/leaflet-pip.min.js"></script>
<script src="./assets/vendor/turf.min.js"></script>
<script src="/ui/assets/main.bundle.js"></script>

and for prod env server.js

    app.use(express.static(path.join(__dirname, 'public')));
app.get("/", function (req, res, next) {
    console.log(req, 'REQ')
    res.sendFile(path.join(__dirname, 'public/ui/index.html'))
});
app.get("/error", function (req, res, next) {
    console.log(req, 'REQ')
    res.sendFile(path.join(__dirname, 'public/ui/index.html'))
});

app.use('/assets', express.static(path.join(__dirname, 'public/ui/assets')));
app.get('/*', function (req, res) {
        res.sendFile(path.join(__dirname, 'public/ui/index.html')), function (err) {
            if (err) {
                res.status(500).send(err)
            }
        }
    }
)


Sources

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

Source: Stack Overflow

Solution Source