Direct nested URL fails with error "Uncaught SyntaxError: Unexpected token '<'" - Create React App/React-router-dom/Netlify

user_15132221 0
Viewed 165

I've got an app created with create-react-app (with react-router-dom) and deployed with Netlify. Whenever I try and route to a page through a direct (nested) URL, such as 'https://jvcparry.com/products/indie', it fails to load a page and gives the errors

Uncaught SyntaxError: Unexpected token '<' main.e3eaf229.chunk.js:1

However when I navigate the deployed version through links, everything loads fine. I also don't get this error when I'm running the app locally, which I guess means it must be something to do with deployment?

I've trawled through all the other posts I can find with this error, and also things to do with Netlify/CRA deployments. I've got a _redirects file with '/* /index.html 200' in it in my /public folder, and I've tried refactoring my routes to use code-splitting but that's made no difference.

My code is on github here: https://github.com/NatClamp/jvcparry

Deployed version is here: https://jvcparry.com/ and if you go to https://jvcparry.com/products/indie you'll see the error I'm getting.

Can anyone shed any light on this? Thanks in advance

react-router-dom netlify create-react-app
1 Answers

A rigid but working solution is to update _redirects file this way:

/*/main.e3eaf229.chunk.js /main.e3eaf229.chunk.js 200
/* /index.html 200

You can also be updating this file every time you build new js bundle during your CICD run

user_33022630
Related