While developing a Vue.js 3.0 project using the vite tool, a configuration issue caused the project to run with the following error message:
16:17:27 [vite] page reload main.js
Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
16:17:28 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
Plugin: vite:import-analysis
File: /home/projects/vitejs-vite-der4uu/App.vue
We need to install the plug-in @@vitejs/plugin-vue that uses error prompts.
The solution steps are as follows:
1. Install dependent plug-ins first
npm install @vitejs/plugin-vue -D
2. Then configure the vite project configuration file: vite.config.js
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
});
In this way, we have configured the vite project to recognize the ability to parse single-file components with a .vue suffix.
3. Rerun
npm run dev
This is the problem. It is solved perfectly.
Read More:
- [Solved] Vue3 Error: Cant find variable: GlobalThis
- [Solved] vite package Error: globalThis is not defined
- [Solved] Vite packing error: some chunks are larger than 500kb after minification
- [Solved] Some chunks are bigger warning on vite packaging
- After Vite starts, it will prompt “network: use ` — host ` to expose”, and the service cannot be accessed through network IP
- [Solved] Syntax Error: Error: No ESLint configuration found & TypeError: eslint.CLIEngine is not a constructor
- [Solved] Vue3 process Error: Uncaught ReferenceError: process is not defined
- [Solved] Error: Transform failed with 1 error: error: Invalid option in transform() call: “jsx“
- [Solved] Temporary error: Error: spawn E:\vue3-vite\my-app\node_modules\esbuild\esbuild.exe ENOENT
- [Solved] vue error: error Component name “School“ should always be multi-word vue/multi-word-component-names
- [Solved] Vue Use gzip Package Error: Rule can only have one resource source
- [Solved] Error:Plugin/Preset files are not allowed to export objects, only functions
- [Solved] Component name “login“ should always be multi-word.
- [Solved] Vue item error: Regeneratorruntime is not defined
- Vue-router import Dynamic Module Error [How to Solve]
- [Solved] Vue Start Project Error: ValidationError: webpack Dev Server Invalid Options
- How to Solve Webpack packag iconfont font error
- [Solved] SyntaxError: Cannot use import statement outside a module
- [Solved] error ‘test‘ is assigned a value but never used no-unused-vars
- [Solved] Vue Project Start Error: Support for the experimental syntax ‘jsx‘ isn‘t currently enabled