如何配置Vite允许JS文件中使用JSX语法？

Question

Vite 默认不允许在 .js 文件中使用 JSX 语法。

\n

我已经将我的文件重命名为.jsx（或.tsx)，但我有无法重命名的外部依赖项。

\n

Vite 的错误示例：

\n

\xe2\x9c\x98 [ERROR] The JSX syntax extension is not currently enabled\n\n    node_modules/somelib/src/someFile.js:122:11:\n      122 \xe2\x94\x82     return <div/>\n

\n

如何配置 Vite 支持所有 .js 文件中的 JSX 表达式？

\n

Answer 1

下面的代码vite.config.js使 Vite/Vitest 将*.js文件视为 JSX 以避免出现如下错误：

错误：无法解析源以进行导入分析，因为内容包含无效的 JS 语法。如果您使用 JSX，请确保使用 .jsx 或 .tsx 扩展名命名该文件。

vite.config.js

import { defineConfig, transformWithEsbuild } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    {
      name: 'treat-js-files-as-jsx',
      async transform(code, id) {
        if (!id.match(/src\/.*\.js$/))  return null

        // Use the exposed transform from vite, instead of directly
        // transforming with esbuild
        return transformWithEsbuild(code, id, {
          loader: 'jsx',
          jsx: 'automatic',
        })
      },
    },
    react(),
  ],

  optimizeDeps: {
    force: true,
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
})

Answer 2

您可以使用以下选项更改 esbuild 配置以将所有 js 文件视为 jsx loader：

// vite.config.ts
import {defineConfig} from 'vite'

// https://vitejs.dev/config/
export default defineConfig(() => ({
  esbuild: {
    loader: "tsx", // OR "jsx"
    include: [
      // Add this for business-as-usual behaviour for .jsx and .tsx files
      "src/**/*.jsx",
      "src/**/*.tsx",
      "node_modules/**/*.jsx",
      "node_modules/**/*.tsx",

      // Add the specific files you want to allow JSX syntax in
      "src/LocalJsxInJsComponent.js",
      "node_modules/bad-jsx-in-js-component/index.js",
      "node_modules/bad-jsx-in-js-component/js/BadJSXinJS.js",
      "node_modules/bad-jsx-in-js-component/ts/index.ts",
      "node_modules/bad-jsx-in-js-component/ts/BadTSXinTS.ts",

      // --- OR ---

      // Add these lines to allow all .js files to contain JSX
      "src/**/*.js",
      "node_modules/**/*.js",

      // Add these lines to allow all .ts files to contain JSX
      "src/**/*.ts",
      "node_modules/**/*.ts",
    ],
  },
}));

注意：使用 .jsx 加载器加载 .js 文件会产生性能损失。

答案取自Vite 的 GitHub 中的这一讨论，它将错误的（和较旧的）答案标记为“正确”的答案。

2023 年 3 月更新

原来的答案不能正确工作vite build，只能正确工作vite dev。当前版本适用于vite@^4.0.0

这是一个示例存储库，您可以克隆并测试该解决方案。

2023 年 11 月更新

Vite 5.0 已发布，这可能不再相关，欢迎编辑+更正。