使用Webpack和Babel搭建React项目时无法解析React和ReactDOM问题排查

嘿，我之前搭React项目时也碰到过一模一样的问题，别慌，咱们一步步来排查解决：

第一步：先确认核心依赖有没有装 #

最常见的原因就是你还没把React和ReactDOM这俩核心包安装到项目里。打开终端，切换到你的mern-app项目根目录，执行这条命令：

npm install react react-dom --save

要是你用Yarn的话，就换成：

yarn add react react-dom

这条命令会把依赖写入package.json的dependencies字段里，这样Webpack就能在node_modules文件夹里找到它们了。

第二步：检查Webpack的模块解析配置 #

如果已经装了依赖但还是报错，那大概率是Webpack的配置没写对。打开你的webpack.config.js文件，看看有没有加上这些关键配置：

module.exports = {
  // ...其他配置项
  resolve: {
    extensions: ['.js', '.jsx'], // 要是你用JSX语法，必须加上.jsx后缀
    modules: ['node_modules'], // 明确告诉Webpack去node_modules文件夹找依赖
  }
};

另外，也别忘了检查app.js里的导入语句是不是正确的——尤其是React 18之后，ReactDOM的导入方式有变化：

// React 18+ 的正确导入方式
import React from 'react';
import ReactDOM from 'react-dom/client';

第三步：清理缓存，重装依赖 #

有时候npm的缓存会搞出一些莫名其妙的问题，试试这套组合拳：

# 清理npm缓存
npm cache clean --force

# Windows系统删除node_modules和lock文件
rmdir /s /q node_modules
del package-lock.json

# Mac/Linux系统删除node_modules和lock文件
# rm -rf node_modules package-lock.json

# 重新安装所有依赖
npm install

跑完这些之后再执行npm run webpack，说不定问题就解决了。

第四步：检查package.json的脚本配置 #

最后再确认一下你的package.json里的webpack脚本是不是正确的，比如：

{
  "scripts": {
    "webpack": "webpack --mode development"
  }
}

如果直接写webpack的话，要么你全局装了Webpack，要么就在脚本里用npx webpack来调用本地安装的版本，避免版本不兼容的问题。

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