解决Vite-React项目中Js使用Jsx语法报错

本文转载自微信公众号「粥里有勺糖」，作者粥里有勺糖。转载本文请联系粥里有勺糖公众号。

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、成都网站设计、成都外贸网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的文县网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

背景

在做存量项目接入Vite测试时发现，存量(老)项目中很多是直接在js中书写jsx语法，使用Vite启动时就会抛出一堆问题Failed to parse source。

不嫌麻烦可以跑个脚本批量修改文件类型，这是一个解决办法。

为了刨根知底，同时为了存量项目最低成本的接入Vite使用，尽力避免修改业务代码。得寻找其它办法解决一下。

报错截图如下

复现问题

初始化demo项目

 
 
 
 
  
  
  
  # npm 6.x
  
  
  
  npm init vite@latest my-react-app --template react-ts
  
  
  
  
  
  
  
  # npm 7+, extra double-dash is needed:
  
  
  
  npm init vite@latest my-react-app -- --template react-ts
  
  
  
  
  
  
  
  # yarn
  
  
  
  yarn create vite my-react-app --template react-ts

目录如下

 
 
 
 
  
  
  
  ├── index.html
  
  
  
  ├── package.json
  
  
  
  ├── src
  
  
  
  |  ├── App.css
  
  
  
  |  ├── App.tsx
  
  
  
  |  ├── favicon.svg
  
  
  
  |  ├── index.css
  
  
  
  |  ├── logo.svg
  
  
  
  |  ├── main.tsx
  
  
  
  |  └── vite-env.d.ts
  
  
  
  ├── tsconfig.json
  
  
  
  └── vite.config.ts

启动

 
 
 
 
  
  
  
  npm run dev

页面正常，接下来将App.tsx修改为App.js

将会得到上述的报错

原因

Vite在启动时会做依赖的预构建[1]
预构建，运行时默认都只会对jsx与tsx做语法转换。不会对js做jsx的语法转换。

解决方案

修改依赖预构建的配置
使用babel插件@babel/plugin-transform-react-jsx，让Vite在运行时对js文件转换

按照文档描述在配置文件添加一点配置

 
 
 
 
  
  
  
  export default defineConfig({
  
  
  
    build:{
  
  
  
      rollupOptions:{
  
  
  
        input:[]
  
  
  
      }
  
  
  
    },
  
  
  
    optimizeDeps: {
  
  
  
      entries: [],
  
  
  
    },
  
  
  
  })

通过阅读@vite/plugin-react的文档[2],发现其支持传入babel插件

 
 
 
 
  
  
  
  npm i @babel/plugin-transform-react-jsx

添加插件

 
 
 
 
  
  
  
  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'],
  
  
  
        },
  
  
  
    })],
  
  
  
  })

再次启动验证,发现一个报错

原因是没有在App.js中引入React,咱们引入一下

 
 
 
 
  
  
  
  import React,{ useState } from 'react'

大功告成

总结

两种处理方案

文件后缀 js => jsx
修改依赖预构建配置，再添加babel插件@babel/plugin-transform-react-jsx

第二种方法会一定程度影响项目的启动速度。读者可以根据实际项目情况pick方案

分享标题：解决Vite-React项目中Js使用Jsx语法报错
当前网址：http://www.mswzjz.cn/qtweb/news5/17055.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：贝锐智能

贝锐智能技术为您推荐以下文章