Title: react-router-dom project breaks because of publicPath when bundling with webpack
Tags: javascript;reactjs;webpack;react-router-dom
Question: Im working on a project with React-router-dom.
in my webpack I set:
output: {
filename: 'app.js',
path: path.join(__dirname, 'dist'),
publicPath: '/'
devServer: {
historyApiFallback: true
I need publicPath to be "/" in order for the routes to work (unless im wrong)
When I run the project with webpack-dev-server --inline --hot --process,
everything works fine.
But when I try to build and bundle it, I get this error:
index.html:11 GET file:///C:/app.js net75b5:f2c1:f5d7:b954:8dc3:cee9:baf:a8c0RR_FILE_NOT_FOUND
Do you know what would be the right way to configure it so the build would work fine as the project runs fine with webpack-dev-server?
Comment: How are you serving your app after you have built it? The server that's going to serve the app needs to know about client routing. Can you try [local web server](https://github.com/lwsjs/local-web-server) and serve your app from the build folder with `ws --spa index.html`?

Comment: it would actually work, but I am guessing you need to change paths in the html from `/app.js` to `./app.js` to load the file in the same directory as the html and not at the root of the current web, then enable "Allow access to file URLs" in Chrome Extensions, described [here](https://github.com/facebook/react-devtools#faq). But the react routes will no longer work if your serve the app from `file:///`.

Comment: btw, are you using `HashRouter` or `BrowserRouter`? according to [this SO answer](https://stackoverflow.com/a/44403064/6053299) your routes will work if serving from file system and using `HashRouter`, otherwise you have to set up a web server.

Comment: @margaretkru I was trying to run it with no server at all, just by opening my index.html,
why do I need a server ? cant I just run in staticly ?

Comment: @margaretkru  true, true :) i am using HashRouter

Here is the accepted answer: So here we go, how to run react app from file:///.
Change webpack configuration of the output section making publicPath: './', for example if index.html and bundled files are located in the same directory:
entry: ...
output: {
path: path.resolve(__dirname, 'public'),
filename: '[name].js',
publicPath: './'
This will allow to load bundled files in the same directory as the html and not at the root of the current web (as it would be in case publicPath: '/').
If testing in chrome, enable "Allow access to file URLs" in Chrome Extensions, described here.
If using routing, use HashRouter instead of BrowserRouter (concerns react-router v4). See this SO answer for more information on this.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 5, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:12/26/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><reactjs><webpack><react-router-dom>', 'Title': 'react-router-dom project breaks because of publicPath when bundling with webpack', 'ViewCount': 1637, 'id': 47982469, 'user_AboutMe': '', 'user_AccountId': 6491653.0, 'user_DisplayName': 'ueeieiie', 'user_Reputation': 1212.0, 'user_Views': 179.0, 'user_id': 5031463.0}}