Dependency is not renamed

Question

I recently created a project with Gatsby. While I'm trying to use @emotion/core and @emotion/styled it shows me an error.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html The @emotion/core package has been renamed to @emotion/react. Please import it like this import { jsx } from '@emotion/react'.

2 |

3 | throw new Error("The @emotion/core package has been renamed to @emotion/react. Please import it like this import { jsx } from '@emotion/react'."); | ^ 4 |

WebpackError: The @emotion/core package has been renamed to @emotion/react. Please import it like this import { jsx } from '@emotion/react'.

• emotion-core.cjs.dev.js:3 node_modules/@emotion/core/dist/emotion-core.cjs.dev.js:3:1

• emotion-core.cjs.js:6 node_modules/@emotion/core/dist/emotion-core.cjs.js:6:20

• gatsby-ssr.js:9 node_modules/gatsby-plugin-manifest/gatsby-ssr.js:9:15enter code here

I already renamed it and imported as it shows there. I also tried with Gatsby clean and deleted the node_modules and installed again, but still got the error. I appreciate your help.

Answer 1

I encountered the same issue and resolved by downgrading the @emotion/core package.

npm install @emotion/[email protected]