While I was switching from an old deployment platform to Vercel, I got this error message again and again: Uncaught SyntaxError: Unexpected token <.
I found out that this was due to chunk file names.
In this article, I'll be talking about:
- What is a chunk file name?
- What is it for, and how does it work?
- Why did it cause an error, 'Unexpected token <'?
- How did I fix this error?
What is a chunk file name?
[name].[contenthash].js
When you build your app, you get a split file.
You can find it inside the build folder.
What is it for? How does it work?
When sending data from client to server, you send in chunks instead of a whole file. This "enable[s] long term caching techniques to improve application loading performance."
(See for more details - https://create-react-app.dev/docs/production-build#static-file-caching)
When you make a change to your app and run a build, a chunk file is updated and its name (the hash part) is changed.
Why did it cause the error, 'Unexpected token <'?
The script in the index file was pointing to an old chunk file, and it couldn't find the file. That's why I got this error.
How did I fix this error?
There might be another better way to fix this error, but what I did (and it worked) was to delete the build folder and run the build again. But, I still got the same error. I'm assuming the browser was caching the data. When I checked the deployed app the following day, it worked.
This article was a brief summary of what issue I had and how I handled it. All the issues are related to "caching" and "webpack," so I'll dig deeper into these subjects next.
links
Creat React App
Netlify
Top comments (0)