Create-React-App build - “Uncaught SyntaxError: Unexpected token <”

问题

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.

回答1:

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.

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/54340240/create-react-app-build-uncaught-syntaxerror-unexpected-token