CODEWITHSUNDEEP
javascriptreactjswebpack
Lucky404
Lucky404

Reputation: 23

net::ERR_ABORTED 404 (Not Found) react-router-dom, webpack

It's my first time configuring a webpack and there is some problem occurred. When url is driven into /people/1 an error occurs: GET http://localhost:8080/people/main.bundle.js net::ERR_ABORTED 404 (Not Found), but it works if in the url is /people. The component 'App' is wrapped by 'BrowserRouter' index.html:

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Library of ossus</title>
</head>

<body>
  <div id='root'></div>

  <script src='./index.js'></script>
</body>

</html>

App.js:

import React from 'react';
import { Redirect, Route, Switch } from 'react-router';
import './App.scss';
import Content from './components/Content/Content.jsx';

const App = () => {
  return (
    <Switch>
      <Route path='/people/:personId?' render={() => <Content />} />
      <Route path='/planets/:planetId?' render={() => <Content />} />
      <Route path='/starships/:starshipId?' render={() => <Content />} />
      <Route path='/' render={() => <Redirect to='/people' />} />
      <Route path='*' render={() => <Redirect to='/people' />} />
    </Switch>
  );
};

export default App;

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devServer: {
    historyApiFallback: true,
    static: {
      directory: path.join(__dirname, './dist'),
    },
    contentBase: path.resolve(__dirname, './dist'),
    open: true,
    compress: true,
    hot: true,
    port: 8080,
  },
  entry: ['regenerator-runtime/runtime.js', './src/index.js'],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack Boilerplate',
      template: path.resolve(__dirname, './src/index.html'),
      filename: 'index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        },
      },
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
        type: 'asset/inline',
      },
      {
        test: /\.(scss|css)$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      },
    ],
  }
};

Upvotes: 2

Views: 3705

Answers (1)

Craig Johnson
Craig Johnson

Reputation: 36

In your webpack config, you use both:

static: {
  directory: path.join(__dirname, './dist'),
},
contentBase: path.resolve(__dirname, './dist'),

In webpack 5, they changed contentBase to static. Remove contentBase and try this:

static: path.resolve(__dirname, './dist')

Upvotes: 2

Related Questions