historyApiFallback, React Router v4, Webpack-Dev-Server, "Cannot get /map"

Question

I know I'm not the only one facing this issue but after searching the web for a while and trying out everything it gave me, I gotta ask for my case here.

I'm getting the popular error that I receive a 404 whenever I try to access a route of my app, when not using an app-related way. So for example if I refresh my page when I'm at "/map", it says "Cannot get /map".

This is my current configuration, although I tried several ones with different devServer: {} settings and playing with publicPath etc.:

webpack.config.js:

const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "dist"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    devServer: {
        historyApiFallback: {
            index: "dist/index.html"
        }
    }
};

App.js

import React, { Component } from "react";
import { connect } from "react-redux";

import { BrowserRouter, Route } from "react-router-dom";

import Homescreen from "./Homescreen";
import Map from "./Map";

import { withStyles } from "material-ui/styles";
import Reboot from "material-ui/Reboot";
import AppBar from "material-ui/AppBar";
import Toolbar from "material-ui/Toolbar";
import Typography from "material-ui/Typography";
import Button from "material-ui/Button";
import IconButton from "material-ui/IconButton";
import MenuIcon from "material-ui-icons/Menu";

const styles = {
    flex: {
        flex: 1
    },
    menuButton: {
        marginLeft: -3,
        marginRight: 20
    }
};

class App extends Component {

    render() {

        const { classes } = this.props;

        return (
            <BrowserRouter>
                <div>
                    <Reboot />
                    <AppBar position="sticky">
                        <Toolbar>
                            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
                                <MenuIcon />
                            </IconButton>
                            <Typography variant="title" color="inherit" className={classes.flex}>
                                WeltRaum 31
                            </Typography>
                            <Button color="inherit">Login</Button>
                        </Toolbar>
                    </AppBar>
                    <Route exact path="/" component={Homescreen} />
                    <Route path="/map" component={Map} />
                </div>
            </BrowserRouter>
        );

    }

};

export default withStyles(styles)(App);

Did you try this https://stackoverflow.com/a/39968984/9034168 ? Maybe it can help — Efe, Mar 12 '18 at 10:27
Yes, I already tried just setting "historyApiFallback" to true, too. Didn't work either :( — SVARTBERG, Mar 12 '18 at 14:17

Sumit · Answer 1 · 2018-12-12T07:52:05.057

9

@SVARTBERG The following link explains the rationale behind using the webpack configuration setting --> devServer: {historyApiFallback: true }

https://tylermcginnis.com/react-router-cannot-get-url-refresh/

You have to add "publicpath" attribute value to '/' in the output object and then add the 'devserver' property as listed below in your webpack configuration file.

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },

devServer: {
    historyApiFallback: true,
  },

edited Dec 12 '18 at 07:52

answered Dec 11 '18 at 14:17

Sumit

109
2
6

From review: this does not provide an answer to the question, could you please add this as a comment to the question or the provided compete answer? – Sach Dec 11 '18 at 14:39
I added more details to my answer. Let me know if that helps. – Sumit Dec 12 '18 at 07:53
The above mentioned link has insightful explanation! – Bing Lu Jun 14 '19 at 02:12

score 0 · Answer 2 · answered Mar 13 '18 at 11:06

Did you try to use HtmlWebpackPlugin? Please first change the public path from dist to /, then in devServer change historyApiFallback to true. Finally install and require html-webpack-plugin, then add this plugin into plugins array on your config

  plugins: [
    new HtmlWebpackPlugin({
      template: 'dist/index.html'
    })
  ]

score -2 · Answer 3 · answered Mar 14 '18 at 15:33

Wow, all of the sudden, when I tried the solution from @Efe , it worked. But only when I had devServer: {historyApiFallback: true }. Because of that I removed the plugin he suggested again, and it suddenly worked even without it. So sorry, but can't accept that as an answer tho. Thanks anyways. No idea what the real issue was now...

historyApiFallback, React Router v4, Webpack-Dev-Server, "Cannot get /map"

3 Answers3