CODEWITHSUNDEEP
javascripthtmlreactjsserverweb-hosting
Enrico
Enrico

Reputation: 830

MIME type checking failure when deploying the React App on the server

I am deploying my React app on a public server but when I open it I just get the blank page.

In order to deploy the app I did:

1) run "npm run build" to minify the code and putting into a build folder
2) replaced the local URL in the new index.html file with the correct server ones.

still, when trying to open the website in the console I get these errors.

error image

Any ideas?

Upvotes: 2

Views: 7093

Answers (3)

Kelly Hutchison
Kelly Hutchison

Reputation: 31

In the network tab in dev tools, you can check the path the request is trying to make to check that the correct file path is being called by your build index.html paths to the .js file and the .css files. If the paths are relative ie. ./ instead of absolute / then it will search for the static files after the full URL instead of the base URL used for the app. I developed a vite react app, so I had to change the vite.config.js file to make the base path '/' instead of './' and then re-run npm run build. This rebuilds the index .html file with absolute paths to the collected static js and css files, and made the deployed version work better. My files were put into a /dist folder which by the way was listed by default in the git ignore so I also had to change the .gitigmore as well before re-deploying.

Upvotes: 1

Enrico
Enrico

Reputation: 830

I solved the problem simply correcting the url.

since I was already accessing the "public" folder thanks to the "./" typing in the beginning of the url, there was no need to type "./public".

Thank you anyway.

Upvotes: 2

Adnan
Adnan

Reputation: 1707

Just edit webpack config by editing this:

     devServer: {
       historyApiFallback: true
          }

And also add this to public/index.html:

  <base href="/" />

Hope this help

Upvotes: 1

Related Questions