本文转载自微信公众号《粥里有一勺糖》，作者粥里有一勺糖。转载本文请联系公众号在粥里。背景在已有项目的Vite测试中，发现很多已有（老）项目在js中直接写了jsx语法，启动Vite会抛出一堆Failedtoparsesource的问题。如果不嫌麻烦，可以运行脚本批量修改文件类型。这是一个解决方案。为了追根究底，同时为了现有项目以最低成本接入Vite，尽量避免修改业务代码。只好另想办法解决了。报错截图如下，重现问题。初始化demo工程#npm6.xnpminitvite@latestmy-react-app--templatereact-ts#npm7+，需要extradouble-dashis：npminitvite@latestmy-react-app----templatereact-ts#yarnyarncreatevitemy-react-app--templatereact-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启动npmrundev页面正常，然后AppChanging。tsx到App.js会导致上述错误。Vite将在启动时预构建[1]个依赖项。默认情况下，它只会在运行时转换jsx和tsx语法。它不会对js进行jsx语法转换。解决方案修改依赖预建配置使用babel插件@babel/plugin-transform-react-jsx让Vite在运行时转换js文件根据文档说明在配置文件中添加一点配置exportdefaultdefineConfig({build:{rollupOptions:{input:[]}},optimizeDeps:{entries:[],},})通过阅读@vite/plugin-react的文档[2]，发现其支持传入babel插件npmi@babel/plugin-transform-react-jsx添加插件import{defineConfig}from'vite'importreactfrom'@vitejs/plugin-react'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[react({babel:{plugins:['@babel/plugin-transform-react-jsx'],},})],})再次开始验证，发现报错是因为App.js中没有引入React。让我们引入importReact，{useState}from'react'就大功告成了。总结两种处理方案文件后缀js=>jsx修改依赖预构建配置，然后添加babel插件@babel/plugin-transform-react-jsx第二种方式会一定程度上影响项目的启动速度。读者可以根据实际项目情况选择解决方案参考[1]依赖的pre-build：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
