不能将 material-ui 与故事书 "Can't resolve '@emotion/react'" 一起使用

Question

我正在使用 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 模块。对我没有任何作用，仍然是同样的错误。

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

Answer 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;
  }
}

不能将 material-ui 与故事书 "Can't resolve '@emotion/react'" 一起使用

Cannot use material-ui with storybook "Can't resolve '@emotion/react'"

reactjs

material-ui

storybook