Nuxt 2项目接入vite遇JSX解析及vite.createFilter报错问题

问题根源 #

1. 初始JSX错误：esbuild默认未启用JSX解析规则，.js文件被当作普通JS处理，无法识别JSX语法
2. vite.createFilter报错：你安装的@vitejs/plugin-vue-jsx@3.0.0要求Vite 4.x+，但nuxt-vite@0.3.5依赖的是Vite 2.x，而Vite 2中不存在createFilter API，版本不兼容导致报错

解决步骤 #

1. 降级JSX插件到兼容版本 #

卸载高版本插件，安装适配nuxt-vite 0.3.5的1.x版本：

npm uninstall @vitejs/plugin-vue-jsx
npm install @vitejs/plugin-vue-jsx@1.3.0 -D

2. 配置Nuxt项目 #

提供两种可选方案，二选一即可：

方案一：使用vue-jsx插件（降级后）

在nuxt.config.js中引入并配置插件：

import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  buildModules: ['nuxt-vite'],
  vite: {
    plugins: [vueJsx({
      // 可选配置：开启事件自动转换、属性合并等
      transformOn: true,
      mergeProps: true
    })]
  }
}

方案二：直接配置esbuild loader（无需插件）

如果不需要额外JSX特性，直接通过esbuild loader规则启用JSX解析：

export default {
  buildModules: ['nuxt-vite'],
  vite: {
    esbuild: {
      loader: {
        '.js': 'jsx'
      }
    }
  }
}

3. 确认依赖版本 #

最终devDependencies应如下：

"devDependencies": {  
  "@vitejs/plugin-vue-jsx": "^1.3.0",
  "nuxt-vite": "^0.3.5",
  "nuxt": "^2.15.3"
}

额外提示 #

• 若你的JSX文件使用.jsx/.tsx后缀，esbuild会自动识别为JSX格式，无需配置loader
• 用TypeScript写JSX时，需在tsconfig.json中设置"jsx": "preserve"或"jsx": "react-jsx"

内容的提问来源于stack exchange，提问作者Muhammad Mahmoud