React SSR项目启动报错：无法找到@emotion/css模块

1. 确认@emotion/css的安装与依赖配置 #

• 检查package.json，确保@emotion/css在dependencies字段下（而非devDependencies）——SSR服务端运行时需要该依赖存在于生产依赖中。
• 执行npm list @emotion/css，查看该包是否已成功安装，以及是否存在版本冲突。如果输出显示"missing"，手动执行npm install @emotion/css --save重新安装。

2. 校验Material UI与Emotion的版本兼容性 #

Material UI v5对Emotion依赖有明确版本要求：

• 需搭配@emotion/react和@emotion/styled，部分场景需额外安装@emotion/css。
• 确保所有@emotion/*依赖版本完全一致，避免版本不匹配导致模块解析失败。示例配置：

  {
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@emotion/css": "^11.11.0"
  }
  

3. 排查useClasses.js的导入逻辑 #

• 打开src/utilities/useClasses.js，确认导入语句格式正确：

  import { css } from '@emotion/css';
  

  若存在动态导入、路径拼写错误等情况，修正为标准导入格式。

4. 清理深层缓存 #

除了node_modules和package-lock.json，还需清理以下缓存：

• npm缓存：执行npm cache clean --force
• 项目构建缓存：删除根目录下的build、dist或.cache文件夹
• 重启IDE/终端，避免缓存残留干扰模块解析

5. 检查SSR服务端的模块解析配置 #

• 若服务端使用Webpack打包，确保配置未排除@emotion/css，且已将@emotion/babel-plugin添加到Babel配置：

  // .babelrc 或 babel.config.json
  {
    "plugins": ["@emotion/babel-plugin"]
  }
  

• 确认Node服务器未自定义module.paths等模块解析路径，避免干扰默认的node_modules查找逻辑。

6. 解决依赖树版本冲突 #

执行npm ls @emotion/css查看依赖树，若存在多个版本的@emotion/css：

• 执行npm dedupe合并重复依赖
• 或在package.json中添加resolutions字段强制指定版本：

  {
    "resolutions": {
      "@emotion/css": "^11.11.0"
    }
  }
  

  之后重新执行npm install

内容的提问来源于stack exchange，提问作者j-terranova