doubleyong
管理员
管理员
  • 最后登录2025-02-06
  • 发帖数1196
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:3995回复:0

[前端]vite使用提示:Failed to parse source for import analysis because the content contains invalid JS syntax.

楼主#
更多 发布于:2022-11-09 14:51
使用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'

最新喜欢:

⌓‿⌓​⌓‿⌓​
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号