js chunk being served with wrong mime type in react app

Question

I have a react app (with routes handled by react-router) with some components lazily loaded deployed on heroku(free plan), it is served by this express server:

... imports avoided for brevity

app.use(express.static('build'));

app.listen(port, () => {
  console.log(`Server is up on port ${port}`);
});

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
})

When I visit some pages the browsers gives me this error in the console:

The resource from “https://my-app-url/listingdetail/static/js/476.b3e4fdaa.chunk.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)

So it seems that the server is responding with a wrong mime type, in my search for the fix I tried adding this extra handler in which I specify that the content type should be javascript.

app.get('/*', (req, res) => {
  res.setHeader('content-type', 'application/javascript');
  res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
})

Not all the files in my build are js but I wanted to know if at least that particular error with that chunk disappear, however it persisted.