【使用Vite构建React项目，解析js文件报错】The esbuild loader for this file is currently set to “js“ but it must be s

一、问题重现

当时并没有对js文件解析为JSX文件进行配置，导致文件无法被解读，也就是当时所有后缀为js的文件除了基础的配置文件外都会报错导致页面无法被正常加载。

但是如果吧js后缀改成JSX，就可以正常进行加载。
我和一位博主预见的问题十分相似，但是网上关于这个的信息实在是太少了，所以我决定写这样一篇文章进行记载。
下面是那个笔者的文章，非常的有参考意义。

主要是有图，我就不多加叙述了。

此超链接为该笔者的文章，直接点击就可以进行浏览

二、问题原因

The esbuild loader for this file is currently set to “js” but it must be set to “jsx” to be able …

其实这里问题也没有得到完全复制因为我已经找不到了，主要是实在不太想折回去再找了，人都麻了（碎碎念）…这些已经足够有心人摸到这篇文章了。

在这之后的Termino里也会有提示，大概意思就是ESbuid这个里面需要自己去更改一个配置，增加loader: { '.js': 'jsx' }

这个笔者也不知道具体应该去哪里更改，但是我有看到有人的建议是在配置文件里进行设置。也许是版本原因，也许是我自己没有重启的原因，这个最开始的解决方案被我否决了，如果有人尝试成功，请一定在这篇文章的评论区里留下你光辉的一笔！

这里附上配置文件（vite.config.js）里的代码：

export default defineConfig({
  plugins: [react({
    babel: {
      plugins: ['@babel/plugin-transform-react-jsx']
    }
  })],
  resolve: {
    alias: { // Configure aliases
      '@': resolve('src')
    }
  },
  esbuild: {
    loader: 'jsx',
    include: /src\/.*\.jsx?$/,
// include: /src\/.*\.[tj]sx?$/,
    exclude: []
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: { '.js': 'jsx' }, //*********** Add this line
      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')
            }))
          }
        }
      ]
    }
  },
  extensions: ['.js', '.jsx', '.json', '.png']
})

三、解决方案

1、下载支持转码插件

npm i @babel/plugin-transform-react-jsx

2、打开vite.config.js，更改配置文件

export default defineConfig({
  plugins: [react({
    babel: {
      plugins: ['@babel/plugin-transform-react-jsx'],
    },
    build:{
      rollupOptions:{
        input:[]
      }
    },
    optimizeDeps: {
      entries: [],
    },
  })]
})

这里是vite官方文档给出的解释支持：

3、重启电脑！！！

这里是我完全没有想到的一步操作，也是导致我之前没有发现其实问题已经得到解决的最重要也是最不起眼的原因。

在此感谢鄙人母亲喊俺吃饭吃饭于是我放了我自己一马，回来重启电脑中之后整个人豁然开朗。