错误：JS 文件中的 vite 反应出现意外的“<”

Question

我正在使用vite而不是creat React app 制作一个 React 应用程序。当我使用.jsx作为后缀时，它工作正常。但是当我使用.js时，我的文件中会抛出数百个错误，例如：

Layout.js:131:9: error: Unexpected "<"

我在推特上读到了Evan You的这篇文章，但是没有办法吗？据我在vite.config.ts文件中使用此代码：

import { defineConfig } from 'vite'

export default defineConfig(() => ({
    esbuild: {
        loader: 'jsx',
    },
    optimizeDeps: {
        esbuildOptions: {
          loader: {
            '.js': 'jsx',
          },
        },
    },
})

但还是没用！你能帮我吗？

Answer 1

尝试以下 Vite 配置。这个配置对我有用。但在每个js文件中，都需要导入React。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
import fs from 'fs/promises';

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            src: resolve(__dirname, 'src'),
        },
    },
    esbuild: {
        loader: 'jsx',
        include: /src\/.*\.jsx?$/,
        exclude: [],
    },
    optimizeDeps: {
        esbuildOptions: {
            plugins: [
                {
                    name: 'load-js-files-as-jsx',
                    setup(build) {
                        build.onLoad(
                            { filter: /src\\.*\.js$/ },
                            async (args) => ({
                                loader: 'jsx',
                                contents: await fs.readFile(args.path, 'utf8'),
                            })
                        );
                    },
                },
            ],
        },
    },
    plugins: [react()],
});