React App hosted in Firebase Hosting - Uncaught SyntaxError: Unexpected token '<'

Question

我已经看到至少 4 个线程有同样的问题并尝试了他们的解决方案，但是 none 对我有用。

当我将 React 应用程序部署到 firebase 托管时，出现空白页面和以下错误：

让它工作的唯一方法是清空缓存并硬重新加载，但再次重新加载会导致完全相同的错误。我仔细检查了我的构建 html 使用 %PUBLIC_URL% 从正确的文件夹中获取资产作为 public/index.html

中路由的一部分

我也把manifest和serviceWorker函数的整个注册都注释掉了，然后重建部署了，还是一样的问题

此时我有点傻眼了，因为我认为这是由整个缓存系统引起的，现在我禁用了它，它仍然存在，所以我不知道这整个事情到底是如何工作的

我的firebase.json

{
  "hosting": {
    "public": "build",
    "site": "react-pukinn",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      { "source":"/serviceWorker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
    ]
  }
}

我的serviceWorker.js:

let CACHE_NAME = 'pukinn';
const urlsToCache = [
    '/',
    '/index.html',
];
self.addEventListener('install', (event) => {
    // Perform install steps
    event.waitUntil(
    caches.open(CACHE_NAME)
        .then(function(cache) {
            console.log('Opened cache');
            return cache.addAll(urlsToCache);
        })
    );
});

self.addEventListener('fetch', (event) => {
    event.respondWith(caches.match(event.request)
        .then(function(response) {
            if (response) {
                return response;
            }
                return fetch(event.request);
            })
    );
});

self.addEventListener('install', (event) => {
    // Perform install steps
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function(cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
        })
    );
    self.skipWaiting();
});

manifest.json

{
  "short_name": "Púkinn",
  "name": "Púkinn",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "icons/knight_demon-192x192-min.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "icons/knight_demon-512x512-min.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "index.html",
  "display": "standalone",
  "theme_color": "#ed1c24",
  "background_color": "#212121"
}

Answer 1

我发现了问题。我的 serviceWorker.js 文件位于项目的根目录中，而不是我的 ./src 文件夹中。所以令人高兴的是，在构建时它没有将它包含到用于托管的 build 文件夹中。我真的犯了一个愚蠢的错误。

React App hosted in Firebase Hosting - Uncaught SyntaxError: Unexpected token '<'

React App hosted in Firebase Hosting - Uncaught SyntaxError: Unexpected token '<'

reactjs

caching

service-worker

firebase-hosting