阅读:3995回复:0
[前端]vite使用提示:Failed to parse source for import analysis because the content contains invalid JS syntax.
使用vite 创建react项目,在开发过程中,遇到如下错误提示:
[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. 原因: Vite在启动时会做依赖的预构建 预构建,运行时默认都只会对jsx与tsx做语法转换。不会对 js 做 jsx 的语法转换。 使用 babel 插件 @babel/plugin-transform-react-jsx ,让Vite在运行时对js文件转换 解决方案: 1. 安装 @babel/plugin-transform-react-jsx 的插件 npm i @babel/plugin-transform-react-jsx 2. 再配置 vite.config.js文件 import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react({ babel: { plugins: ['@babel/plugin-transform-react-jsx'], }, })], server: { host: "0.0.0.0" } }) 3. 再次启动可能遇到如下错误: App.jsx:12 Uncaught ReferenceError: React is not defined 原因:App.jsx中没有引入React , 只需要在提示错误的文件中引入React即可 代码如下: import React,{ useState } from 'react' |
|
最新喜欢:![]()
|