Components not being rendered in webpack production build

Question

So the thing is that everything works as expected with webpack-dev-server.

But when I manually open index.html after npm run build, I see only the header component being rendered and the rest, which is to be rendered after fetching data, is blank. There's no error in the console.

The un-rendered components are the Routes. Well I'm using Routes for the first time, and after searching a lot all I've come to understand is that I should use historyApiFallback and publicPath in webpack.config.js.

output: {
        path: path.join(__dirname, '/build'),
        filename: '[name].bundle.js',
        publicPath: '/'
    },
devServer: {
    historyApiFallback: true
  },

But the result is the same. I have no idea how it works different for development and production. I also want a little bit explanation of the fix that you may provide!

Please let me know the cause and the fix as well!

Link to project- https://codesandbox.io/s/fetch-countries-api-1ibwp?file=/src/index.js:138-154

Answer 1

Try serving your build folder with a package like serve https://www.npmjs.com/package/serve

Create a serve.json with the similar following contents for accessing sub-routes directly.

{
  "public": "build",
  "rewrites": [
    {
      "source": "/*",
      "destination": "/index.html"
    }
  ]
}