Gatsby项目中Emotion样式组件报错问题求助

看起来你遇到的是Emotion版本升级后的依赖冲突问题——Emotion 11已经把@emotion/core正式更名为@emotion/react，但你的项目里同时存在新旧两个包，而且gatsby-plugin-emotion的版本也没跟上Emotion 11的要求，导致Webpack报错。

问题根源 #

• 你的package.json里同时安装了@emotion/core（旧版）和@emotion/react（新版），两者会产生依赖冲突
• gatsby-plugin-emotion@4.5.0是适配Emotion 10的版本，它内部仍依赖旧的@emotion/core，和你安装的Emotion 11不兼容

分步解决方案 #

1. 移除旧的@emotion/core包

首先删除不再需要的旧版依赖：

npm uninstall @emotion/core

2. 更新gatsby-plugin-emotion到兼容Emotion 11的版本

Emotion 11要求gatsby-plugin-emotion使用v6及以上版本，执行更新命令：

npm install gatsby-plugin-emotion@latest

3. 确认代码中的导入都来自@emotion/react

你当前Header组件的导入写法已经正确：

import { jsx, css } from '@emotion/react';

请检查项目中其他组件，确保没有从@emotion/core导入的代码，如果有，全部替换为@emotion/react。

4. 清理依赖缓存并重新安装

缓存可能导致残留问题，执行以下命令彻底清理并重新安装依赖：

rm -rf node_modules package-lock.json
npm install

5. 重启Gatsby开发服务

最后重新启动gatsby develop，应该就能解决报错了。

额外检查 #

确认你的gatsby-config.js中gatsby-plugin-emotion配置正确（你当前的配置无需修改）：

module.exports = {
  // ...其他配置
  plugins: [
    `gatsby-plugin-emotion`,
    // ...其他插件
  ]
}

这样处理后，就能解决Webpack抛出的@emotion/core重命名报错问题了。

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