导入JSX组件至Express时遇ERR_UNKNOWN_FILE_EXTENSION错误求助

1. 补全Babel的JSX解析配置 #

先检查你的babel.config.js，必须包含React预设并明确指定要处理的文件扩展名，否则Babel不会识别JSX：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react' // 核心：这个预设负责解析JSX语法
  ],
  extensions: ['.js', '.jsx'] // 告诉Babel要处理这两种扩展名的文件
};

2. 调整@babel/register的启动逻辑 #

直接用node server.js启动会导致Babel钩子没提前加载，得先加载@babel/register再启动服务：
新建start.js文件：

require('@babel/register')({
  extensions: ['.js', '.jsx'],
  presets: ['@babel/preset-env', '@babel/preset-react']
});
// 等Babel钩子生效后，再导入你的服务文件
require('./server.js');

然后修改package.json的启动脚本：

"scripts": {
  "start": "node start.js"
}

3. 统一ES模块规范（适配import语法） #

如果坚持用import而非require，得做以下调整：

• 在package.json里添加"type": "module"，声明项目用ES模块
• 改用@babel/esm-register替代@babel/register（专门支持ES模块的Babel钩子），先安装依赖：

  npm install @babel/esm-register --save-dev
  

• 把启动文件改成ES模块格式（比如命名为start.mjs）：

  import '@babel/esm-register';
  import './server.js';
  

• 更新启动脚本：

  "scripts": {
    "start": "node start.mjs"
  }
  

4. 修正JSX组件的导入路径 #

Node.js的ES模块模式下，不会自动补全文件扩展名，导入JSX时必须写全.jsx：

// 正确写法
import MyComponent from './components/MyComponent.jsx';
// 错误写法（Node.js无法识别无扩展名的JSX文件）
import MyComponent from './components/MyComponent';

5. 清理依赖冲突 #

如果之前装过旧版Babel工具（比如babel-register），可能和新版@babel/register冲突，执行以下命令清理重装：

npm uninstall babel-register @babel/register
npm install @babel/register @babel/preset-env @babel/preset-react --save-dev

内容的提问来源于stack exchange，提问作者Brother John