React 16.0.1中react-dnd无法运行，遇模块解析错误求助

问题根源 #

你遇到的错误来自两个核心问题：

• React 16.x 并未内置react/jsx-runtime（该模块是 React 17+ 才引入的自动JSX转换机制）；
• 你安装的 react-dnd 版本默认依赖 React 17+ 的JSX运行时，同时ES模块的严格解析规则要求必须指定文件扩展名，导致解析失败。

具体解决步骤 #

1. 降级 react-dnd 到兼容 React 16 的版本 #

选择明确支持 React 16.x 的 react-dnd 版本，比如 13.x 系列（兼容 React 16.3+，覆盖你的16.0.1版本）。运行以下命令安装指定版本：

npm install react-dnd@13.1.5 react-dnd-html5-backend@13.1.5

若使用 yarn：

yarn add react-dnd@13.1.5 react-dnd-html5-backend@13.1.5

2. 修改 Webpack 配置补全扩展名（不降级的备选方案） #

如果不想降级 react-dnd，可通过修改 Webpack 配置让其自动补全文件扩展名，同时添加别名指向正确模块：

module.exports = {
  resolve: {
    // 添加扩展名，让 Webpack 自动解析无扩展名的模块请求
    extensions: ['.js', '.jsx', '.json'],
    // 别名映射，将无扩展名的请求指向带扩展名的文件
    alias: {
      'react/jsx-runtime': 'react/jsx-runtime.js',
      'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js'
    }
  }
};

若使用 Create React App 且未弹出配置，可借助 react-app-rewired 配合 customize-cra 修改 resolve 规则，避免弹出配置。

3. 检查项目模块类型设置 #

确保项目根目录的 package.json 中没有设置 "type": "module"，如果存在该配置，将其改为 "commonjs"（该设置会让 Node.js 以 ES 模块规则解析所有 .js 文件，易引发扩展名解析问题）。

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