Unexpected token Import after running npm update

I ran npm update on a large codebase recently, and now vite is having some issues compiling my SFC files.

> bedgg-frontend@0.0.0 dev
> vite


  vite v2.9.14 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 208ms.

Unexpected token (1:30)
Unexpected token (1:30) (x2)
12:14:28 PM [vite] Internal server error: Unexpected token (1:30)
  Plugin: vite:vue
  File: /home/ben/projects/bed.gg-frontend/src/views/Profile.vue
  1  |  <script setup lang="ts">
  2  |  import SkinViewer from "@/components/Player/SkinViewer.vue";
     |       ^
  3  |  import LineChart from "@/components/Charts/LineChart.vue";
  4  |  import PlayerStats from "@/components/Stats/Cards/PlayerStats.vue";
      at instantiate (/home/ben/projects/bed.gg-frontend/node_modules/@babel/parser/lib/index.js:72:32)
      at constructor (/home/ben/projects/bed.gg-frontend/node_modules/@babel/parser/lib/index.js:359:12)
      at Object.raise (/home/ben/projects/bed.gg-frontend/node_modules/@babel/parser/lib/index.js:3339:19)
      at Object.unexpected (/home/ben/projects/bed.gg-frontend/node_modules/@babel/parser/lib/index.js:3377:16)
      at Object.getExpression (/home/ben/projects/bed.gg-frontend/node_modules/@babel/parser/lib/index.js:12232:12)
      at Object.getExpression (/home/ben/projects/bed.gg-frontend/node_modules/@babel/parser/lib/index.js:11162:18)
      at Object.parseExpression (/home/ben/projects/bed.gg-frontend/node_modules/@babel/parser/lib/index.js:16618:17)
      at processExp (/home/ben/projects/bed.gg-frontend/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:4979:30)
      at Array.CompilerDOM.transform.nodeTransforms (/home/ben/projects/bed.gg-frontend/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:4949:45)
      at traverseNode (/home/ben/projects/bed.gg-frontend/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2162:41)

to me this seems like a configuration error or some sort of bug with vite. When I updated I went from v2.9.6 to v2.9.14.

vite config

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

import { join, resolve } from "path";
export default defineConfig({
  mode: "development",
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      "@": join(__dirname, "./src"),
    },
  },
  plugins: [
    vue(),
  ],
  define: { "process.env": {} },
  css: {
    preprocessorOptions: {
      scss: { additionalData: `@use "sass:math";@import "@/styles/_variables.scss";` },
    },
  },
});

tsconfig:

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vuetify", "node"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

Any idea why this is happening? I've looked at many Github issues to no avail.

Unexpected token Import after running npm update

0 Answers