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 projec

Answer 1

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:

1) Add homepage parameter to your package.json.

+ "homepage": "/foo/bar"

2) 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');
}

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

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

4) 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')));

5) Build again.

6) Deploy build/ to the server.

7) Restart your serve program, like node.js/express.

Problem solved!!

Hope this solution is helpful.

Answer 2

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

1. Repository name should be in small latter

2. If project name same as repo name that usefull

3. affffd { "predeploy": "npm run build", "deploy": "gh-pages -d build" } on package.json

4. add homepage script at the starting of the package.json

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

Answer 3

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.

Answer 4

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.

Answer 5

just remove

"homepage": "your app url "

from package.json to fix it

Answer 6

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.

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