React项目运行报错ERR_UNKNOWN_FILE_EXTENSION：未知.jsx扩展名

错误信息： #

react .jsx TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".jsx" for C:\Users\PREDATOR\Desktop\React-Todo\src\App.jsx
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:141:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)
    at async link (node:internal/modules/esm/module_job:76:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
Node.js v20.10.0

解决方案： #

• 检查构建工具配置

  • 若使用Vite：确保vite.config.js中引入并启用了@vitejs/plugin-react插件，这是处理.jsx文件的核心：

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    
    export default defineConfig({
      plugins: [react()],
    })
    

  • 若使用Webpack：在webpack.config.js中添加.jsx文件的解析规则，通过babel-loader转译：

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-react']
              }
            }
          }
        ]
      }
    }
    

• 调整package.json的模块类型
  如果你的package.json中设置了"type": "module"，可能导致Node.js无法直接识别.jsx扩展名。可以尝试移除该字段切换回CommonJS规范，或者确保构建工具完整接管.jsx文件的处理流程。

• 规范文件导入与解析配置

  • 导入.jsx文件时，要么明确写出完整扩展名（如import App from './App.jsx'）；
  • 要么在构建工具的resolve配置中添加.jsx扩展名，让工具自动识别：
    Webpack配置示例：

    resolve: {
      extensions: ['.js', '.jsx']
    }
    

    Vite默认已支持省略.jsx扩展名，若手动修改过配置，需确认保留相关设置。

• 重置依赖与缓存
  执行以下命令清理依赖并重新安装，避免缓存或依赖损坏问题：

  rm -rf node_modules package-lock.json
  npm install
  npm run dev
  

内容的提问来源于stack exchange，提问作者Mayuresh Chavan