无法将 material-ui 与故事书“无法解析 '@emotion/react'”一起使用答案

【问题标题】：Cannot use material-ui with storybook "Can't resolve '@emotion/react'"无法将 material-ui 与故事书“无法解析 '@emotion/react'”一起使用
【发布时间】：2022-01-02 01:15:06
【问题描述】：

我正在使用webpack@5 作为我项目的故事书。问题是当我在故事书中使用我的组件（使用 material-ui 组件）时出现错误：

ModuleNotFoundError: Module not found: Error: Can't resolve '@emotion/react' in '/Users/USER/Dev/PROJECT/front/packages/components/node_modules/@mui/styled-engine/GlobalStyles'

我已尝试安装此软件包，将其添加到 addons，将此模块的别名添加到故事书配置，安装其他奇怪的 material-ui 模块。没有什么对我有用，仍然是同样的错误。

你能帮忙并建议我可以尝试解决这个问题吗？

【问题讨论】：

你是按照故事书的官方文档来使用material-UI的吗？ storybook.js.org/addons/storybook-addon-material-ui
是的，但看起来它主要是为以前的storybook 版本完成的，并且为storybook@6 提供的解决方案根本不起作用，还有，我不需要主题自定义，我的问题是严格用于构建故事书

标签： reactjs material-ui storybook

【解决方案1】：

所以我在页面上找到了一些解决方案，它对我有用：

//main.js
webpackFinal: async (config) => {
    return merge(config, {
      resolve: {
        alias: {
          '@emotion/react': getPackageDir('@emotion/react'),
        },
      },
    });
  },

//main.js
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;
  }
}

【讨论】：