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

Question

我最近在我的项目中安装了 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"]
}

Answer 1

这是emotion 11的break改名导致的问题，目前storybook内部还在寻找v10的名字来整合emotion包。因此，在故事书修复它之前，您将有 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"),
        },
      },
    });
  },
};

Answer 2

我也有同样的问题。需要@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"