【使用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