Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
yannbf opened this issue Apr 4, 2023 · 7 comments

Comments

@yannbf
Copy link
Member

yannbf commented Apr 4, 2023

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 #20615

image

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

@shilman shilman moved this to Stabilization in Core Team Projects Apr 4, 2023
@vanessayuenn vanessayuenn moved this from Stabilization to Empathy Backlog in Core Team Projects Apr 24, 2023
@shilman shilman added the sev:S3 label Jun 5, 2023
@gitstart-app
Copy link

gitstart-app bot commented Jun 5, 2023

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

@vanessayuenn vanessayuenn moved this from Empathy Backlog to Ready for work in Core Team Projects Jun 8, 2023
@gitstart-storybook
Copy link
Collaborator

gitstart-storybook commented Jun 13, 2023

@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
Copy link

Hi,

Is there a workaround in the meantime?

@vinnycodes
Copy link

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
Copy link
Contributor

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
Copy link

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
Copy link
Contributor

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 #21911 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants