Angular 12 and Storybook with Webpack 5 issues

vrapalis commented 3 years ago

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 commented 3 years ago

Angular 12 Support

literalpie commented 3 years ago

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 commented 3 years ago

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

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:

I have tried creating a blank workspace and adding an angular project after and then adding story book -> same error
I have tried creating the workspace using npx create-nx-workspace@latest (test-org, angular, test-app, scss) -> same error
I have followed the directions exactly from this tutorial -> same error
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 commented 3 years ago

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

npm i -D @babel/preset-env@7.13.0

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

juristr commented 3 years ago

@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 (https://github.com/nrwl/nx/issues/5688#issuecomment-842454587) which tracks the current Angular 12 status.

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

kingjordan commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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:

https://github.com/juristr/nx-angular12-storybook-webpack5/commit/229a596cb234ede0d6f0fda549f9b2b824887892

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 commented 3 years ago

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

juristr commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

tried with 6.3.0-alpha.21

running to the same error.

Please advise the same

juristr commented 3 years ago

@dean-g Here there is more info: https://github.com/storybookjs/storybook/issues/14909#issuecomment-842934111.

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 commented 3 years ago

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

literalpie commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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: https://github.com/juristr/nx-angular12-storybook-webpack5/commit/dadfe1386da62b2a24b7e3af0e4dd10e620ce652

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 commented 3 years ago

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.

dean-g commented 3 years ago

It's working now after a restart. but still wondering the conflicting error

dean-g commented 3 years ago

@juristr Can you please help me with the following issue: ng build failed

rp3e11 commented 3 years ago

I am facing the same DefinePlugin Conflicting values for process.env issue @dean-g had. A restart didn't help in my case. Did you change something else?

rp3e11 commented 3 years ago

I created a reproduction repo and to get the error you had to execute the following

git checkout add-storybook
npm install
npx nx run ui:storybook

to reproduce the issue mentioned above. I used node 16.2 with npm 7.13 as well as node 14.17.0 with npm 6.14.13 and got the same result.

juristr commented 3 years ago

I am facing the same DefinePlugin Conflicting values for process.env issue @dean-g had. A restart didn't help in my case. Did you change something else?

I saw that as well but need to investigate where that is coming from. Is it blocking for you? like does the serve or build not work?

rp3e11 commented 3 years ago

Building and serving angular works, but storybook fails for angular v12 and storybook. Angular v11 works so I am not blocked in that sense, but I have to wait with upgrade until it is fixed or I can fix it.

kingjordan commented 3 years ago

Hello @juristr

I can confirm that everything works for me (with the changes listed here: https://github.com/juristr/nx-angular12-storybook-webpack5/commit/dadfe1386da62b2a24b7e3af0e4dd10e620ce652) and nx 12.3.4 and angular 12.0.0

On a side note, I have @ngneat/tailwind installed and it also works with that, the tailwind classes are getting picked up in storybook

I did have to remove the knobs registration with storybook because it is deprecated in favor of controls (storybook still runs but there is an error thrown for knobs if being used).

Thanks so much

jogelin commented 3 years ago

Tried with @storybook 6.3.0-beta.7 but it is failing because of looking for an angular.json file.

I am using a workspace.json file.

I thought it was fixed some time ago by https://github.com/storybookjs/storybook/pull/10881

nzacca commented 3 years ago

Hi @jogelin

The issue was fixed by https://github.com/storybookjs/storybook/pull/10881 but it looks like that code has since been refactored into this: https://github.com/storybookjs/storybook/commit/4f004183eafc9be7cf404b6dc2b1a22801e86201#diff-563ad5c21cbbf4fe47dc95368b910f9d1eab0f507d7399e02da2bc957d570a38R10

The issue appears to be that this new method is using the angular-devkit's readWorkspace by default which now first checks for the existence of angular.json and throws if it does not exist. Because of this, it never gets to the code here that handles reading the workspace.json file.

HarlesPilter commented 3 years ago

If anyone is still having issues with this using the latest packages from storybook, angular, nx (In my case it was storybook - 6.3.0-beta.4, angular - 12.0.0, nx - 12.3.5). Then one thing you can try is to install @storybook/cli and add a script in your package.json to run storybook directly. "start:storybook": "start-storybook --config-dir libs/angular-components/.storybook" This way I got actual error messages in the console why the startup was failing (none of those errors were shown using the nx run angular-components:storybook command) In my case it was some paths in the config files were wrong.

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

Another thing I noticed was that storybook was failing due to a failed import path in the angular apps styles.scss. I had this line in there @import '../../../dist/libs/angular-components/styles.css'; which was not found since I haven't built the component library yet (It's a publisable lib)

What I don't get is that why is storybook even trying to parse angular apps styles.scss

juristr commented 3 years ago

🤔 hmmm that's interesting. I'll look into it. Also, if you folks happen to have some time, make sure to test the latest 6.3 betas https://twitter.com/juristr/status/1400771614728466433?s=19

harry-kalligeros commented 3 years ago

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 commented 3 years ago

Here I also have issues when running storybook with nrwl@12.3.6 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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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.

https://github.com/stefan-schweiger/nx-angular12-storybook-webpack5/commit/1684be031feb734ca6c8e8f6ef01b85a0d22bf17

juristr commented 3 years ago

@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 https://github.com/storybookjs/storybook/issues/14257

itsahmedbilal commented 3 years ago

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

juristr commented 3 years ago

@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 commented 3 years ago

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

thutinavaneethreddy commented 3 years ago

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 :

npm install webpack@5.36.2 --save-dev
npm install dotenv-webpack@6.0.4 --save-dev (This fixed "cannot read property 'get' of undefined" but gave a new issue about snapshots)
npm install html-webpack-plugin@5.3.1 --save-dev (This fixed snapshot issue)
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 commented 3 years ago

@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 commented 3 years ago

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

stefan-schweiger commented 3 years ago

@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 commented 3 years ago

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

@HarlesPilter This PR should fix that https://github.com/nrwl/nx/pull/6129

jogelin commented 3 years ago

@juristr do you know if Nx will integrate the new storybook builders? https://github.com/storybookjs/storybook/pull/15061

juristr commented 3 years ago

@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[bot] commented 1 year ago

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.

nrwl / nx