Storybook angular don't work if follow tutorial steps

Current Behavior

Storybooks don’t run. Crashes with error

Expected Behavior

Storybook runs properly

Steps to Reproduce

So I have usual monorepo with NX. I have 3 apps in it and a UI library. I installed storybook following docs. Everything is ok but once use command nx run ui:storybook, I have an error

Failure Logs

> nx run ui:storybook
info => Loading presets
(node:12731) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /monorepo/path/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Loading angular-cli config for angular 12.2.x
info => Using angular browser target options from "ui:build-storybook"
info => Using angular project with "tsConfig:/monorepo/path/libs/ui/.storybook/tsconfig.json"
ERR! TypeError: getTypeScriptConfig is not a function
ERR!     at /monorepo/path/node_modules/.pnpm/@storybook+angular@6.5.9_t7vatw5yz57kcw3cq4ba5bl5l4/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-12.2.x.js:32:175
ERR!     at generateWebpackConfig (/monorepo/path/node_modules/.pnpm/@angular-devkit+build-angular@0.1102.18_5dmnvfwmrb4eo4i7mxcir5syjq/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:45:49)
ERR!     at async generateBrowserWebpackConfigFromContext (/monorepo/path/node_modules/.pnpm/@angular-devkit+build-angular@0.1102.18_5dmnvfwmrb4eo4i7mxcir5syjq/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:136:20)
ERR!     at async generateI18nBrowserWebpackConfigFromContext (/monorepo/path/node_modules/.pnpm/@angular-devkit+build-angular@0.1102.18_5dmnvfwmrb4eo4i7mxcir5syjq/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:77:20)
ERR!  TypeError: getTypeScriptConfig is not a function
ERR!     at /monorepo/path/node_modules/.pnpm/@storybook+angular@6.5.9_t7vatw5yz57kcw3cq4ba5bl5l4/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-12.2.x.js:32:175
ERR!     at generateWebpackConfig (/monorepo/path/node_modules/.pnpm/@angular-devkit+build-angular@0.1102.18_5dmnvfwmrb4eo4i7mxcir5syjq/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:45:49)
ERR!     at async generateBrowserWebpackConfigFromContext (/monorepo/path/node_modules/.pnpm/@angular-devkit+build-angular@0.1102.18_5dmnvfwmrb4eo4i7mxcir5syjq/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:136:20)
ERR!     at async generateI18nBrowserWebpackConfigFromContext (/monorepo/path/node_modules/.pnpm/@angular-devkit+build-angular@0.1102.18_5dmnvfwmrb4eo4i7mxcir5syjq/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:77:20)

Environment

>  NX   Report complete - copy this into the issue template

   Node : 16.14.0
   OS   : darwin arm64
   pnpm : 7.5.1
   
   nx : 14.4.2
   @nrwl/angular : 11.6.3
   @nrwl/cypress : 11.6.3
   @nrwl/detox : Not Found
   @nrwl/devkit : 11.6.3
   @nrwl/eslint-plugin-nx : 11.6.3
   @nrwl/express : Not Found
   @nrwl/jest : 11.6.3
   @nrwl/js : Not Found
   @nrwl/linter : 11.6.3
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.4.2
   @nrwl/web : Not Found
   @nrwl/workspace : 11.6.3
   typescript : 4.1.6
   ---------------------------------------
   Community plugins:
   	 @ionic/angular: 5.0.7
   	 @ngrx/effects: 11.1.1
   	 @ngrx/entity: 11.1.1
   	 @ngrx/schematics: 10.1.2
   	 @ngrx/store: 11.1.1
   	 @ngrx/store-devtools: 11.1.1
   	 rxjs: 6.6.7
   	 @nxtend/capacitor: 11.1.1
   	 @nxtend/ionic-angular: 11.1.1

(node:16392) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /PATH/monorepo/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

My clues is maybe because storybook and NX uses different webpack versions. Any ideas or suggestions?

[mandarini]

I’m glad I could help!

[ddtch]

@mandarini ok, I got you. Will try to align all versions and try again. Thank you a lot for helping I think we can close the issue