Create-React-App build - "Uncaught SyntaxError: Unexpected token <"

Question

I realize this question has been asked multiple times but nothing has worked for me...

I'm trying to create a static build of a create-react-app project but I'm getting the following errors:

Uncaught SyntaxError: Unexpected token <     1.ca81c833.chunk.js:1
Uncaught SyntaxError: Unexpected token <     main.7ced8661.chunk.js:1

Due to these files being minified, I'm not sure where to begin in debugging them.

Per other SO responses, here are some things I've tried:

//Original index.html file, which gets included in the built file:
<script type="text/babel" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

//package.json
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",

//.babelrc file
{
  "presets": ["react", "es2015", "stage-1"]
}

Not sure if this is relevant, but I have this on my express server, which I believe is standard:

if (process.env.NODE_ENV === "production") {

    app.use(express.static('client/built'));
    app.get("*", (req, res) => {
        res.sendFile(require('path')
            .resolve(__dirname, 'client', 'build', 'index.html'));
    })
}

Assuming it's actually a JSX issue, the whole thing is very confusing - shouldn't create-react-app be handling JSX automatically?

UPDATE: I just posted this question but already have a relevant update. I'm able to serve the page statically through pm2 by running pm2 serve build so I think the issue may be with my server configuration.

Possible duplicate of https://stackoverflow.com/questions/28100644/reactjs-uncaught-syntaxerror-unexpected-token — Bon Andre Opina, Jan 24 '19 at 06:30

score 76 · Answer 1 · answered Feb 13 '19 at 09:33

76

Thanks this helped me a lot. Just wanting to add to this with an example from a Create-React-App project that had the same solution: I received the same error after deploying to heroku.

Uncaught SyntaxError: Unexpected token < after serve -s build

For me the problem was in the packages.json file. The "homepage" parameter i gave was incorrect. Changing this to the correct heroku URL solved the issue.

"homepage": "https://myapp.herokuapp.com/"

Hope this addition is helpful.

answered Feb 13 '19 at 09:33

Michael Morrison

1,186
1
10
8

1

you're an absolute legend – S-- Sep 13 '20 at 17:41
1

Yes, i agree, you're an absolute legend :) – Aman Deep Oct 03 '20 at 11:38
2

Or just add `PUBLIC_URL=https://myapp.herokuapp.com/` as `.env` Environment variable – User Rebo Mar 03 '21 at 23:45

score 37 · Accepted Answer · answered Jan 26 '19 at 04:00

I ended up finding an answer here: https://github.com/facebook/create-react-app/issues/1812

I trimmed down the full solution from above, but I changed:

app.use(express.static('client/build'));
app.get("*", (req, res) => {
    res.sendFile(require('path')
        .resolve(__dirname, 'client', 'build', 'index.html'));
})

to:

const root = require('path').join(__dirname, 'client', 'build')
app.use(express.static(root));
app.get("*", (req, res) => {
    res.sendFile('index.html', { root });
})

It's definitely a bit strange to me that the first block didn't work. I assume it has something to do with the relative links in my React project since I do get an index.html file delivered to browser, despite getting the error. Maybe a completely static file would work with the first block, but I'd be interested to know if that's accurate.

Perfect, thanx! My problem was that I forgot to include `app.use(express.static('client/build'));` — JSEvgeny, Dec 07 '19 at 15:10
The question does not make an assumption of which server we use though. What if I have a .net core server? — Thanasis Ioannidis, May 17 '20 at 14:14

score 36 · Answer 3 · answered Dec 16 '19 at 18:27

36

just remove

"homepage": "your app url "

from package.json to fix it

answered Dec 16 '19 at 18:27

Shashwat Gupta

5,071
41
33

yes worked for me, though don't fully understand why! – Nick Hingston Apr 29 '20 at 19:23
3

so when I DO need to serve from a different subpath what should I do? That's not really an acceptable solution. – Thanasis Ioannidis May 15 '20 at 08:57
You can check my answer :) – DevLoverUmar Feb 03 '21 at 15:20
I cant find homepage in my package.json, if i host the site in port 5000 it works but it doesnt work in port 4000 – DjBillje Official Feb 08 '21 at 10:36
spend 4 hours to come to this answer – Akbar Kautsar Oct 26 '22 at 18:06
It really helped me! – Sinbad lo Aug 05 '23 at 03:02

DevLoverUmar · Answer 4 · 2020-11-25T10:39:06.377

20

Remove the "homepage": "app-url" from package.json. Absence of homepage in package.json will assume that it will be hosted at the server root, or you will serve the build with serve -s build.

And Yes, specifying homepage will be helpful when you are going to deploy the App in a sub-directory of the server root.

To host your app on the IIS with the name somedomain.net and your solution already has a Web API project.

You will map the solution folder with the main Web app i.e., somedomain.net
You will convert the Web API project to Application from IIS.
Then you will convert the build folder of React App to web App just like Web API
To make front-end App working specify the "homepage": "somedomain.net/React-Project/Client-App/build"

edited Nov 25 '20 at 10:39

answered Aug 20 '20 at 05:38

DevLoverUmar

11,809
11
68
98

1

Thank you so much, I spent so much time figuring this out. – mszan Jan 20 '21 at 19:30
I cant find homepage in my package.json, if i host the site in port 5000 it works but it doesnt work in port 4000 – DjBillje Official Feb 08 '21 at 10:36
you're a hero, take my +1 – caub Dec 31 '21 at 16:37

score 5 · Answer 5 · answered Jun 14 '19 at 09:07

I created a build version of react app using "npm run build". I have a server (node/express). I wanted to include the build in server side and deploy to heroku. What i did is copied build folder to server root folder and used code in server side startup file:

app.get('/*', function (req, res, next) {
    if (!req.path.includes('api'))
        res.sendFile(path.join(__dirname, 'build', 'index.html'));
    else next();
});

I was getting the same error. So i just set the path for static contents at starting:

var app = express();
//here below
app.use(express.static(path.join(__dirname, 'build')));

And my static index.html was served fine and was able to find resources css and js.

George · Answer 6 · 2022-01-12T13:05:13.503

UPDATE:

Recently I need to deploy create-react-app project to subpath of client's domain which is http://example.com/foo/bar

This approach is using Nginx, React-Router.

Add PUBLIC_URL to .env file.

    + PUBLIC_URL=/foo/bar

Add basename to <BrowserRouter>.

    - <BrowserRouter>
    + <BrowserRouter basename={process.env.PUBLIC_URL}>

Change your Nginx config.

    location /foo/bar {
        alias /path/to/build;
        try_files $uri /$uri /foo/bar/index.html;
    }

Here is a create-react-app document about how to build with .env: Customizing Environment

Hope this solution helps!

Ran into the same issue when I want to deploy the static build of a create-react-app project to my linux server.

I solved with this issue comment on cra's github and the cra's official document about how to deploy production build.

For example:

I want to put the production build website under something like http://example.com/foo/bar.

When I deploy without changing any default settings, I will get this "Uncaught SyntaxError: Unexpected token <" error and nothing shows up on the screen.

Here is the solution:

Add homepage parameter to your package.json.

    + "homepage": "/foo/bar"

Add "/foo/bar" to all of your static resources in css which will be like:

    .dummyimage {
     - content: url('/dummyimage.jpg');
     + content: url('/foo/bar/dummyimage.jpg');
    }

Add "/foo/bar" to all of your links and routes.

    - linkTo: '/contact'
    + linkTo: '/foo/bar/contact'

Changing a little of your serve program's code, in node.js/express it will be like:

    - app.use(express.static(path.join(__dirname, '/build')));
    + app.use('/foo/bar/', express.static(path.join(__dirname, '/build')));

Build again.
Deploy build/ to the server.
Restart your serve program, like node.js/express.

Problem solved!!

Hope this solution is helpful.

so any time I want to deploy to different url I have to change source code? This is not acceptable solution — Thanasis Ioannidis, May 15 '20 at 08:56
Thanks for replying. I think different url means different project, and each project need their own settings. — George, May 17 '20 at 06:49
Many times yes. But there are other times where you want to deploy your project on different customers' set ups. — Thanasis Ioannidis, May 17 '20 at 14:08
Understood. My answer works for my situation and environment for now. I will update my answer till I found a way easier to change those settings. I guess global variables will be a good start. Anyway, thanks for your feedback! — George, May 20 '20 at 14:43

score 3 · Answer 7 · answered Aug 24 '20 at 13:06

I had faced the same issue when deploying my react build to production. After spending hours trying to figure out what went wrong on a previously working code, I figured out a mistake I made in deployment.

I hadn't copied the folder static inside build to the server because I used scp build/* to copy the build folder in place of scp -r build/*.

I understand that this is not the exact answer to the question asked here. But I had tried out almost all possible options from answers given by experts here before I noticed the error I was making. Hence, adding this here as a pointer to anyone facing similar issue to verify the deployment steps as well.

Karthikeyan Ganesan · Answer 8 · 2022-05-27T11:51:32.200

3

Just remove homepage key in package.json and also don't forgot to remove the basename in BrowserRouter, if you're using the react router.

That's it. It's working

edited May 27 '22 at 11:51

answered Jan 04 '22 at 06:49

Karthikeyan Ganesan

1,901
20
23

score 1 · Answer 9 · answered Jul 23 '20 at 11:59

i have faced kind of same issue when i want deploy my react app to github-pages :- its need's follow few guidelines

Repository name should be in small latter
If project name same as repo name that usefull
addd { "predeploy": "npm run build", "deploy": "gh-pages -d build" } on package.json
add homepage script at the starting of the package.json

{ "homepage": "http://[Username].github.io/[reponame]", "name": "--", "version": "--", "private": boolean, }

Shubham Dubey · Answer 10 · 2022-10-16T14:37:07.067

As most of us have already suggested removing homepage property from package.json

Let me explain, why it worked in my case:

Earlier I had setup my project to be hosted on Github pages and as a result, it had homepage property set to something like "https://shubhamshd.github.io/supplyChainApp"

However as there are known navigational errors mainly related to BrowserRouter package on Github-pages, I had to switch to other hosting platforms.

And as I forgot to remove the homepage property, deployment did not work on any of the platforms like Vercel or Netlify.

It was after long hours of search and trial, that I finally stumbled upon this thread, specifically the @Shashwat Gupta and finally managed to resolve it by removing the unwanted homepage property.

score 0 · Answer 11 · answered Jan 31 '20 at 19:00

If you are deploying your client to S3, when deploying with react-deploy-s3, assign the distribution-id from CloudFront

react-deploy-s3 deploy \
  --access-key-id XXXXXXXXXXXXXXXXX \
  --secret-access-key XXXXXXXXXXXXXXXXXXXXXXXX \
  --bucket XXXXXXX \
  --region us-east-1 \
  --distribution-id XXXXXXXXXXXXX                        <---

Create-React-App build - "Uncaught SyntaxError: Unexpected token <"

11 Answers11

UPDATE:

Linked