React16.13.1升级至17.0.2后报Can't resolve 'react/jsx-dev-runtime'如何解决

方案1：启用新JSX转换（推荐，无需手动导入React） #

• 第一步：校验依赖完整性
  先确认package.json中react、react-dom版本均≥17.0.2，删除本地node_modules文件夹、package-lock.json/yarn.lock文件后重新执行依赖安装命令，避免缓存导致的React依赖文件缺失（react/jsx-dev-runtime是React 17内置导出模块，依赖安装正常的情况下必然存在）。
• 第二步：修正Babel配置
  Next.js默认使用自带的next/babel预设，额外安装@babel/preset-react、@babel/plugin-transform-react-jsx反而会引发配置冲突。找到项目根目录下的.babelrc或babel.config.json文件，修改配置如下：

{
  "presets": [
    ["next/babel", {
      "preset-react": {
        "runtime": "automatic"
      }
    }]
  ]
}

• 第三步：清理编译缓存
  删除项目根目录下的.next缓存文件夹，使用next dev --clean命令启动开发服务，确保新配置生效。

方案2：全局启用旧JSX转换（兜底方案） #

如果暂时不需要使用新JSX转换的特性，可直接全局配置经典编译模式，无需逐个文件添加注释。
修改Babel配置如下：

{
  "presets": [
    ["next/babel", {
      "preset-react": {
        "runtime": "classic"
      }
    }]
  ]
}

修改完成后清理.next缓存，重启开发服务即可生效。

注意：如果项目配置了自定义webpack规则，需检查是否存在修改react解析路径的alias、externals配置，确保react解析指向正确的17.0.2版本安装路径，否则也会出现模块找不到的报错。

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