CODEWITHSUNDEEP
vue.jsfrontendvuejs3vite
AhSoHard
AhSoHard

Reputation: 105

Vue3 Vite app: Failed to parse source for import analysis because the content contains invalid JS syntax

I got a Vue3 application with Vite as the build tool. I got this error when I tried to build the application: enter image description here

However, I did install the @vitejs/plugin-vue as shown in my package.json and I believe the version of @vitejs/plugin-vue is 5.0.2, a quite new one:

{
  "name": "mlb.web",
  "version": "0.0.0",
  "private": true,
  "charset": "utf-8",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^7.0.1",
    "ant-design-vue": "^4.0.8",
    "axios": "^1.6.3",
    "vue": "^3.3.11",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.6.2",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "unplugin-auto-import": "^0.17.3",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.0.10"
  }
}

And here is my vite.config.js, and I believe the root cause is located within it:

import { fileURLToPath, URL } from 'node:url';

import defineConfig from 'vite';
import vue from '@vitejs/plugin-vue';
import fs from 'fs';
import path from 'path';
import child_process from 'child_process';
import Components from 'unplugin-vue-components/vite';
import AntDesignVueResolver from 'unplugin-vue-components/resolvers';
import AutoImport from "unplugin-auto-import/vite"

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            imports: ['vue', 'vue-router'],
            dts: "src/auto-import.d.ts",
        }),
        Components({
            dirs: ["src/components/"],
            include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
            resolvers: [
                AntDesignVueResolver({
                    importStyle: false,
                    resolveIcons: true
                }),
            ],
        }),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        ...
    }
})

Can anyone see what's happening here and why I got this error?

Upvotes: 0

Views: 1630

Answers (1)

AhSoHard
AhSoHard

Reputation: 105

Finally, I found the reason for this stupid issue. It is because my project name contains a ' mark. And I got an auto import plugin. When the plugin tries to resolve a path of a component, the path will be resolved as

import xxxx from 'folder1/folder2/aaaa'sAAAA/xxxx.vue'

As you can see here, there is an extra ' mark in the auto-generated path, which causes a simple syntax issue. Silly Me!

Upvotes: 1

Related Questions