>source

모든 것을 시도했지만이 문제를 어디에서 조사해야하는지 조금 잃어 버렸습니다.

React 앱을 빌드하고 배포 (노드/표현식 사용)하면 완벽하게 작동합니다. 그러나 다시 빌드하고 빌드 폴더를 노드 서버로 가져 가면 구문 오류가 발생합니다. 브라우저에서 이미 앱을 한 번만 연 경우에만 발생합니다.

연구를 해본 결과 사람들은 브라우저가 오래된 정적 파일을로드하려고하는데 이것이 발생하는 이유입니다. 그들의 시도 중 어느 것도 내가 시도한 것에서 효과가 없었습니다.

이 문제에 대한 다른 사람의 도움에 감사드립니다.

건배

업데이트

Davin이 제안한대로. 크롬 devtools를 살펴본 결과 여기에 응답이 있습니다.

<!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

    이 오류거의 항상은 일부 코드가 JSON.parse 를 시도하고 있음을 의미합니다  HTML 문서 인 것

    제공 한 정보를 바탕으로 무슨 일이 일어나고 있는지 알기가 매우 어렵습니다.

    chrome devtools 네트워크 탭을보고 서버에 어떤 호출이 오류를 생성하는지 확인하십시오. 응답을 살펴보십시오. js가 예상 될 때 아마도 HTML 일 것입니다.

  • 답변 # 2

    문제가 될 수있는 두 가지가 있습니다. 하나, 귀하의 의견에서 응답을 처리하는 코드는 res.sendFile(${__dirname}/${buildPath}/index.html 입니다.  당신이 원하는 것은 실제로

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

    그렇지 않다면 .js, .css 등의 파일에 대한 요청에 동일한 HTML 파일을 제공한다고 생각합니다. 어떤 유형의 정적 파일 미들웨어를 사용하고 있습니까? 이 파일을 사용하면 서버에 존재하는 경우 실제 파일을 제공하고 다른 모든 것에 대해서는 index.html 파일을 제공합니다.

    크롬 개발자 도구를 열고 자바 스크립트 파일 (main.js 또는 이름이 지정된 파일)에 대한 요청을 확인할 수 있습니다. 올바른 자바 스크립트입니까, 아니면 index.html의 HTML입니까? HTML 인 경우 다음과 같이 Express 서버를 사용한다고 가정하여이를 확인해야합니다. https://expressjs.com/en/starter/static-files.html

  • 답변 # 3

    감사합니다. 이 문제를 도와주었습니다. @Davin의 제안을 받아 개발 도구 (크롬)를 열었습니다. 나는 같은 문제를 봤지만 _sw-precache 를 추가했다. . 결국 사람들이 같은 문제에 직면하고 있음을 알았으므로 여기에 그들이 제안한 것이 있습니다 :

    <base href="/" /> 만 추가  내 index.html에 넣었습니다.

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

관련 자료

  • 이전 node.js - jwt 인증 - jwt 토큰 도난 방지
  • 다음 xamarin.forms - pwa (프로그레시브 웹 앱) - windows uwp 응용 프로그램에서 pwa 시작