React webpack showing blank page on refresh

December 31, 2021

I am serving my static files from express and i can see that it loads index.html
But the problem is when on a rout for example localhost:8080/users and i refresh the page, the .css and main.js does not seam to be loaded so it returns blank page.. Any idea on what night be the problem?

My app.js

 function App (){
      return (
          <div className="wrapper">
             <Routes>
              {routes.map(({ path, name, Component }, key) => (
                <Route exact path={path} key={key} element={Component} />
              ))}
              </Routes>
          </div>
        );
    }
    
    
    export default App

My index.js:

ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
    <BrowserRouter>
       <Routes>
       <Route path="*" element={<App />} /> 
      </Routes>
    </BrowserRouter>
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);

This is my webpack:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Dotenv = require('dotenv-webpack');
const webpack = require('webpack');
require('dotenv').config({path:__dirname+'/../.env'})
module.exports = {
  entry: {
    app: path.join(__dirname, "/src/Index.js"),
  },

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },

  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        exclude: /node_modules/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/,
        use: 'style-loader!css-loader'
       },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.html$/,
        exclude: /node_modules/,
        use: "html-loader",
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        APP_API_URL : JSON.stringify(process.env.APP_API_URL)
      },
    }),
    new Dotenv(),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html",
    }),

    new MiniCssExtractPlugin({
      filename: "app.css",
      chunkFilename: "[id].css",
    }),
  ],

  devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: process.env.PORT_CLIENT, 
    open: true,
    stats: "errors-only",
  }
};