search

nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
23.69k stars 2.37k forks source link

Error trying to run storybook for angular library in nx 13.2 #7823

Closed christianacca closed 2 years ago

christianacca commented 2 years ago

Current Behavior

Receive an error trying to run storybook for an angular library in a newly minted nx 13.2 angular workspace.

> nx run public-angular-swa-auth:storybook 
info => Loading presets
WARN   Failed to load preset: "/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js"
ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@angular/compiler-cli/bundles/ngcc/index.js from /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js not supported.
ERR! Instead change the require of index.js in /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js to a dynamic import() which is available in all CommonJS modules.

Expected Behavior

Should be able to run storybook successfully

Steps to Reproduce

To see the problem:

git clone https://github.com/christianacca/static-web-apps-auth-13
npm i
npx nx storybook public-angular-swa-auth

The above repo was created using the following commands:

npx create-nx-workspace@latest static-web-apps-auth --preset=empty --cli=angular --npm-scope=christianacca --interactive=false --nx-cloud=false

# Open angular.json and change: `"version": 1` to `"version": 2`

npm install -D @nrwl/angular
npx ng g @nrwl/angular:application angular-swa-auth-demo --routing --style scss --inline-style --prefix app --tags=scope:angular-swa-auth-demo,framework:angular --standalone-config --skip-tests
npx ng g @nrwl/angular:lib angular-swa-auth --directory=public --prefix swa --tags=scope:public,type:util,framework:angular,status=published,bundle:main --style scss --simple-module-name --publishable --importPath=@christianacca/angular-swa-auth
npx nx g @nrwl/storybook:configuration public-angular-swa-auth --configure-cypress=false --ui-framework=@storybook/angular

NOTE: I was able to reproduce the problem with both publishable and non-publishable/buildable library

Failure Logs

PS /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth> npx nx storybook public-angular-swa-auth

> nx run public-angular-swa-auth:storybook 
info => Loading presets
WARN   Failed to load preset: "/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js"
ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@angular/compiler-cli/bundles/ngcc/index.js from /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js not supported.
ERR! Instead change the require of index.js in /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js to a dynamic import() which is available in all CommonJS modules.
ERR!     at Object.<anonymous> (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js:70:14)
ERR!     at interopRequireDefault (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:159:16)
ERR!     at getContent (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:175:10)
ERR!     at loadPreset (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:184:20)
ERR!     at /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:236:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:235:18)
ERR!     at getPresets (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:293:23)
ERR!     at loadAllPresets (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:318:10)
ERR!     at buildDevStandalone (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-server/dist/cjs/build-dev.js:101:48)
ERR!  Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@angular/compiler-cli/bundles/ngcc/index.js from /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js not supported.
ERR! Instead change the require of index.js in /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js to a dynamic import() which is available in all CommonJS modules.
ERR!     at Object.<anonymous> (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js:70:14)
ERR!     at interopRequireDefault (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:159:16)
ERR!     at getContent (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:175:10)
ERR!     at loadPreset (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:184:20)
ERR!     at /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:236:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:235:18)
ERR!     at getPresets (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:293:23)
ERR!     at loadAllPresets (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-common/dist/cjs/presets.js:318:10)
ERR!     at buildDevStandalone (/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/node_modules/@storybook/core-server/dist/cjs/build-dev.js:101:48) {
ERR!   code: 'ERR_REQUIRE_ESM'
ERR! }
info => Loading 1 config file in "/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/libs/public/angular-swa-auth/.storybook"
info => Loading 8 other files in "/Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/libs/public/angular-swa-auth/.storybook"
WARN We found no files matching any of the following globs:
WARN 
WARN ../src/lib/**/*.stories.mdx
WARN ../src/lib/**/*.stories.@(js|jsx|ts|tsx)
WARN 
WARN Maybe your glob was invalid?
WARN see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-mainjs
(node:27911) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/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 => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config
info => Using angular project "angular-swa-auth-demo:build" for configuring Storybook
ERR! => Could not get angular cli webpack config
TypeError: Cannot read properties of undefined (reading 'target')

          Broken build, fix the error above.
          You may need to refresh the browser.

———————————————————————————————————————————————

>  NX   ERROR  Running target "public-angular-swa-auth:storybook" failed

Environment

Node : 16.10.0
  OS   : darwin x64
  npm  : 7.24.0

  nx : 13.2.1
  @nrwl/angular : 13.2.1
  @nrwl/cli : 13.2.1
  @nrwl/cypress : 13.2.1
  @nrwl/devkit : 13.2.1
  @nrwl/eslint-plugin-nx : 13.2.1
  @nrwl/express : undefined
  @nrwl/jest : 13.2.1
  @nrwl/linter : 13.2.1
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.2.1
  @nrwl/web : undefined
  @nrwl/workspace : 13.2.1
  @nrwl/storybook : 13.2.1
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.0.2
         @angular/common: 13.0.2
         @angular/compiler: 13.0.2
         @angular/core: 13.0.2
         @angular/forms: 13.0.2
         @angular/platform-browser: 13.0.2
         @angular/platform-browser-dynamic: 13.0.2
         @angular/router: 13.0.2
         @angular-devkit/build-angular: 13.0.3
         @angular/cli: 13.0.3
         @angular/compiler-cli: 13.0.2
         @angular/language-service: 13.0.2
         @storybook/angular: 6.3.12

(node:30085) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/christian.crowhurst/Documents/scrap/angular/static-web-apps-auth/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)
hozefam commented 2 years ago

try upgrading storybook to rc version npx sb upgrade --prerelease

LukasMachetanz commented 2 years ago

I can confirm the issue. Struggling with the same.

npx sb upgrade --prerelease fixed the initial error but unfortunately another error occurred.

LukasMachetanz commented 2 years ago

My error looks like this running nx run design-system:storybook:

> nx run design-system:storybook 
info => Loading presets
WARN   Failed to load preset: "/Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js"
ERR! Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@angular/compiler-cli/bundles/ngcc/index.js
ERR! require() of ES modules is not supported.
ERR! require() of /Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@angular/compiler-cli/bundles/ngcc/index.js from /Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
ERR! Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@angular/compiler-cli/package.json.
ERR! 
ERR!     at new NodeError (internal/errors.js:322:7)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
ERR!     at Module.load (internal/modules/cjs/loader.js:950:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:790:12)
ERR!     at Module.require (internal/modules/cjs/loader.js:974:19)
ERR!     at require (internal/modules/cjs/helpers.js:93:18)
ERR!     at Object.<anonymous> (/Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js:70:14)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:950:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:790:12)
ERR!     at Module.require (internal/modules/cjs/loader.js:974:19)
ERR!     at require (internal/modules/cjs/helpers.js:93:18)
ERR!     at interopRequireDefault (/Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@storybook/core-common/dist/cjs/presets.js:159:16)
ERR!     at getContent (/Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@storybook/core-common/dist/cjs/presets.js:175:10)
ERR!     at loadPreset (/Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@storybook/core-common/dist/cjs/presets.js:184:20)
ERR!  Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@angular/compiler-cli/bundles/ngcc/index.js
ERR! require() of ES modules is not supported.
ERR! require() of /Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@angular/compiler-cli/bundles/ngcc/index.js from /Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
ERR! Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@angular/compiler-cli/package.json.
ERR! 
ERR!     at new NodeError (internal/errors.js:322:7)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
ERR!     at Module.load (internal/modules/cjs/loader.js:950:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:790:12)
ERR!     at Module.require (internal/modules/cjs/loader.js:974:19)
ERR!     at require (internal/modules/cjs/helpers.js:93:18)
ERR!     at Object.<anonymous> (/Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js:70:14)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:950:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:790:12)
ERR!     at Module.require (internal/modules/cjs/loader.js:974:19)
ERR!     at require (internal/modules/cjs/helpers.js:93:18)
ERR!     at interopRequireDefault (/Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@storybook/core-common/dist/cjs/presets.js:159:16)
ERR!     at getContent (/Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@storybook/core-common/dist/cjs/presets.js:175:10)
ERR!     at loadPreset (/Users/machetanz/@smarter-ecommerce/ui-foundation/node_modules/@storybook/core-common/dist/cjs/presets.js:184:20) {
ERR!   code: 'ERR_REQUIRE_ESM'
ERR! }
info => Loading 1 config file in "/Users/machetanz/@smarter-ecommerce/ui-foundation/libs/design-system/.storybook"
info => Loading 9 other files in "/Users/machetanz/@smarter-ecommerce/ui-foundation/libs/design-system/.storybook"
info => Adding stories defined in "/Users/machetanz/@smarter-ecommerce/ui-foundation/libs/design-system/.storybook/main.js"
<i> [webpack-dev-middleware] wait until bundle finished
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config
info => Using angular project "design-system-demo:build" for configuring Storybook
ERR! => Could not get angular cli webpack config
TypeError: Cannot read property 'target' of undefined
simonknittel commented 2 years ago

We're having the same issue. However, mine wasn't fixed by rolling back to a version previous to 13.2.x. even 13.0.x or 13.1.x didn't help. We traced the error back to a Pull Request in which we primarily upgrade Angular from 12 to 13.

Last Friday I tried npx sb upgrade --prerelease. As @LukasMachetanz described, it fixed the intial error but instead now complains about a new error. It seems that it can't resolve packages described in the compilerOptions.paths property of the tsconfig.json.

Today (or on the weekend) the new nx and Storybook versions got released which results in the same behavior.

Apparently there is an existing issue on that: https://github.com/storybookjs/storybook/issues/16759 The workaround from that issue seems to be working for us.

juristr commented 2 years ago

@christianacca In your repo it looks like you're still on @storybook/* v6.3.0. In order to be compatible with Angular 13 you need to use Storybook v6.4.0. In general when upgrading, the best is to use nx migrate as we'll make sure to upgrade you to the correct Angular and Storybook versions. //cc @LukasMachetanz I think same in your case.

@simonknittel I think your error is a different one and not related to the ESM modules not being found. It looks like the tsconfig inheritance chain is not properly resolved in the latest Storybook 6.4. It's on the Storybook side, but I'll try to look into how to fix this.

LukasMachetanz commented 2 years ago

I am not sure which storybook version I had when I posted https://github.com/nrwl/nx/issues/7823#issuecomment-979845513, but I am using v6.4.0 now.

Currently I am also struggling with resolvement issues as described by @simonknittel in https://github.com/nrwl/nx/issues/7823#issuecomment-981385599. I am pretty sure we have the same issue here.

@juristr Thanks for looking into this.

christianacca commented 2 years ago

@juristr she I can try that upgrade. Hopefully the next version of nx (I was using 13.2.1) will default to using Storybook 6.4 as the dependency...

juristr commented 2 years ago

@christianacca Yep it will. Work is already underway => https://github.com/nrwl/nx/pull/7917

mandarini commented 2 years ago

PR merged, so closing this! :)

LukasMachetanz commented 2 years ago

Thanks for tackling this. Everything works as expected now.

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.