Using Webpack with React-router bundle.js Not Found

All we need is an easy explanation of the problem, so here it is.

I build a project with Webpack and react-rounter.
this is my code:

ReactDOM.render(
    <Provider store={store}>
        <Router history={ browserHistory }>
            <Route path='/' component={ App } >
                <IndexRoute component={ Home } />
                <Route path="purchase" component={ Purchase } />
                <Route path="purchase/:id" component={ Purchase } />
            </Route>
        </Router>
    </Provider>,
    document.getElementById('example')
);

When i request "http://127.0.0.1:3001/purchase", it’s work! but the address "http://127.0.0.1:3001/purchase/a" has error. look the error message:enter image description here

My WebpackDevServer config is:

new WebpackDevServer (webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    noInfo: false,
    historyApiFallback: true
}).listen(3001, '127.0.0.1', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3001');
    });

I don’t know what the matter, Help me!

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You are using a relative path to describe path of the bundle.js in your index.html.

You should use absolute path for bundle.js in your index.html

Absolute path contains the root directory and all other subdirectories in which a file or folder is contained.

If it’s in the same path with your index.html.

eg.

public/index.html

public/bundle.js

This would solve your problem.

<script src="/bundle.js"></script>

Method 2

If you happen to be using the HtmlWebpackPlugin editing directly index.html is not an option. So, to fix this particular issue, add publicPath and specify / as the root folder inside webpack.config.js:

const path = require('path')

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  // more config stuff goes below..
} 

Don’t forget to restart the webpack dev server for these changes to take effect

More info about publicPath here.

Method 3

Adding <base href="/" rel="nofollow noreferrer noopener" /> to head tag of my index.html file before including any scripts worked for me.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply