Menu
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>
595
Uncaught SyntaxError: Unexpected token Aug 24 2016Ibrahim Diallo This is a common error in JavaScript, and it is hard to understand at first why it happens. But if you bear with me and remember that Bugs are a good thingyou will be on your way in no time. TL;DR The JavaScript file you are linking to is returning 404 page.
3 ReactJS: Uncaught SyntaxError: Unexpected token ( 284 "SyntaxError: Unexpected token < in JSON at position 0"
Sorry, something went wrong. From the Error message, it seems like your server is returning a html file response to your 4.*.chunk.js request, most likely it is returning index.html which starts with a < token that causes the SyntaxError.
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
185
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
