How To Fix Error “Module Not Found: Can’t Resolve @Emotion/React” In React

When working in a React application, you use the @emotion/react package and get the error message: “Module not found: Can’t resolve @emotion/react”. In this article, I will show you some solutions.

Why do we have this error?

The ‘emotion‘ library is designed with the purpose of writing CSS styles in JavaScript. There are two main ways you can use ’emotion’ library. One of them we are talking about is @emotion/react. The @emotion/reaction package is used with React and is a recommended framework for users.

The reason you can’t use the @emotion/react package in your project is because you don’t have it installed on your computer.

To use this library, you need to install it first via the npm install command, otherwise you will get error message: “Module not found: Can’t resolve ‘@emotion/reaction’” .

Case of the error:

Here is a small example so you can see the error occurs:

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

Output:

The solution to fix the error “Module not found: Can’t resolve ‘@emotion/react'” in React

To fix this error, you must install the @emotion/react package before using it. Open the terminal and run the following command to save it to your ‘dependencies’ object in package.json file:

:: npm command
npm install --save @emotion/react

:: yarn command
yarn add @emotion/react

If you can’t use these commands above, try re-running it with the --force flag.

:: npm command
npm install --save @emotion/react --force

:: yarn command
yarn add @emotion/react  --force

After successfully installing the package @emotion/react, your package.json file should look like below – @emotion/react must be in the ‘dependencies’ object. Otherwise, your installation made an error:

{
    ...
    "dependencies": {
       	...
    	"@emotion/react": "^11.8.8",
    	...
    },
    ...
}

Another way, you can try to manually enter the above lines in the ‘dependencies’ object of package.json file, filling in the version you want to install. Finally, run the npm install command to install them.

If you still get the error, try removing folder ‘node_modules’ and file ‘package-lock.json‘, then run npm install:

rm -rf node_modules
rm -f package-lock.json
npm install

It would help if you restarted the development server and IDE when these commands are done to avoid unexpected errors.

One last note for you: Beside @emotion/react, the ’emotion’ library also includes other packages such as @emotion/css, @emotion/styled, @emotion/cache,… These modules are optional. If you want to use them, please install them according to the syntax below. Otherwise, you will also receive an error message similar to the error message in this article.

Syntax:

npm install

Some examples of installing other packages in the ’emotion’ library:

:: install @emotion/styled
npm install @emotion/styled

:: install @emotion/styled
npm install --save @emotion/css

Summary

This article has provided a solution to fix the “Module not found: Can’t resolve @emotion/react” error. Apply it to your project and get the result. If you have any problems, please comment below. Thank you for your reading!

Maybe you are interested:

• Module not found: Can’t resolve ‘@mui/material’
• Module not found: Can’t resolve ‘popper.js’
• Module not found: Can’t resolve ‘react/jsx-runtime’

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js