未找到模块：错误：运行故事书时无法解析“@emotion/styled/base”

Posted 2023-02-19

【中文标题】未找到模块：错误：运行故事书时无法解析“@emotion/styled/base”

【英文标题】：Module not found: Error: Can't resolve '@emotion/styled/base' when running story book

【发布时间】：2021-04-29 20:17:14

【问题描述】：

我最近在我的项目中安装了 Storybook

下面的依赖和开发依赖：

"dependencies": 
    "@emotion/react": "^11.1.4",
    "@emotion/styled": "^11.0.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@hot-loader/react-dom": "^17.0.1",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-content-loader": "^6.0.1",
    "react-dom": "^17.0.1",
    "react-hot-loader": "^4.13.0",
    "react-router-dom": "^5.2.0"
  ,
  "devDependencies": 
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "@emotion/babel-plugin": "^11.1.2",
    "@emotion/babel-preset-css-prop": "^11.0.0",
    "@emotion/jest": "^11.1.0",
    "@emotion/styled-base": "^11.0.0",
    "@storybook/addon-actions": "^6.1.15",
    "@storybook/addon-essentials": "^6.1.15",
    "@storybook/addon-links": "^6.1.15",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.1.15",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "babel-plugin-emotion": "^11.0.0",
    "babel-plugin-require-context-hook": "^1.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.1",
    "eslint": "^7.18.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.3",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "html-webpack-plugin": "^5.0.0-alpha.3",
    "husky": "^4.3.8",
    "jest": "^26.6.3",
    "jest-prop-type-error": "^1.1.0",
    "prettier": "^2.2.1",
    "react-test-renderer": "^17.0.1",
    "sass": "^1.32.4",
    "sass-loader": "^10.1.1",
    "standard-version": "^9.1.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.15.0",
    "webpack-bundle-analyzer": "^4.3.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2"
  ,

我构建了一个简单的按钮组件，它使用@emotion/styled 进行样式设置。我想为这个按钮添加一个故事，但是，在运行 npm run storybook 时出现以下错误

Module not found: Error: Can't resolve '@emotion/styled/base' in '/directory/to/Button'

这是我在按钮组件中导入的内容：

import styled from '@emotion/styled';
import  useTheme  from '@emotion/react';

const StyledButton = styled.button`
  cursor: pointer;
  font-size: $( fontSize ) => fontSize;
`;

这也发生在使用@emotion/styled 的其他组件上。我是否缺少额外的依赖项，还是需要向 .babelrc 文件添加任何预设？

.babelrc:

  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@emotion/babel-preset-css-prop"
  ],
  "env": 
    "test": 
      "plugins": ["require-context-hook"]
    
  ,
  "plugins": ["react-hot-loader/babel", "@emotion"]

【问题讨论】：

我是第一次尝试使用故事书，这是我第一次尝试。如果您找到解决方案，请分享。

【参考方案1】：

我在最近版本的带有 React 的样式化组件中遇到了类似的问题。我通过安装 babel 插件样式的组件解决了它

npm install --save-dev babel-plugin-styled-components

然后我重新运行了该应用程序，它再次运行。我希望这对您的问题有所帮助。

【讨论】：

问题是关于情感而不是styled-components。

我知道我只是想分享与 styled-components 有类似问题的问题，并且我修复了重新安装或更改 babel 的问题。对不起！！

【参考方案2】：

跟进 yan 的评论。

您可以编写如下 webpack 配置以获得更好的可读性：

module.exports = 
  stories: [
    '../stories/**/*.stories.mdx',
    '../components/**/*.stories.@(ts|tsx|mdx)',
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => 
    config.resolve.alias = 
      '@emotion/core': getPackageDir('@emotion/react'),
      '@emotion/styled': getPackageDir('@emotion/styled'),
      'emotion-theming': getPackageDir('@emotion/react'),
    ;
    return config;
  ,
;

【参考方案3】：

我也有同样的问题。 @emotion/babel-plugin 需要启用为 .babelrc 文件中最顶层的插件。

你有："plugins": ["react-hot-loader/babel", "@emotion"]

应该是："plugins": [ "@emotion", "react-hot-loader/babel"]

另外，请务必看看下面的情感说明

https://emotion.sh/docs/@emotion/babel-plugin

我正在使用情感库： "@emotion/react": "^11.1.5" "@emotion/styled": "^11.1.5" "@emotion/babel-plugin": "^11.2.0"

【讨论】：

这对我不起作用。我什至没有安装 react-hot-loader/babel

【参考方案4】：

这是情感11的Break名称更改引起的问题。目前故事书内部仍在寻找v10名称以集成情感包。因此，在故事书修复它之前，您将有 2 个选项：

A.降级到情感 10.

B.解决方法：

// .storybook/main.js
const path = require("path");
const fs = require("fs");
const  merge  = require("webpack-merge");

function getPackageDir(filepath) 
  let currDir = path.dirname(require.resolve(filepath));
  while (true) 
    if (fs.existsSync(path.join(currDir, "package.json"))) 
      return currDir;
    
    const  dir, root  = path.parse(currDir);
    if (dir === root) 
      throw new Error(
        `Could not find package.json in the parent directories starting from $filepath.`
      );
    
    currDir = dir;
  


module.exports = 
  stories: [
    "../stories/**/*.stories.mdx",
    "../components/**/*.stories.@(ts|tsx|mdx)",
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  webpackFinal: async (config) => 
    return merge(config, 
      resolve: 
        alias: 
          "@emotion/core": getPackageDir("@emotion/react"),
          "@emotion/styled": getPackageDir("@emotion/styled"),
          "emotion-theming": getPackageDir("@emotion/react"),
        ,
      ,
    );
  ,
;

【讨论】：

这在 NX 工作区项目中对我有用。