Node处理Next.js的TSX文件时自动注入React至作用域的方案

方案1：用Babel自动注入React导入 #

Next.js编译时会自动处理JSX对应的React依赖，但Node直接运行TSX文件时需要手动配置Babel模拟这个行为。

1. 安装依赖：

npm install @babel/core @babel/plugin-transform-react-jsx @babel/register react react-dom --save-dev

2. 创建.babelrc配置文件：

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "classic" // 自动给JSX文件注入`import React from 'react'`
    }]
  ]
}

3. 修改运行命令，用Babel注册器替代原有的tsx导入：

node --require @babel/register ./ct-mig.mjs

如果TSX文件包含TypeScript语法，还需要添加@babel/preset-typescript到.babelrc的presets数组中。

方案2：自定义加载逻辑，导入前插入React导入 #

在迁移脚本里修改文件读取逻辑，给每个TSX文件开头自动添加React导入语句，再执行动态导入：

import fs from 'fs/promises';
import path from 'path';
import os from 'os';

async function importTsxWithReact(filePath) {
  let content = await fs.readFile(filePath, 'utf8');
  // 跳过已经存在React导入的文件
  if (!content.match(/import\s+(?:\*\s+as\s+)?React\s+from\s+['"]react['"]/)) {
    content = `import React from 'react';\n${content}`;
  }
  // 创建临时文件存储修改后的内容
  const tempPath = path.join(os.tmpdir(), `temp-${Date.now()}.tsx`);
  await fs.writeFile(tempPath, content);
  // 导入临时文件
  const module = await import(tempPath);
  // 清理临时文件
  await fs.unlink(tempPath);
  return module;
}

// 替换原有动态import逻辑，用这个函数处理TSX文件导入
// 比如把`import(filePath)`改成`importTsxWithReact(filePath)`

方案3：全局挂载React（仅应急，不推荐） #

在迁移脚本最顶部，把React挂载到全局对象上，让所有导入的TSX文件都能访问到：

import React from 'react';

globalThis.React = React;

TypeScript环境下需要补充全局类型声明，避免报错：

declare global {
  var React: typeof import('react');
}

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