解決Vite-React專案中js使用jsx語法報錯的問題

粥裡有勺糖發表於2021-10-12
ViteReactJS

背景

在做存量專案接入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在啟動時會做依賴的預構建
  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的文件,發現其支援傳入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方案

最後

歡迎大家在評論區共享/交流在開發過程中接入Vite時遇到的一些問題與總結的經驗

相關文章