Angular 12 and Storybook with Webpack 5 issues

[vrapalis]

Current Behavior

Can't run storybook based on nx angular, nx run shared-ui:storybook

Expected Behavior

Run storybook on web-server

Steps to Reproduce

npx create-nx-workspace@latest storybook-example
nx g library shared/ui --tag=scope:shared,type:ui
nx g c nav --flat -s -t --skipTests --project=shared-ui
npm i @nrwl/storybook -D
nx g @nrwl/angular:storybook-configuration shared-ui
nx run shared-ui:storybook

This issue may not be prioritized if details are not provided to help us reproduce the issue.

Failure Logs

Environment

Node: v14.17.0
Npm: 7.13.0

[vrapalis]

Angular 12 Support

[literalpie]

The first screenshot is showing babel warnings that shouldn't affect building or anything. You should be able to avoid them with npm i -D @babel/preset-env@~7.13.0.

[kingjordan]

I am getting the exact same errors,

REPRODUCE:
I have a totally clean install of nx workspace

1. npx create-nx-workspace test-org --preset=angular
2. cd test-org
3. npx ng generate lib ui
4. npx ng g component header --project=ui --export
5. npm i -D @nrwl/storybook
6. nx g storybook-configuration ui --configureCypress=true --generateCypressSpecs=true --generateStories=true
7. nx run ui:storybook

RESULT:
I get an error that says:

NX ERROR Running Target "ui:storybook" failed
Failed Tasks

• ui:storybook

I can use this header component in my test-app and it works.

I have tried creating fresh workspaces multiple ways and am getting this same error every time.

What I have tried:

1. I have tried creating a blank workspace and adding an angular project after and then adding story book -> same error
2. I have tried creating the workspace using npx create-nx-workspace@latest (test-org, angular, test-app, scss) -> same error
3. I have followed the directions exactly from this tutorial -> same error
4. I have tried updating @nrwl/storybook, @storybook/addon-knobs, and @storybook/builder-webpack5 from 6.2.7 to 6.2.9 -> same error

NX REPORT

Node : 14.15.1
OS : win32 x64
npm : 7.13.0

nx : Not Found
@nrwl/angular : 12.3.3
@nrwl/cli : 12.3.3
@nrwl/cypress : 12.3.3
@nrwl/devkit : 12.3.3
@nrwl/eslint-plugin-nx : 12.3.3
@nrwl/express : Not Found
@nrwl/jest : 12.3.3
@nrwl/linter : 12.3.3
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 12.3.3
@nrwl/web : Not Found
@nrwl/workspace : 12.3.3
@nrwl/storybook : 12.3.3
@nrwl/gatsby : Not Found
typescript : 4.2.4

[kingjordan]

@literalpie thanks for the tip to remove those babel warnings!
however,

npm i -D @babel/[email protected]

did not fix the error, storybook still does not run in new nx workspace

[juristr]

@kingjordan thanks for reporting. We're looking into this. Though this seems to be a Storybook + Angular 12 related thing as even with a plain Angular CLI project it doesn't work.

There's an open Storybook issue (#5688 (comment)) which tracks the current Angular 12 status.

(we will add the babel preset-env to have all those logs disappear ;) )

[kingjordan]

@juristr thanks for looking into this, the joys of having third party library dependencies 😜
let me know if you need any help testing as I am more than willing.

[acostaaluiz]

I am facing the same issue. is there any way to solve it? with an old version? thanks guys. I tried to run the storybook with the angular cli 12 only, and it worked.

[juristr]

Hey all, looks like the latest Storybook 6.3.0 alpha fixes most of the issues. I created a repo that shows a working version of Nx 12 + Ng 12 + Webpack 5 and Storybook. Specifically this commit shows what to do to fix it:

juristr/nx-angular12-storybook-webpack5@229a596

I'll keep this issue open as a reference and for following along as the Storybook folks fix this and provide a proper release. Hopefully this unblocks you all for now

[literalpie]

@juristr can you double-check that building storybook works? nx run shared-ui:build-storybook gives me an error in your example project.

[juristr]

@MickL yep the storybook build still fails. The problem is that @storybook/core-server is still having a dependency on Webpack 4, thus in the JavaScriptModulesPlugin.js when doing an instance check those won't match, as Storybook passes in a Webpack 4 instance, comparing it to a Webpack 5 instance

I'm looking into it

[juristr]

As a quick update. I'm in contact with the Storybook team and they're looking into it. This is a weird NPM package hoisting issue 🤷‍♂️

[kingjordan]

thanks @juristr
I can confirm that a nx workspace that did not work (6.2.7 and 6.2.9) will now run storybook if I make the changes you linked to in package.json (6.3.0-alpha etc...)
But as @literalpie mentioned, the build of story book still fails. For me this unblocks development for us as we don't need the build right now.
Again, thank you so much for your effort solving this issue!

[juristr]

@kingjordan cool. Yeah I know the Storybook folks is working on a fix so hopefully we have one in the next couple of days 🤞

[dean-g]

tried with 6.3.0-alpha.21

running to the same error.

Please advise the same

[juristr]

@dean-g Here there is more info: storybookjs/storybook#14909 (comment).

Basically you need to change the optimization: true property in the Angular app's configuration in angular.json. The optimization property can either be a boolean or an expanded object where you can enable/disable the settings for each individual optimization target. The link above shows how to fix it

[dean-g]

It's working now!. thank you very much @juristr

[literalpie]

Try with the latest storybook alpha (6.3.0-alpha.42) and npm install @storybook/manager-webpack5. This fixed all of the issues I was having

[dean-g]

I did the fresh run today. got into the following error:

Cannot find module '@storybook/manager-webpack5'
Require stack:

installed: yarn add @storybook/manager-webpack5

after this getting new error:

Cannot find module '../presets/manager-preset'
Require stack:

• node_modules/@storybook/manager-webpack5/dist/cjs/index.js
• node_modules/@storybook/core-server/dist/cjs/utils/get-manager-builder.js
• node_modules/@storybook/core-server/dist/cjs/build-static.js
• node_modules/@storybook/core-server/dist/cjs/index.js
• node_modules/@storybook/core/dist/cjs/server.js
• node_modules/@storybook/core/server.js
• node_modules/@nrwl/storybook/src/executors/storybook/storybook.impl.js
• node_modules/@nrwl/tao/src/shared/workspace.js
• node_modules/@nrwl/tao/src/commands/run.js
• node_modules/@nrwl/tao/index.js
• node_modules/@nrwl/cli/lib/run-cli.js

@juristr Can you please check this and advise?

[juristr]

@dean-g I was just about to test the release as well as this was the proposed solution from the meeting with the Storybook team last week.

Upgrading to the latest alpha release fixed the build for me as well. Here's my commit to the example repo: juristr/nx-angular12-storybook-webpack5@dadfe13

I will closely monitor the 6.3 release as it stabilizes and prepare an Nx migration to make sure all Angular 12 folks are migrated to 6.3. Keep an eye on this issue to be notified (I'll keep this open for tracking and update purposes)

[dean-g]

Thank you @juristr

My build got to succeed now but getting a few Conflicting errors and the storybook is not starting up.

Please check this and advise.

[harry-kalligeros]

I was able to make it work with the following configuration:

   "@nrwl/storybook": "12.3.6",
    "@nrwl/tao": "12.3.6",
    "@nrwl/web": "12.3.6",
    "@nrwl/workspace": "12.3.6",
    "@storybook/addon-actions": "6.3.0-beta.12",
    "@storybook/addon-console": "1.2.3",
    "@storybook/addon-controls": "6.3.0-beta.12",
    "@storybook/addon-knobs": "6.3.0-next.2",
    "@storybook/angular": "6.3.0-beta.12",
    "@storybook/builder-webpack5": "6.3.0-beta.12",
    "@storybook/manager-webpack5": "~6.3.0-beta.12",

For some reason, npm installed a react/react-dom version 15.x.x and I had an error in the console: react.createContext is not a function. When I realized that, I installed manually the versions 16.14.0 of these packages, and now I have storybook working.

[spierala]

Here I also have issues when running storybook with [email protected] and ng@12.
I created a new nx workspace from scratch, created an application and added storybook to that application as described here.

When running nx run my-app:storybook there is this error:

node_modules\webpack\lib\util\MapHelpers.js:17
        const value = map.get(key);
                          ^

TypeError: Cannot read property 'get' of undefined

[JSMike]

FYI, I'm also having success with Storybook 6.3.0-rc.2. Just make sure to update your builder, and convert all of your knobs to controls, because knobs are removed in 6.3.0. Heaviest lift is the knobs => controls but that was already deprecated, so we knew that was coming eventually. https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324

[juristr]

Heaviest lift is the knobs => controls but that was already deprecated, so we knew that was coming eventually.

@JSMike yeah we're already working to make sure the new setups get generated with controls rather than knobs and maybe we're able to provide a migration for that as well.

@spierala can you have a look at my setup: https://github.com/juristr/nx-angular12-storybook-webpack5. That's a working one, have a look especially at the last 2 commits which show the packages I've added to get it working.

I'm currently waiting for Storybook to cut the 6.3 and then we'll release an Nx migration to upgrade folks to a running version.

[stefan-schweiger]

@juristr when using your setup I'm still getting the Conflicting values for 'process.env'. I've even tried to update everything to the currently newest packages and setting builder: 'webpack5' explicitly but that also didn't fix it.

stefan-schweiger/nx-angular12-storybook-webpack5@1684be0

[juristr]

@stefan-schweiger yep, that's a new thing that came up recently. It's being discussed here on the Storybook repo and a blocker for their 6.3 release atm
storybookjs/storybook#14257

[itsahmedbilal]

@juristr can you please help me to resolve this error related to build angular-storybook.

[juristr]

@ahmedbillalimtiazghumman hard to tell without more info. Looks to me like the webpack.config.js in your .storybook folder might have something in there which is no more valid for Webpack 5. The error in the screenshot you provided shows some hints about the error

[itsahmedbilal]

@juristr i have not changed anything, it is working with angular v9, i am getting this error after updating to angular v12.

[thutinavaneethreddy]

If someone is still looking around for a solution, here is what worked for me with storybook 6.2.7 version and angular 12/nx 12.3.6 :

1. npm install [email protected] --save-dev
2. npm install [email protected] --save-dev (This fixed "cannot read property 'get' of undefined" but gave a new issue about snapshots)
3. npm install [email protected] --save-dev (This fixed snapshot issue)
4. In the build config in angular.json, change "optimization" : "false" to
   "optimization": {
   "styles": false,
   "scripts": false,
   "fonts": false
   }

This fixed the warning - "Cannot read property 'minify' of undefined"

After this, I was able to build and run storybook without any errors

[markhus-aurelius]

@juristr i have not changed anything, it is working with angular v9, i am getting this error after updating to angular v12.

That's exactly his point. You HAVE to change something to make your config compatible with Webpack 5

[shagene]

Would like to know myself what needs to be changed to work with Angular 12 / Webpack 5

[stefan-schweiger]

@shagene my current workaround is to add the following:

/.storybook/main.js:

builder: 'webpack5',
// I don't know if the config below here is needed, but I don't see why not to add it
angularOptions: {
  enableIvy: true,
},
addons: [
  'storybook-addon-angular-ivy',
  // ...
]

/.storybook/webpack.config.js:

module.exports = async ({ config, mode }) => {
  // Make whatever fine-grained changes you need
  config.plugins = [
    ...config.plugins.filter((plugin) => !plugin.definitions),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(
        mode === 'DEVELOPMENT' ? 'development' : 'production'
      ),
      'process.env.NODE_PATH': JSON.stringify([]),
      'process.env.STORYBOOK': JSON.stringify('true'),
      'process.env.PUBLIC_PATH': JSON.stringify('.'),
    }),
  ];

  // Return the altered config
  return config;
};

I still get the error message in the console, but at least storybook starts up and I can use it.

[juristr]

@juristr Is it possible to get actual errors from storybook-start to pass through the nx command?

@HarlesPilter This PR should fix that #6129

[jogelin]

@juristr do you know if Nx will integrate the new storybook builders? storybookjs/storybook#15061

[juristr]

@jogelin hey, it's on my list to give them a look and verify whether it might be useful integrating them into Nx (once I'm back from vacation 😉)

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.