storybook [Bug]: Cannot read properties of undefined (reading 'custom') in Next.js project

bprjcwpo  于 10个月前  发布在  其他
关注(0)|答案(7)|浏览(96)

描述问题

这个问题始于 https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.29,我怀疑它可能与 #20615

有关。

重现步骤

检查 https://github.com/storybookjs/status-page
转到 feat/upgrade-storybook

解决方法

要解决此问题的方法是自定义webpack以模拟 assert:

  1. import type { StorybookConfig } from '@storybook/nextjs';
  2. const config: StorybookConfig = {
  3. // ...
  4. webpackFinal: async (config) => {
  5. config.resolve = config.resolve || {};
  6. config.resolve.alias = {
  7. ...config.resolve.alias,
  8. // Mock assert to avoid issues like Cannot read properties of undefined (reading 'custom')
  9. assert: false,
  10. };
  11. return config;
  12. },
  13. };
  14. export default config;
brqmpdu1

brqmpdu12#

pnpm中,默认情况下所有包都被提升。由于这个问题,包assert被提升了,这破坏了resolve.fallback的webpack配置以及assert包到browser-assert的配置(因为解析assert包不会失败)。

我们可以更新.npmrc以防止提升assert包(我们尝试过,效果很好),但我们需要在status-page仓库上拥有write权限才能提交PR。cc @vanessayuenn

3b6akqbq

3b6akqbq3#

你好,

有没有同时的解决办法?

cuxqih21

cuxqih214#

遇到了相同的问题。
我们认为可能是我们的故事导致了这个问题,所以删除了所有较旧的故事,并尝试使用nextjs13进行全新的构建。问题仍然存在,我们似乎无法找到导致此问题的原因。

7tofc5zh

7tofc5zh5#

对我来说,在webpack配置中添加一个resolve.alias解决了这个问题:

  1. resolve: {
  2. ...config.resolve,
  3. alias: {
  4. ...config.resolve.alias,
  5. 'assert': require.resolve('browser-assert'),
  6. },
  7. },
kx7yvsdv

kx7yvsdv6#

对我来说,在webpack配置中添加一个resolve.alias解决了这个问题:

  1. resolve: {
  2. ...config.resolve,
  3. alias: {
  4. ...config.resolve.alias,
  5. 'assert': require.resolve('browser-assert'),
  6. },
  7. },

非常感谢!这正是我们需要的。
有任何想法可能导致这个问题吗?

8zzbczxx

8zzbczxx7#

非常感谢!这正是我们需要的。有任何想法可能导致这种情况吗?
无论您使用的是哪种软件包管理器,它都会拉取实际的 assert 软件包,而不是应该使用的 browser-assert 软件包,这是通过 Storybook 中的 fallback 配置实现的。请查看上面的第21911条帖子(评论)。

相关问题