解决Vite-React项目中js使用jsx语法报错的问题
2021-10-12 19:07
771 查看
背景
在做存量项目接入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在启动时会做依赖的预构建
预构建
,运行时
默认都只会对jsx
与tsx
做语法转换。不会对js做jsx的语法转换。
解决方案
- 修改依赖预构建的配置
- 使用babel插件
@babel/plugin-transform-react-jsx
,让Vite在运行时对js文件转换
按照文档描述在配置文件添加一点配置
export default defineConfig({ build:{ rollupOptions:{ input:[] } }, optimizeDeps: { entries: [], }, })
通过阅读
@vite/plugin-react的文档,发现其支持传入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时遇到的一些问题与总结的经验
相关文章推荐
- CKEditor使用js结合CKFinder实现上传,解决项目路径问题
- ReactNative踩坑日志——使用async/await语法解决网络请求的异步导致的指令执行顺序错乱问题
- React服务器端渲染框架next.js项目实战及部署上下文context问题解决办法
- 二。express+webpack+react (主要解决使用jsx文件的问题)
- vue项目中使用pdf.js,通过解析后台base64格式文件解决跨域问题
- swipe.js工具包实现手机web滑动轮播效果存在jQuery对象不能使用问题并解决(个人项目经验)
- React 使用browserHistory项目访问404问题解决
- ReactJS & dva 项目常见报错问题与解决方法 (react-router 4)
- 解决Protege使用中的一个问题:从已有owl文件建立项目失败(w3china)
- Visual Studio 2008 Beta2 起始页中 不显示(Recent Projects)最近使用的项目问题,解决办法。
- JS/Jquery使用过程中遇到的问题和解决方法
- 使用JS+WebBrowser解决Web打印问题(完成事件)
- js正则:匹配一个html的tagname的开始标签,主要是解决包含<>(正则的效率问题建议不使用)
- js使用 mailto 发邮件时当前页短暂空白问题解决
- 如何解决ecshop中jquery冲突?使用jquery.json.js代替transport.org.js中部份代码,完美解决问题。
- 在win7下使用zend studio 7.1.0,解决汉化、中文乱码、js等问题
- IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题
- 【原】使用iScroll.js解决ios4下不支持position:fixed的问题
- 解决eclipse中原有项目中js验证问题致使build不完的问题
- 关于CUDA C 项目中“ error C2059: 语法错误:“<” ”问题的解决方法