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

[yannbf]

Describe the bug

The issue started in https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.29 and I suspect it might be related to https://github.com/storybookjs/storybook/pull/20615

To Reproduce

Check https://github.com/storybookjs/status-page Go to feat/upgrade-storybook

This has a workaround

The way to work around this issue is to customize webpack to mock out assert:

import type { StorybookConfig } from '@storybook/nextjs';
const config: StorybookConfig = {
  // ...
  webpackFinal: async (config) => {
    config.resolve = config.resolve || {};
    config.resolve.alias = {
      ...config.resolve.alias,
      // Mock assert to avoid issues like Cannot read properties of undefined (reading 'custom')
      assert: false,
    };
    return config;
  },
};
export default config;

System

No response

Additional context

No response

[gitstart-app[bot]]

Here is the GitStart Ticket for this issue: https://clients.gitstart.com/storybook-oss/1/tickets/STORYBOOK-21911

[gitstart-storybook]

@yannbf

• By default in pnpm all packages are hoisted, for this issue package assert is hoisted, it breaks webpack configs resolve.fallback configs for assert package to browser-assert (since resolving assert package won't fail)
• We can update .npmrc to prevent hoisting assert package (we tried and it works fine) but we would need write permission on status-page repo to raise a PR. cc @vanessayuenn

[Fouzyyyy]

Hi,

Is there a workaround in the meantime?

[vinnycodes]

Having the same issue.

Considered that it may be our stories that could be causing this issue so removed all of our older stories and tried a fresh build with nextjs13. Issue continued and we cannot seem to find what could be causing this issue.

[strmer15]

For me, adding in a resolve.alias into the webpack config fixed this:

    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        'assert': require.resolve('browser-assert'),
      },
    },

[vinnycodes]

For me, adding in a resolve.alias into the webpack config fixed this:

    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        'assert': require.resolve('browser-assert'),
      },
    },

Thank you so much! This is exactly what we needed. Any idea what could be causing this?

[strmer15]

Thank you so much! This is exactly what we needed. Any idea what could be causing this?

For whatever package manager you're using, it's pulling in the actual assert package instead of the browser-assert package that is supposed to be used instead, via the fallback config in Storybook. See the post above at https://github.com/storybookjs/storybook/issues/21911#issuecomment-1589741323