loading a bundle.js file from webpack changes mime type to text/html

Question

I am trying to achieve server side rendering for an app using react-redux and express for the server, webpack is being used to create the bundle.

I started off using the following documentation:

https://redux.js.org/docs/recipes/ServerRendering.html

I have the following set up to load up the main.js created from webpack:

<script type="application/javascript" src="/static/main.js"></script>

On firing up the express server though, this is what I see in the console:

Refused to execute script from 'http://localhost:8080/static/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

This is not firing up in any browser. Any idea what might be going on?

Answer 1

It seems to me as configuration issue.

If it is returning MIME type ('text/html') that means, at that specific path it is not able to find/resolve the main.js file, so it is returning a default 404 html page instead, which is strictly defined to be javascript.

So, Ideally what you can do is that you can configure your express server to serve static files as shown below.

app.use(express.static(__dirname + "/static"));

For more details, you can refer to::-> https://expressjs.com/en/starter/static-files.html

 

Happy Coding!