May Hitchings
May Hitchings

Reputation: 9

Local react app returning 404 - Cannot get /

I've built a react front end application that draws data from a Wordpress site via the WP REST API. It was working great for weeks, but I messed with my webpack config and package.json to try to get it working on Atlas through WPEngine. They don't offer support for trial users. I've git pulled down a prior version, but I still can't get it working locally. My browser isn't able to find the root. I've checked my port and it hasn't changed. I can't figure out why it's not finding the site and just returning 404 in the console and "Cannot get /" in the page. I tried uninstalling and reinstalling all dependencies, too. Any advice? I'm sure I'm missing something stupid.

Here's my package.json, with some info redacted:

  "name": "react-workshop",
  "version": "1.0.0",
  "description": ":fire: Boilerplate React Application",
  "main": "index.js",
  "proxy": "<REDACTED>",
  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    "webpack-dev-server": "webpack-dev-server",
    "dev": "webpack serve --mode=development",
    "prod": "webpack --mode=production",
    "build": "npm run prod",
    "start": "npm run prod"
  },
  "repository": {
    "type": "git",
    "url": "git+<REDACTED>"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "<REDACTED>"
  },
  "homepage": "<REDACTED>",
  "dependencies": {
    "axios": "^1.7.2",
    "cors": "^2.8.5",
    "css-loader": "^5.2.6",
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "file-loader": "^6.2.0",
    "node-polyfill-webpack-plugin": "^4.0.0",
    "path-browserify": "^1.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.23.1",
    "react-router-dom": "^6.23.1",
    "react-scripts": "^5.0.1",
    "stream": "^0.0.3",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "util": "^0.12.5"
  },
  "resolutions": {
    "react-error-overlay": "6.0.9"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-react": "^7.24.7",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.1",
    "node-sass": "^9.0.0",
    "path": "^0.12.7",
    "process": "^0.11.10",
    "react-error-overlay": "^6.0.9",
    "sass": "^1.77.6",
    "sass-loader": "^14.2.1",
    "webpack": "^5.92.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

and my webpack config:

const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
const path = require( 'path' );
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const webpack = require('webpack');
const dotenv = require('dotenv');

dotenv.config();

module.exports = {
    context: __dirname,
    entry: './src/index.js',
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'main.js',
        publicPath: "./"
    },
    devServer: {
        historyApiFallback: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jp?g|svg|gif)$/,
                use: [{
                    loader: "file-loader"
                }]
            }
        ]
    },
    plugins: [
        new NodePolyfillPlugin(),
        new HtmlWebPackPlugin({
            template: path.resolve( __dirname, 'public/index.html' ),
            filename: 'index.html'
        }),
        new webpack.ProvidePlugin({
            process: 'process/browser.js',
          }),
        new webpack.DefinePlugin({
        'process.env': JSON.stringify(process.env)
        })
    ],
    resolve: {
        alias: {
            components: path.resolve(__dirname, './../src/components'),
            assets: path.resolve(__dirname, './../src/assets'),
        },
        fallback: { 
            path: require.resolve("path-browserify") }
    }
    
};

Upvotes: 0

Views: 38

Answers (0)

Related Questions