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",
  }
};

CodePudding user response：

Check out this finished example using React Router and compare it with your App.

https://stackblitz.com/edit/github-agqlf5?file=src/main.jsx