8

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

enter image description here enter image description here

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>

enter image description here

Ahmed Shaaban
  • 345
  • 1
  • 3
  • 11
  • Usually when this happens it means that your server is trying to respond to requests for non-html assets (css, js files, etc) by sending the index.html page. Is your server redirecting all requests to index.html? – djheru Mar 18 '19 at 15:08
  • Thank you for your response, I'm sending the html file on any request. I also have my api methods for the client to request them. const buildPath = 'public/build'; app.use(routes); app.get('*', (req, res) => { res.sendFile(`${__dirname}/${buildPath}/index.html`, err => { if (err) { res.status(500).send(err) } }) }); – Ahmed Shaaban Mar 18 '19 at 15:28

4 Answers4

13

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

Ahmed Shaaban
  • 345
  • 1
  • 3
  • 11
  • I don't know why this works, but I'm so glad I found your answer after days of scrounging on the internet! – Cathy Ha Jan 24 '23 at 22:24
4

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.

Davin Tryon
  • 66,517
  • 15
  • 143
  • 132
2

In my case method with base href in index.html doesn't help. My project has separate repositories for web and server.

Problem was in wrong paths in express config, I have made those changes and app start works:

app.use(express.static(path.join(__dirname, '../../../../web/build'))); // the same directory as below

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../../../../web/build/index.html'));
});
Kamil Naja
  • 6,267
  • 6
  • 33
  • 47
0

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

djheru
  • 3,525
  • 2
  • 20
  • 20
  • Thank you for your response. The backticks were supposed to be there, I'm not sure why it wasn't shown. I found the soution to my issue. I'll post my answer. Thank you again – Ahmed Shaaban Mar 19 '19 at 06:35