Błąd useRef po użyciu react router

Question

Witam, mam problem, gdyż cały czas pojawia mi się ten błąd:
Cannot read properties of null (reading 'useRef') at BrowserRouter 

 

App.js
 

import React from 'react';
import { BrowserRouter as Router, Route, Routes , Link } from 'react-router-dom';
import ErrorBoundary from './components/ErrorBoundary'

function App() {
  const Home = () => <div>Strona Główna</div>;
  const About = () => <div>O nas</div>;
  const Contact = () => <div>Kontakt</div>;

  return (
    <ErrorBoundary>
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Strona Główna</Link>
              </li>
              <li>
                <Link to="/about">O nas</Link>
              </li>
              <li>
                <Link to="/contact">Kontakt</Link>
              </li>
            </ul>
          </nav>

          <Routes>
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/" element={<Home />} />
          </Routes>
        </div>
      </Router>
    </ErrorBoundary>
  );
}

export default App;

 

Webpack.config.js:
 

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const DotenvWebpack = require('dotenv-webpack');
const path = require('path');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    entry: './src/index.js', 
    output: {
      path: path.resolve(__dirname, 'dist'), 
      filename: '[name].[contenthash].js', 
      clean: true, 
      publicPath: '/', 
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/, 
          use: {
            loader: 'babel-loader', 
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'], 
            },
          },
        },
        {
          test: /\.scss$/, 
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 
            'css-loader', 
            'sass-loader', 
          ],
        },
        {
          test: /\.css$/, 
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 
            'css-loader',
          ],
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i, 
          type: 'asset/resource',
          generator: {
            filename: 'images/[name].[hash][ext]', 
          },
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i, 
          type: 'asset/resource',
          generator: {
            filename: 'fonts/[name].[hash][ext]', 
          },
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html', 
      }),
      new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css', 
      }),
      new DotenvWebpack(), 
    ],
    resolve: {
      extensions: ['.js', '.jsx'], 
    },
    devtool: isProduction ? 'source-map' : 'eval-source-map', 
    devServer: {
      historyApiFallback: true, 
      contentBase: path.join(__dirname, 'dist'), 
      hot: true, 
      port: 3000, 
      open: true, 
    },
    optimization: {
      splitChunks: {
        chunks: 'all', 
      },
      runtimeChunk: 'single', 
    },
  };
};

server.js w express

const express = require('express');
const path = require('path');
const app = express();
require('dotenv').config();
const PORT = process.env.PORT || 3000;

// Środowisko produkcyjne
if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '../client/build')));
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
  });
} else {
    app.use(express.static(path.join(__dirname, '../client/dist')));
    app.get('*', (req, res) => {
      res.sendFile(path.resolve(__dirname, '../client/dist', 'index.html'));
    })
}

app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));

 

 Wszystkie biblioteki są aktualne