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

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

[[428448]]

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

背景

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

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

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

报错截图如下

复现问题

初始化demo项目

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

目录如下

  1. ├── index.html 
  2. ├── package.json 
  3. ├── src 
  4. |  ├── App.css 
  5. |  ├── App.tsx 
  6. |  ├── favicon.svg 
  7. |  ├── index.css 
  8. |  ├── logo.svg 
  9. |  ├── main.tsx 
  10. |  └── vite-env.d.ts 
  11. ├── tsconfig.json 
  12. └── vite.config.ts 

启动

  1. 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文件转换

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

  1. export default defineConfig({ 
  2.   build:{ 
  3.     rollupOptions:{ 
  4.       input:[] 
  5.     } 
  6.   }, 
  7.   optimizeDeps: { 
  8.     entries: [], 
  9.   }, 
  10. }) 

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

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

添加插件

  1. import { defineConfig } from 'vite' 
  2. import react from '@vitejs/plugin-react' 
  3.  
  4. // https://vitejs.dev/config/ 
  5. export default defineConfig({ 
  6.   plugins: [react({ 
  7.       babel: { 
  8.         plugins: ['@babel/plugin-transform-react-jsx'], 
  9.       }, 
  10.   })], 
  11. }) 

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

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

  1. 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

 

责任编辑:武晓燕 来源: 粥里有勺糖
相关推荐

2017-07-04 19:02:17

ReacRedux 项目

2021-08-26 00:33:29

React JSX语法

2021-05-24 06:00:20

ReactJSXJS

2020-11-30 06:18:21

React

2023-02-02 08:41:14

React团队Vite

2021-05-31 17:37:26

ViteReactesbuild

2024-01-26 08:06:43

2023-12-21 08:51:37

防抖节流Vue.js

2023-04-07 15:12:46

ReactReact-Intl

2024-03-06 11:14:13

ViteReact微前端

2021-05-21 09:34:40

React React 17前端

2023-02-03 08:36:35

2021-09-14 07:06:13

React项目TypeScript

2023-07-17 06:26:45

Strve 项目JSX语法

2022-08-15 18:22:22

JS代码

2022-06-21 07:41:08

FCPJS代码

2009-06-24 17:34:58

使用JSF的经验

2023-04-14 09:01:23

2011-09-05 14:26:43

PhoneGap插件

2024-01-16 09:56:25

点赞
收藏

51CTO技术栈公众号