React/Node Uncaught SyntaxError: Unexpected token <

问题

I've tried everything but I'm a bit lost on where I should look into this issue.

What happens is that once you build the react app and deploy it (using node/express), it works perfectly. However, if you build again and take the build folder to the node server, it gives me that syntax error. This only happens if your browser already opened the app once.

I've done research and people were saying that the browser is trying to load the older static files and that's why this occurs. None of their solutions worked though from what I've tried.

I would very much appreciate anyone's help with this issue.

Cheers

Update

As Davin suggested. I looked into the chrome devtools and here is what I got back in the response

<!DOCTYPE html>
<html lang="en" id="html">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <script src="/js/modernizr.js"></script>
    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" href="/favicon.ico">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/css/mega-nav.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css">
    <title>Q Parts</title>
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/main.css" rel="stylesheet">
    <link href="/static/css/main-ar.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-3.0.1.min.js"></script>
    <script src="/js/jquery.mobile.custom.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/main.js"></script>
    <script>$(document).ready(function () { $(".has-children").hover(function () { $(".overlay-lg").addClass("is-visible") }, function () { $(".overlay-lg").removeClass("is-visible") }), $(".cd-primary-nav li").click(function () { $(".cd-primary-nav").animate({ scrollTop: $(".nav-is-visible").offset().top }, "200") }) })</script>
    <script type="text/javascript" src="/static/js/main.957b5c6e.js"></script>
</body>

</html>

回答1:

This error almost always means that some code is trying to JSON.parse something that is an HTML document.

It is very difficult to know what is happening based on the information you have provided.

I'd suggest to look at the chrome devtools Network tab, and see what call to the server is generating the error. Look at the response, it is probably HTML when js is expected.

回答2:

There are two things I see that might be the problem. One, I see from your comment that the code to handle the response is res.sendFile(${__dirname}/${buildPath}/index.html I think what you want is actually

res.sendFile(`${__dirname}/${buildPath}/index.html` // Note the backticks

If that's not it, I would think that you are serving that same HTML file to requests for your .js, .css, etc files. Are you using some type of static file middleware? If you use that, it will serve an actual file if it exists on the server, and serve your index.html file for everything else.

To check, you can open your chrome developer tools and look at the request for your javascript file (main.js or whatever you have it named). Is it the correct javascript, or is it the HTML from index.html? If it is the HTML, you need to look at this, assuming you are using express server: https://expressjs.com/en/starter/static-files.html

回答3:

Thank you everyone, for helping me out with this issue. I took @Davin's suggestion and opened the dev tools (in chrome). I googled the same issue but added _sw-precache. Eventually, I found people were facing the same issue so here is what they suggested:

Just add <base href="/" /> into the of my index.html fixed it for me.

https://github.com/webpack/webpack/issues/2882#issuecomment-280906981

来源：https://stackoverflow.com/questions/55222722/react-node-uncaught-syntaxerror-unexpected-token

标签

node.js

reactjs

express

Webpack