Why am I getting the error: GET localhost:8080/1/bundle.js net::ERR

N

n1ksON2021-07-25 12:59:44

React

n1ksON, 2021-07-25 12:59:44

Why am I getting the error: GET localhost:8080/1/bundle.js net::ERR_ABORTED 404 (Not Found)?

If you specify a non-existent albeit with one slash, for example: localhost:8080/1 , then everything is correct and the page that is indicated with an error 404 through <Route path="*" render={() => <Error404 />} />
A is shown if you specify a path with two or more slashes, for example: localhost:8080/1/1 , then nothing is displayed and the following error appears in the console:

GET http://localhost:8080/1/bundle.js net::ERR_ABORTED 404 (Not Found)

Also, if you just go to one of the pages with one slash, for example: localhost:8080/user , then everything is fine. If you use sub-items on the page (when part of the content remains unchanged, and part changes depending on the specified path) and click on a link with two or more slashes, for example: localhost:8080/user/progress , then the content will be displayed and everything is correct. And if you reload the page, then the error occurs again and a blank page is displayed:

GET http://localhost:8080/user/bundle.js net::ERR_ABORTED 404 (Not Found)

webpack.config.js:

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: [
    'react-hot-loader/patch',
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.svg$/,
        use: 'file-loader'
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './dist'
  }
};

module.exports = config;

index.js:

import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import App from "./components/App";
import "./index.css";

render(
  <React.StrictMode>
    <BrowserRouter>
          <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('app')
);

I'm using react-router-dom. Tell me what I did wrong and why there are errors? If necessary, I can load App.js and User.js, but there is nothing special

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

N

n1ksON, 2021-11-09
@n1ksON

webpack.config.js

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: [
    'react-hot-loader/patch',
    path.resolve(__dirname, 'src', 'index.js')
  ],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.svg$/,
        use: 'file-loader'
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devServer: {
    historyApiFallback: true,
    contentBase: path.resolve(__dirname, './dist'),
    open: true,
    hot: true,
    compress: true,
  }
};

module.exports = config;

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="app"></div>
        <script src='../bundle.js'></script>
    </body>
</html>

A

abberati, 2021-07-25
@abberati

Paths to statics are incorrectly configured. The js request goes to localhost:8080/user/bundle.js , although obviously it should go to localhost:8080/bundle.js