typescript - Vue3 Uncaught SyntaxError: Ogiltig eller oväntad token visas i webbläsarkonsolen varje gång jag laddar om sidan

Jag bygger en webbplats med Vue3, Typescript, Vue-router och Vite. Appen är hostad på en Apache-webbserver. Appen byggs framgångsrikt och fungerar som avsett på min lokala dator.

Men när jag flyttar byggnaden till produktionsservern kraschar den när sidan laddas om med följande fel: Uncaught SyntaxError: Invalid or unexpected token som kommer från js-filen som Vue bygger. När jag tittar på var felet är, är det inte läsbart för människor. Också när detta fel inträffar visar webbsidan bara en tom skärm.

Package.json

{
  "name": "enigma-vue",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-balloon": "^38.1.0",
    "@ckeditor/ckeditor5-build-balloon-block": "^38.1.0",
    "@ckeditor/ckeditor5-build-classic": "^38.1.0",
    "@ckeditor/ckeditor5-build-decoupled-document": "^38.1.0",
    "@ckeditor/ckeditor5-build-inline": "^38.1.0",
    "@fortawesome/fontawesome-svg-core": "^6.5.1",
    "@fortawesome/free-brands-svg-icons": "^6.5.1",
    "@fortawesome/free-regular-svg-icons": "^6.5.1",
    "@fortawesome/free-solid-svg-icons": "^6.5.1",
    "@fortawesome/vue-fontawesome": "^3.0.5",
    "@fullcalendar/daygrid": "^5.11.3",
    "@fullcalendar/interaction": "^5.11.3",
    "@fullcalendar/list": "^5.11.3",
    "@fullcalendar/timegrid": "^5.11.3",
    "@fullcalendar/vue3": "^5.11.2",
    "@headlessui/vue": "^1.7.13",
    "@vuelidate/core": "^2.0.0",
    "@vuelidate/validators": "^2.0.0",
    "axios": "^1.5.0",
    "chart.js": "^3.9.1",
    "dayjs": "^1.11.5",
    "dropzone": "^6.0.0-beta.2",
    "flat": "^5.0.2",
    "highlight.js": "^11.6.0",
    "js-beautify": "^1.14.6",
    "leaflet": "^1.9.3",
    "leaflet.markercluster": "^1.5.3",
    "litepicker": "^2.0.12",
    "lucide": "^0.90.0",
    "lucide-vue-next": "^0.95.0",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.23",
    "pinia-plugin-persistedstate": "^3.2.0",
    "simplebar": "^5.3.9",
    "tabulator-tables": "^5.3.4",
    "tiny-slider": "^2.9.4",
    "tippy.js": "^6.3.7",
    "toastify-js": "^1.12.0",
    "tom-select": "^2.2.0",
    "vue": "^3.3.4",
    "vue-router": "^4.1.6",
    "vue3-dropzone": "^2.1.2",
    "xlsx": "^0.18.5",
    "zoom-vanilla.js": "^2.0.6"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "@types/dropzone": "^5.7.8",
    "@types/flat": "^5.0.2",
    "@types/js-beautify": "^1.13.3",
    "@types/leaflet": "^1.9.3",
    "@types/leaflet.markercluster": "^1.5.1",
    "@types/lodash": "^4.14.195",
    "@types/nprogress": "^0.2.3",
    "@types/tabulator-tables": "^5.4.8",
    "@types/toastify-js": "^1.11.1",
    "@vitejs/plugin-vue": "^4.2.3",
    "autoprefixer": "^10.4.14",
    "lodash": "^4.17.21",
    "postcss": "^8.4.25",
    "postcss-advanced-variables": "^3.0.1",
    "postcss-import": "^15.1.0",
    "postcss-nesting": "^12.0.0",
    "tailwind-merge": "^1.13.2",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.1.6",
    "vite": "^4.4.2",
    "vue-tsc": "^1.8.4"
  }
}

Vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    commonjsOptions: {
      include: ["tailwind.config.js", "node_modules/**"],
    },
  },
  optimizeDeps: {
    include: ["tailwind-config"],
  },
  plugins: [vue()],
  resolve: {
    alias: {
        "tailwind-config": path.resolve(__dirname, "./tailwind.config.js"),
        "@": path.resolve(__dirname, "./src") 
      },
  },
  base: '/'
})

Index.html-fil skapad av Vite

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <base href="/" />
    <script type="module" crossorigin src="/assets/index-2c92196c.js"></script>
    <link rel="stylesheet" href="/assets/index-14613a76.css">
  </head>
  <body>
    <div id="app"></div>
    <div id="modal"></div>
  </body>
</html>

Bild av felkoden längst ner och den tomma sidan den producerar

Hittills har jag försökt:

Tar bort .htaccess-filen för att se om det orsakar problem
Att lägga till <base href="/" /> till filen index.html som rekommenderades i en liknande biljett
Byta Vue Router-historik för att se om det var problemet
Ta bort och lägga till basvägsalternativet i vite.config.ts

Alla dessa ändringar hade ingen effekt på felet.

Jag har testat det på:

Google Chrome
Modig
Kant
FireFox - Jag får ett något annat fel Uncaught SyntaxError: identifier börjar omedelbart efter numeriskt literal

Jag skulle verkligen uppskatta all hjälp eftersom jag står helt handfallen med det här.

Tack i förväg

Svar #1

Felmeddelandet pekar på den (ogiltiga) koden 1.toString i din javascript-fil. Genom att söka efter denna text och 'syntax error' hittade jag denna tråd.

Det verkar som att något minifierar om din kod efter att Vite först har minifierat den, och det orsakar ett syntaxfel. I tråden ovan var det Cloudflare.

Försök att inaktivera Cloudflare-förminskningen och se om det löser ditt problem.