@storybook/addon-jest 在 Webpack 5 和 Vite 上失败

gr8qqesn  于 5个月前  发布在  Jest
关注(0)|答案(4)|浏览(100)

我刚刚在迁移我的 Storybook 配置以支持 @storybook/builder-webpack5 后,遇到了一个与 @storybook/addon-jest 相关的隐蔽 bug。基本上有一个依赖项 upath,它严重依赖于已弃用的自动 Node.js polyfills。你可能会找时间进行演示,但现在我可以描述一下,带有 Jest 测试的故事会引发类似于 (0, upath.normalize) is not a function 的错误,并建议在 main.js 上应用解决方法:

module.exports = {
  core: {
    builder: 'webpack5',
  },
  webpackFinal: (config) => {
    // Workaround for @storybook/addon-jest on Webpack 5
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        path: require.resolve('path-browserify'),
      },
    };

    return config;
  },
};
yduiuuwa

yduiuuwa1#

刚遇到相同的错误,需要添加几个别名才能让storybook运行:

/.../
alias: {
	...config.resolve.alias,
         path: require.resolve('path-browserify'),
	crypto: require.resolve('crypto-browserify'),
	stream: require.resolve("stream-browserify")
	}

感谢提供的解决方法!

3zwtqj6y

3zwtqj6y2#

我正在使用vite构建器配置并获得相同的错误。

voj3qocg

voj3qocg3#

感谢帮助!
对于使用vite的用户,在./storybook/main.js的配置中添加以下参数可能有助于解决此问题:

// main.js
module.exports = {
   /... other options config .../

  async viteFinal(config, { configType }) {
    config.resolve.alias['path'] = 'path-browserify'
    return config
  },
}
f8rj6qna

f8rj6qna4#

In vite 3 storybook 6 only this would work for me - slight variation than above

// main.cjs
module.exports = {
   /... other options config .../
  async viteFinal(config, { configType }) {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        path: require.resolve('path-browserify'),
      },
    };

    return config;
  },
}

相关问题