Routes not loading after using "npm run build" in React

Question

This project works perfectly in development using "npm start" but after running "npm run build" and accessing the index.html from the build folder, it does not seem to load any of my Route components. The only thing that loads is my Header component specified in App.js as it is the only one not inside a Route. I also get an error in the console when clicking a button from header that corresponds to a Route which says "Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/register' cannot be created in a document with origin 'null' and URL" file:///C:/... I might have something wrong with the paths, any suggestions?

App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle';
import './App.scss';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import jwt_decode from 'jwt-decode';

import store from './store';
import Dashboard from './components/Dashboard';
import Header from './components/Layout/Header';
import Landing from './components/Layout/Landing';
import ProjectBoard from './components/ProjectBoard/ProjectBoard';
import Register from './components/UserManagement/Register';
import Login from './components/UserManagement/Login';
import setJWTToken from './securityUtils/setJWTToken';
import { SET_CURRENT_USER } from './actions/types';
import { logout } from './actions/securityActions';

const jwtToken = localStorage.jwtToken;

if (jwtToken) {
    setJWTToken(jwtToken);
    const decoded_jwtToken = jwt_decode(jwtToken);
    store.dispatch({
        type: SET_CURRENT_USER,
        payload: decoded_jwtToken
    });

    const currentTime = Date.now() / 1000;
    if (decoded_jwtToken.exp < currentTime) {
        store.dispatch(logout());
        window.location.href = '/';
    }
}

function App() {
    return (
        
            
                
                {
                    // Public Routes
                }
                
                
                
                {
                    // Private Routes
                }
                
                    
                     }
                    />
                
            
        
    );
}

export default App;

package.json

{
    "name": "react-client",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "axios": "^0.19.0",
        "bootstrap": "^4.4.1",
        "classnames": "^2.2.6",
        "jquery": "^3.4.1",
        "jwt-decode": "^2.2.0",
        "node-sass": "^4.13.0",
        "popper.js": "^1.16.0",
        "react": "^16.10.1",
        "react-beautiful-dnd": "^12.2.0",
        "react-dom": "^16.10.1",
        "react-redux": "^7.1.1",
        "react-router-dom": "^5.1.1",
        "react-scripts": "3.1.2",
        "redux": "^4.0.4",
        "redux-thunk": "^2.3.0",
        "styled-components": "^4.4.1"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "proxy": "http://localhost:8080",
    "homepage": "."
}

index.html



    
        
        
        
        
        
        
        
        
        
        
        
        

        
        React Client

rubixibuc · Accepted Answer

Loading the index.html file directly from the /dist folder fails because it expects to be accessed from a web server.

You can run a local web server by installing the npm package http-server

This command will install a suitable web server: npm install http-server -g This command might also require admin privileges. So if you're running on a unix/linux/osx system, run like this: sudo npm install http-server -g, and enter you password when asked.

Then run the server from the root of your project by typing

http-server ./dist

Open your browser and visit

http://localhost

There are several reason running a file directly like this won't work. One reason would be webpages are not meant to load resources asynchronously directly from the file system.

Any http server should work in place of the npm module suggested. Just make sure you point it at the correct folder. In this case: ./dist

The directions would vary based on what operating system you're running. In general it just needs to be loaded from a server. And that server can be running locally.

EDIT: I'm realizing now that you're running on a windows machine. If you're running the scripts from a unix like terminal emulator they should still work with little modification. An alternative command you can try using is: npx http-server ./dist' This will run the same server without installing it, and be less dependent on your operating system.

Routes not loading after using "npm run build" in React

Answers (2)

Related Questions

Routes not loading after using &quot;npm run build&quot; in React

Answers (2)

Related Questions

Routes not loading after using "npm run build" in React