Create-React-App build - "Uncaught SyntaxError: Unexpected token <"
ReactjsWebpackJsxCreate React-AppReactjs Problem Overview
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.
Reactjs Solutions
Solution 1 - Reactjs
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.
Solution 2 - Reactjs
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.
Solution 3 - Reactjs
just remove
> "homepage": "your app url "
from package.json to fix it
Solution 4 - Reactjs
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"
Solution 5 - Reactjs
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.
Solution 6 - Reactjs
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.
Solution 7 - Reactjs
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.
Solution 8 - Reactjs
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, }
Solution 9 - Reactjs
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 <---
Solution 10 - Reactjs
Just remove homepage 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