[Bug]: Styling and CSS (Uncaught TypeError: __webpack_require__.n is not a function)

[LukasMachetanz]

Describe the bug

Having a storybook-configuration with custom styles within an nx-workspace throws an unexpected error within the browser console - see screenshot.

Using Cypress together with storybook results in failing test suite of the e2e specs as an uncaught exception is thrown due to this bug.

To Reproduce

• Create a nx-workspace like npx create-nx-workspace my-workspace
  • Choose your style: integrated
  • What to create in the new workspace: angular
  • Application name: web-app
  • Default stylesheet format: SCSS
  • Enable distributed caching to make your CI faster: No
• Create a library like nx g @nrwl/angular:lib my-lib
• Create a component within the library like cd libs/my-lib/src/lib and nx g @nrwl/angular:c my-comp
• Create a storybook-configuration for the generated library like nx g @nrwl/angular:storybook-configuration my-lib (all questions can be answered with yes)
• Create a stylesheet styles.scss and include it within the section build:storybook of project.json as explained in Styling and CSS - "styles": ["libs/my-lib/src/styles.scss"]
• Start storybook with nx run my-lib:storybook
• Have a look at the console in the browser

[samvloeberghs]

Seems to be fixed with last version of nx and storybook libraries.
Can you try upgrading? @LukasMachetanz

[LukasMachetanz]

I run nx migrate latest which installs version 15.2.4 of @nrwl/storybook, but the problem still exists. Which version do you use @samvloeberghs?

[Mairu]

FYI: For us usage of version 15.2.4 removed the problem.

[samvloeberghs]

Same here; 15.2.4 fixed it.
Also check your storybook dependencies to be latest @LukasMachetanz

[LukasMachetanz]

I can confirm that the described issue is resolved using the latest versions.

[samvloeberghs]

The bug reappeared when I migrated to latest nx:
v15.2.4 to v15.3.3.
Storybook dependencies remained the same.

@LukasMachetanz can you please re-open?

[jogelin]

Same here, doing the migration to latest Nx 15.3.3 and storybook 6.5.14 and I have:

I found related PR here:

• Fix "__webpack_require__.nmd is not a function issue" in Angular 15 #19937
• Angular 15 compatibility #19875

[shilman]

We probably need to patch this back to 6.5 also @valentinpalkovic WDYT?

#20287

[samvloeberghs]

@shilman @valentinpalkovic can you please re-open the issue to be sure we track this?
Thanks a lot for investigating this!

[shilman]

@samvloeberghs it's patched back here. can you please test? https://github.com/storybookjs/storybook/releases/tag/v6.5.15-alpha.1

[jogelin]

@shilman @samvloeberghs for me it works!

Let's migrate all Angular Material Components from legacy to v15 now :D

[shilman]

Nice!! I'll do a full release now

[samvloeberghs]

@shilman
Can also confirm it works, thanks, you guys rock!

[LukasMachetanz]

@samvloeberghs, sorry for reopening the issue so late.

It seems that the problem is resolved again and that the issue can be closed, right?