找不到模块：无法解析@emotion/react

找不到模块：无法解析@emotion/react

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

要解决错误“找不到模块：错误：无法解析’@emotion/react’”，请确保@emotion/react通过在项目根目录中打开终端并运行命令
npm install @emotion/react并重新启动开发服务器来安装软件包。

在项目的根目录（package.json
文件所在的位置）中打开终端并运行以下命令：

# 👇️ with NPM
npm install @emotion/react
npm install @emotion/core
npm install @emotion/styled

# ----------------------------------------------

# 👇️ with YARN
yarn add @emotion/react
yarn add @emotion/core
yarn add @emotion/styled

@emotion/styled如果您不在项目中使用它，则无需安装该包。

这些命令会将
情感包添加到项目的依赖项中。

如果您正在使用@emotion/css
包，请确保也安装它。

如果错误未解决，请尝试删除您的node_modules和
package-lock.json（不是package.json）文件，重新运行npm install并重新启动您的 IDE。

# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

现在您应该可以导入和使用该@emotion/react包了。

/** @jsxImportSource @emotion/react */
import {jsx, css, Global, ClassNames} from '@emotion/react';

function App() {
  return (
    <div>
      <p
        css={css`
          color: red;
        `}
      >
        Hello world
      </p>
    </div>
  );
}

export default App;

If you’re still getting the “Module not found: Error: Can’t resolve
‘@emotion/react'” error, open your package.json file and make sure it contains
the @emotion/react package in the dependencies object.

{
  // ... rest
  "dependencies": {
    "@emotion/core": "^11.0.0",
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
  },
}

The @emotion/react module should NOT be globally installed or be in your
project’s devDependencies, it should be in the dependencies object in your
package.json file.

You can try to manually add the line and re-run npm install.

npm install

Or install the latest version of the packages:

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

Conclusion #

To solve the error “Module not found: Error: Can’t resolve ‘@emotion/react'”,
make sure to install the @emotion/react package by opening your terminal in
your project’s root directory and running the command
npm install @emotion/react and restart your dev server.