Build version of react app giving wrong links to CSS and JS files

I’ve been working on a simple React project named Simple-portfolio,
Github repo: https://github.com/Devang47/simple-portfolio live site url: https://simple-portfolio.pages.dev/

This project is working fine in the development server but after building the app, in index.html the link to other files is getting wrong. for ex:

// Wrong:
<link rel="icon" type="image/png" sizes="16x16" href="./simple-portfolio/favicon-16x16.png"/>

expected:
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png"/>

Errors on the console of production build:

The script from “https://simple-portfolio.pages.dev/simple-portfolio/static/js/3.f84cd7e8.chunk.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

The script from “https://simple-portfolio.pages.dev/simple-portfolio/static/js/main.2f259d87.chunk.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

The stylesheet https://simple-portfolio.pages.dev/simple-portfolio/static/css/main.f6d0acc0.chunk.css was not loaded because its MIME type, “text/html”, is not “text/css”. 

Uncaught SyntaxError: expected expression, got '<'

Uncaught SyntaxError: expected expression, got '<'

What I’ve tried till now:

Deleting node_modules
Deleting lock files
Full search on stack overflow for similar problems
Trying it on another branch

Answer

Your app is deployed to https://simple-portfolio.pages.dev/ which is the root of the domain, but the homepage is set to http://Devang47.github.io/simple-portfolio/ which has a different path.

To fix this, delete homepage from package.json, rebuild your app, and redeploy it to Cloudflare Pages.

Advertisement

Answer