'problem with react-router-dom.production.min.js

I'm creating a React project where I'm using [email protected]. I'm trying to host my project on the internet, but it gives the following error after building the project and running it. I start by building the project with webpack that generates a file from the html template. This error was very strange to me and I'm almost certain that the error is due to something in the mimified file. Because this error does not occur in development.

this is the production webpack file

const { DefinePlugin } = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { merge } = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {
  mode: 'production',
  module: {
    rules: [{
      test: /\.ts(x?)$/,
      loader: 'ts-loader',
      exclude: /node_modules/
    }, {
      test: /\.scss$/,
      use: [{
        loader: MiniCssExtractPlugin.loader
      }, {
        loader: 'css-loader',
        options: {
          modules: true
        }
      }, {
        loader: 'sass-loader'
      }]
    }]
  },
  externals: {
    react: 'React',
    axios: 'axios',
    'react-dom': 'ReactDOM',
    'react-router-dom': 'ReactRouterDOM'
  },
  plugins: [
    new DefinePlugin({
      'process.env.API_URL': JSON.stringify('https://fordevs.herokuapp.com/api')
    }),
    new HtmlWebpackPlugin({
      template: './template.prod.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'main-bundle-[contenthash].css'
    })
  ]
})

This is the template.prod.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
  <title>4Dev - Enquetes para programadores</title>
</head>

<body>
  <main id="main"></main>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react-router-dom.production.min.js"></script>
</body>

</html>

react-router-dom

Solution 1:^[1]

I managed to solve this problem by adding the mimic script from history@5 and react-router@6 as suggested by friend Drew Reese. However, I had to change the file loading sequence as well. My template.prod.html file ended up like this:

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
  <title>4Dev - Enquetes para programadores</title>
</head>

<body>
  <main id="main"></main>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/history@5/umd/history.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-router@6/umd/react-router.development.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react-router-dom.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
</body>

</html>

Sources

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

Source: Stack Overflow

Solution	Source
Solution 1	Gerson Dantas

'problem with react-router-dom.production.min.js

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]