Search code examples
typescriptvuejs3vue-routervitevue-typescript

Vue3 Uncaught SyntaxError: Invalid or unexpected token appears in the browser console whenever I reload the page

I am building a website using Vue3, Typescript, Vue router and vite. The app is hosted on an Apache web server. The app builds successfully and works as intended on my local machine.

However, when I move the build to the production server it breaks when the page reloads with the following error: Uncaught SyntaxError: Invalid or unexpected token which is coming from the js file that Vue builds. When I take a look at where the error is, it's not human readable. Also when this error happens the web page just shows a blank screen.

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 file generated by 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>

Image of the error code at the bottom and the blank page it produces

So far I've tried:

  • Removing the .htaccess file to see if that was causing issues
  • Adding <base href="/" /> to the index.html file as was recommended in a similar ticket
  • Changing the Vue Router history to see if that was the issue
  • Removing and adding the base path option in the vite.config.ts

All of these changes had no effect on the error.

I have tested it on:

  • Google Chrome
  • Brave
  • Edge
  • FireFox - I get a slightly different error Uncaught SyntaxError: identifier starts immediately after numeric literal

I would really appreciate any help as I am at a loss with this one.

Thank you in advance

Solution

  • The error message points to the (invalid) code 1.toString in your javascript file. By searching for this text and 'syntax error' I found this thread.

    It seems that something is re-minifying your code after Vite has minified it first, and that is causing a syntax error. In the above thread it was Cloudflare.

    Try disabling the Cloudflare minification and see if it solves your problem.