J'ai tout essayé, mais je ne sais pas trop où je devrais examiner ce problème.
Ce qui se passe, c'est qu'une fois que vous avez créé l'application react et l'avez déployée (en utilisant node / express), cela fonctionne parfaitement . Cependant, si vous construisez à nouveau et apportez le dossier de construction au serveur de nœud, cela me donne cette erreur de syntaxe. Cela ne se produit que si votre navigateur a déjà ouvert l'application une fois.
J'ai fait des recherches et des gens disaient que le navigateur essayait de charger les anciens fichiers statiques et c'est pourquoi cela se produit. Cependant, aucune de leurs solutions n'a fonctionné d'après ce que j'ai essayé.
J'apprécierais beaucoup l'aide de n'importe qui pour résoudre ce problème.
Cheers
Comme Davin l'a suggéré. J'ai regardé dans les outils de développement de chrome et voici ce que j'ai obtenu dans la réponse
<!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>
p >
3 Réponses :
Cette erreur presque toujours signifie que du code essaie de JSON.parse quelque chose qui est un document HTML.
Il est très difficile de savoir ce qui se passe sur la base des informations que vous avez fournies.
Je suggère de regarder l'onglet Réseau de Chrome devtools et de voir quel appel au serveur génère l'erreur. Regardez la réponse, c'est probablement du HTML lorsque js est attendu.
Merci pour votre suggestion. Je mettrai à jour ma question pour vous montrer ce que je reçois
Je vois deux choses qui pourraient poser problème. Premièrement, je vois dans votre commentaire que le code pour gérer la réponse est res.sendFile ($ {__ dirname} / $ {buildPath} /index.html Je pense que ce que vous voulez est en fait
res.sendFile(`${__dirname}/${buildPath}/index.html` // Note the backticks
Si ce n'est pas le cas, je pense que vous envoyez ce même fichier HTML aux demandes de vos fichiers .js, .css, etc. Utilisez-vous un type de middleware de fichier statique? Si vous l'utilisez , il servira un fichier réel s'il existe sur le serveur, et votre fichier index.html pour tout le reste.
Pour vérifier, vous pouvez ouvrir vos outils de développement Chrome et consulter la demande de votre javascript fichier (main.js ou quel que soit le nom que vous lui avez donné). S'agit-il du javascript correct ou du code HTML de index.html? S'il s'agit du HTML, vous devez examiner ceci, en supposant que vous utilisez le serveur express: https://expressjs.com/en/starter/static-files.html
Merci pour votre réponse. Les backticks étaient censés être là, je ne sais pas pourquoi cela n'a pas été montré. J'ai trouvé la solution à mon problème. Je posterai ma réponse. Merci encore
Merci à tous de m'avoir aidé à résoudre ce problème. J'ai suivi la suggestion de @ Davin et j'ai ouvert les outils de développement (en chrome). J'ai recherché le même problème sur Google, mais j'ai ajouté _sw-precache . Finalement, j'ai découvert que les gens faisaient face au même problème, voici ce qu'ils ont suggéré:
Ajoutez simplement dans le de mon index.html corrigé pour moi.
https://github.com/webpack/webpack/issues/2882 # issuecomment-280906981
Ce mec m'a sauvé la vie!
Habituellement, lorsque cela se produit, cela signifie que votre serveur tente de répondre aux demandes d'actifs non html (fichiers css, js, etc.) en envoyant la page index.html. Votre serveur redirige-t-il toutes les requêtes vers index.html?
Merci pour votre réponse, j'envoie le fichier html sur toute demande. J'ai également mes méthodes API pour que le client les demande. const buildPath = 'public / build'; app.use (itinéraires); app.get ('*', (req, res) => {res.sendFile (
$ {__ dirname} / $ {buildPath} /index.html, err => {if (err) { res.status (500) .send (err)}})});