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

[[428448]]

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

背景

在做存量项目接入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

将会得到上述的报错

原因

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

解决方案

1. 修改依赖预构建的配置
2. 使用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' 
 
 
 
 

大功告成

总结

两种处理方案

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

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

参考资料

[1]依赖的预构建: https://cn.vitejs.dev/guide/dep-pre-bundling.html#the-why

[2]文档: https://github.com/vitejs/vite/tree/main/packages/plugin-react

[3]源码地址: https://github.com/ATQQ/demos/tree/main/vite-react-js