Module not found: Can't resolve '@emotion/react'

Question

I want to install neumorphism-react package.

But I got this error

Module not found: Can't resolve '@emotion/react' in 'C:\Users\Asus\Desktop\react projects\visitor\node_modules@emotion\styled\base\dist'

Here are the dependencies in package.json

"@emotion/core": "^11.0.0",
"@emotion/styled": "^11.0.0",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"neumorphism-react": "^1.1.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"semantic-ui-react": "^2.0.1",
"web-vitals": "^0.2.4"

Looks like you're needing the @emotion/react package, it's no in your dependency and obviously not being included in your dependencies' dependencies either — Jayce444
– Jayce444, Commented Dec 29, 2020 at 1:58

Daryn · Accepted Answer · 2021-03-13 18:39:47Z

171

I had a similar issue and I resolved it by calling:

npm install @emotion/react

or

yarn add @emotion/react

edited Mar 13, 2021 at 18:39

Daryn

5,1555 gold badges42 silver badges55 bronze badges

answered Jan 13, 2021 at 16:54

Noam Rathaus

5,6082 gold badges31 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Drubio Over a year ago

After installing the package a restart of npm might be needed. Just stop the server and run npm start.

LeoPucciBr Over a year ago

after this error i got Can´t resolve @emotion/styled

displacedtexan Over a year ago

This plus restarting the app server worked.

Nick the Community Scientist Over a year ago

Make sure that you add ALL necessary packages. In my case it was @emotion/utils @emotion/cache @emotion/serialize.

Cesar Moran · Accepted Answer · 2021-09-19 04:41:00Z

149

I had a similar issue and I resolved it by calling:

npm install @emotion/react 
npm install @emotion/styled

or

 yarn add @emotion/react
 yarn add @emotion/styled

edited Sep 19, 2021 at 4:41

Cesar Moran

1632 silver badges9 bronze badges

answered Sep 1, 2021 at 11:19

ismail ziani

1,4911 gold badge6 silver badges4 bronze badges

Comments

Chris · Accepted Answer · 2021-11-02 17:29:47Z

20

I had a similar issue and I resolved it by calling:

for the npm:

npm install @emotion/react 
npm install @emotion/styled

for the yarn:

yarn add @emotion/react
yarn add @emotion/styled

For specific version you can install like : @emotion/[email protected] & @emotion/styled

in npm:

npm install @emotion/[email protected]
npm install @emotion/styled

in yarn:

yarn add @emotion/[email protected]
yarn add @emotion/styled

edited Nov 2, 2021 at 17:29

Chris

139k139 gold badges316 silver badges293 bronze badges

answered Nov 2, 2021 at 15:52

Mohammad

4114 silver badges6 bronze badges

Comments

Fusion Developers · Accepted Answer · 2022-11-09 04:47:55Z

20

For those who are using nextJS, try to delete the .next dir after installing the dependencies.

answered Nov 9, 2022 at 4:47

Fusion Developers

7687 silver badges13 bronze badges

1 Comment

Kumar Ravi Over a year ago

My god! You saved me.

abinash_269 · Accepted Answer · 2021-12-25 11:49:20Z

17

An all-stop solution...

npm install @mui/material @emotion/react @emotion/styled

answered Dec 25, 2021 at 11:49

abinash_269

4314 silver badges6 bronze badges

Comments

ABDERRAHMANE OUALI · Accepted Answer · 2021-01-23 13:50:51Z

14

if you use npm:

npm install  @emotion/react

if you use yarn:

yarn add @emotion/react

but in recent version they rename the package @emotion/core to @emotion/react, if you use other package that are depending on @emotion/core

that mean you need to hook up to source code and update import statement to the new @emotion/react

or downgrade package to older versions with npm

npm install @emotion/[email protected]

with yarn

yarn add @emotion/[email protected]

edited Jan 23, 2021 at 13:50

answered Jan 23, 2021 at 13:23

ABDERRAHMANE OUALI

93110 silver badges13 bronze badges

Comments

Sky · Accepted Answer · 2022-10-14 15:29:18Z

9

YOU NEED INSTALL : @emotion/react AND @emotion/styled WHILE @mui/material is installed and sometimes it look likes that it've finished but still no proggress, at these cases just w8 and it will finish depend on your connection speed

npm install @mui/material @emotion/react @emotion/styled

or

npm install @mui/material 
npm install @emotion/react 
npm install @emotion/styled

visit this for installation docs Installation MUI

answered Oct 14, 2022 at 15:29

Sky

5996 silver badges5 bronze badges

1 Comment

Bombe Over a year ago

It’s amazing. It’s as if dependencies are a completely foreign concept to some people.

round_circle · Accepted Answer · 2022-01-28 10:14:40Z

5

None of these solutions worked for me. I resolved it by running:

npm install @emotion/server

I am using mui with nextjs.

answered Jan 28, 2022 at 10:14

round_circle

1,1551 gold badge14 silver badges23 bronze badges

Comments

Shah · Accepted Answer · 2020-12-29 03:45:06Z

2

'yarn install' or 'node install' at the directory of package.json.

I'm looking at the docs, the package you're trying to use may not exist.

Make sure you are importing from the current library. For example:

import { NeuButton } from "neumorphism-react";

edited Dec 29, 2020 at 3:45

answered Dec 29, 2020 at 3:39

Shah

2,9821 gold badge21 silver badges23 bronze badges

Comments

Yoel Nisanov · Accepted Answer · 2023-05-17 09:29:45Z

2

TLDR for those who are using nextJS-

Rerun npm run dev to allow nextJS to rebuild the needed files.
Delete the .next folder like @FusionDevelopers suggested.

Explanation- when you run dev next builds a lot of the stuff to be served so when you're installing new libraries they won't necessarily be included in that build meaning your project will shout that it misses the things you already installed. One option, as @FusionDevelopers suggested is to delete the .next folder, another option is to restart the nextjs server that'll rebuild everything including the newly installed packages.

answered May 17, 2023 at 9:29

Yoel Nisanov

1,05410 silver badges17 bronze badges

Comments

Lisa · Accepted Answer · 2023-06-22 07:07:30Z

2

using:

npm install @emotion/styled --force
npm install @emotion/react --force

worked for me

answered Jun 22, 2023 at 7:07

Lisa

631 silver badge11 bronze badges

Comments

Michael Nelles · Accepted Answer · 2021-10-11 18:13:28Z

1

Only this worked for me:

npm i @emotion/styled @emotion/core

answered Oct 11, 2021 at 18:13

Michael Nelles

6,0588 gold badges49 silver badges61 bronze badges

Comments

Mathesh · Accepted Answer · 2022-08-01 10:07:23Z

1

Add below commands into package.json under Dependencies

"@emotion/core": "^11.0.0",
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",

Run npm install

edited Aug 1, 2022 at 10:07

answered Aug 1, 2022 at 8:42

Mathesh

796 bronze badges

Comments

AdamHinckley · Accepted Answer · 2022-09-21 16:25:28Z

1

I had the same issue. I tried npm install @emotion/react but it didn't solve my problem because I already had the package installed.

I restarted VS Code and the linter was happy 😀

answered Sep 21, 2022 at 16:25

AdamHinckley

2451 gold badge5 silver badges17 bronze badges

1 Comment

Kert Kukk Over a year ago

went through the exact same thing. Spent a good chunk of time trying to figure out what was going wrong, and it turned out a simple restart did the trick! 😄

some-user · Accepted Answer · 2022-10-04 04:41:12Z

1

I had the same error and resolved it by running the below commands.

npm install @emotion/react
npm install @emotion/core
npm install @emotion/styled

These commands will install the emotion package to the dependencies of your project.

after this, make sure you restart your development server and your IDE if necessary. Your dev server won't pick up the changes until you stop it and re-run the npm start command.

also, install the @emotion/css package if you are using CSS as well.

If the error is still there then, try to delete your node_modules and package-lock.json file (not package.json) files, re-run npm install, and restart your IDE.

visit for more information: https://bobbyhadz.com/blog/react-module-not-found-cant-resolve-emotion-react

edited Oct 4, 2022 at 4:41

some-user

5,0306 gold badges26 silver badges56 bronze badges

answered Sep 27, 2022 at 17:15

user3493106

752 silver badges9 bronze badges

Comments

Yash Pandey · Accepted Answer · 2021-11-09 12:29:36Z

0

And after installing don't forget to restart your localhost, npm start

answered Nov 9, 2021 at 12:29

Yash Pandey

111 silver badge3 bronze badges

Comments

Yianni · Accepted Answer · 2022-09-17 12:18:39Z

0

I had all of the above and still was getting the error. I ended up deleting the yarn.lock & node_modules and the run yarn again

answered Sep 17, 2022 at 12:18

Yianni

692 bronze badges

Comments

Artorias2718 · Accepted Answer · 2023-08-21 01:28:30Z

0

You may need to remove the package definitions from package.json before running

npm install @emotion/react @emotion/styled

Until I did that, it wasn't working for me.

answered Aug 21, 2023 at 1:28

Artorias2718

6436 silver badges13 bronze badges

Comments

Hiba Youssef · Accepted Answer · 2023-12-04 19:58:01Z

0

Execute these two instructions:

I add this statement:

 npm install @emotion/styled

then i add this statement:

 npm update @emotion/styled

With the previous two steps, the problem was solved in my code.

If the problem isn't resolved, you can perform the next step:

npm install -g @emotion/styled

answered Dec 4, 2023 at 19:58

Hiba Youssef

1,4303 gold badges20 silver badges46 bronze badges

Comments

rizTaak · Accepted Answer · 2024-09-01 04:31:50Z

0

I am using mui+nextjs. I was able to resolve by running below

npm install @mui/material-nextjs @emotion/cache

answered Sep 1, 2024 at 4:31

rizTaak

1781 silver badge12 bronze badges

Collectives™ on Stack Overflow

Module not found: Can't resolve '@emotion/react'

20 Answers 20

4 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

20 Answers 20

4 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related