Impossible to build storybook of lib after upgrading to v13 (possibly wrong ts config) #7846

VictorienTardif · 2021-11-23T08:09:57Z

Current Behavior

Any imported other lib with import { x } from "@company/otherLib" generates a Module not found: Error: Can't resolve '@company/otherLib' in currentLib/.storybook.

But it's working fine with v12.

Steps to Reproduce

I just ran nx migrate latest and applied migrations.

Note that when applying migrations, I got a message:

Running migration migration-v13
    Could not find TypeScript project for project: currentLib
    Could not find TypeScript project for project: otherLib

I think that it could be the main problem as building after upgrading I see Using angular project with "tsConfig:apps/public/tsconfig.app.json and I don't see Loading 1 config file anymore:

Before upgrading:

info => Cleaning outputDir: xxx/xxx/dist/storybook/currentLib
info => Loading presets
info => Compiling manager..
info => Compiling preview..
info => Loading 1 config file in "xxx/xxx/libs/currentLib/.storybook"
info => Loading 8 other files in "xxx/xxx/libs/currentLib/.storybook"
info => Adding stories defined in "xxx/xxx/libs/currentLib/.storybook/main.js"
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config
info => Using angular project "public:build" for configuring Storybook
info => Using angular-cli webpack config
info => Using default Webpack5 setup
...
>  NX   SUCCESS  Running target "build-storybook" succeeded

After upgrading:

info => Cleaning outputDir: xxx/xxx/dist/storybook/currentLib
info => Loading presets
info => Compiling manager..
info => Compiling preview..
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular browser target options from "public:build"
info => Using angular project with "tsConfig:apps/public/tsconfig.app.json"
info => Using default Webpack5 setup
Starting type checking service...
ERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve '@company/otherLib' in 'xxx/xxx/libs/currentLib/.storybook'

Environment

  Node : 14.15.0
  OS   : darwin x64
  yarn : 1.22.17
  
  nx : 13.2.2
  @nrwl/angular : 13.2.2
  @nrwl/cli : 13.2.2
  @nrwl/cypress : 13.2.2
  @nrwl/devkit : 13.2.2
  @nrwl/eslint-plugin-nx : 13.2.2
  @nrwl/express : undefined
  @nrwl/jest : 13.2.2
  @nrwl/linter : 13.2.2
  @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.2
  @nrwl/web : undefined
  @nrwl/workspace : 13.2.2
  @nrwl/storybook : 13.2.2
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 6.6.7
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.0.2
         @angular/cdk: 13.0.2
         @angular/common: 13.0.2
         @angular/compiler: 13.0.2
         @angular/core: 13.0.2
         @angular/fire: 7.1.1
         @angular/forms: 13.0.2
         @angular/platform-browser: 13.0.2
         @angular/platform-browser-dynamic: 13.0.2
         @angular/platform-server: 13.0.2
         @angular/router: 13.0.2
         @angular/service-worker: 13.0.2
         @ionic/angular: 5.8.5
         @ngneat/transloco: 2.23.3
         @nguniversal/express-engine: 12.1.2
         @taiga-ui/core: 2.21.0
         @angular-devkit/architect: 0.1202.8
         @angular-devkit/build-angular: 13.0.3
         @angular/cli: 13.0.3
         @angular/compiler-cli: 13.0.2
         @angular/language-service: 13.0.2
         @nguniversal/builders: 12.1.2
         @storybook/angular: 6.4.0-rc.3

The text was updated successfully, but these errors were encountered:

LukasMachetanz · 2021-11-23T13:17:24Z

I can confirm the issue. Struggling with the same.

mehmet-erim · 2021-11-24T09:00:01Z

Same here, see the logs:

Running migration migration-v13-testbed-teardown
Successfully finished migration-v13-testbed-teardown
---------------------------------------------------------
Running migration migration-v13
    Could not find TypeScript project for project: account
    Could not find TypeScript project for project: account-core
    Could not find TypeScript project for project: components
    Could not find TypeScript project for project: core
directoryExists is not a function
/Users/user1/Documents/abp/npm/ng-packs/node_modules/@nrwl/workspace/node_modules/yargs/build/lib/yargs.js:1132
                throw err;
                ^

Error: Command failed: /var/folders/_b/1_14x_0j78n6n73jz8w5sw740000gq/T/tmp-47134-STC0t0TWw895/node_modules/.bin/tao migrate --run-migrations
    at checkExecSyncError (child_process.js:616:11)
    at execSync (child_process.js:652:15)
    at Object.handler (/Users/user1/Documents/abp/npm/ng-packs/node_modules/@nrwl/workspace/src/command-line/nx-commands.js:125:42)
    at Object.runCommand (/Users/user1/Documents/abp/npm/ng-packs/node_modules/@nrwl/workspace/node_modules/yargs/build/lib/command.js:196:48)
    at Object.parseArgs [as _parseArgs] (/Users/user1/Documents/abp/npm/ng-packs/node_modules/@nrwl/workspace/node_modules/yargs/build/lib/yargs.js:1043:55)
    at Object.get [as argv] (/Users/user1/Documents/abp/npm/ng-packs/node_modules/@nrwl/workspace/node_modules/yargs/build/lib/yargs.js:986:25)
    at initLocal (/Users/user1/Documents/abp/npm/ng-packs/node_modules/@nrwl/cli/lib/init-local.js:28:79)
    at Object.<anonymous> (/Users/user1/Documents/abp/npm/ng-packs/node_modules/@nrwl/cli/bin/nx.js:43:32)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 47148,
  stdout: null,
  stderr: null
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Repo: https://github.com/abpframework/abp/tree/dev/npm/ng-packs

VictorienTardif · 2021-11-24T13:47:41Z

@mehmet-erim this is not the problem I have so you might want to open an other issue.
For me the problem is a Module not found: Error when building storybook but the migration succeeded and I never encountered your issue.

mehmet-erim · 2021-11-24T14:48:55Z

@VictorienTardif OK, I've created:
#7866

KylerJohnsonDev · 2021-11-24T15:49:05Z

Until this is resolved, a possible work around is to use a relative file path in your import statement. Nx's linting doesn't like this, however, so you'll need to disable it for that line.

Here's what I had that broke with this update:

import { SomeModel } from '@client/domain/models';

The work around:

// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
import { SomeModel } from '../../../../../domain/models/src/index';

oco2000 · 2021-11-26T08:19:15Z

My workaround is to add this to main.js of strybook to modify webpack configuration:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

...

config.resolve.plugins = config.resolve.plugins || [];
    config.resolve.plugins.push(
      new TsconfigPathsPlugin({
        configFile: 'insert filename of your tsconfig.json here'
      })
    );

LukasMachetanz · 2021-11-26T10:05:27Z

My error looks like this when running nx run-many --target=build-storybook --configuration production --all:

> nx run auth-data-service-skeleton:build-storybook 

>  NX  ui framework: @storybook/angular


>  NX  Storybook builder starting ...

info => Cleaning outputDir: /Users/machetanz/@smarter-ecommerce/ui-foundation/dist/storybook/auth-service-skeleton
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 => Compiling manager..
info => Compiling preview..
info => Loading 1 config file in "/Users/machetanz/@smarter-ecommerce/ui-foundation/libs/auth-data-service-skeleton/.storybook"
info => Loading 9 other files in "/Users/machetanz/@smarter-ecommerce/ui-foundation/libs/auth-data-service-skeleton/.storybook"
info => Adding stories defined in "/Users/machetanz/@smarter-ecommerce/ui-foundation/libs/auth-data-service-skeleton/.storybook/main.js"
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
Cannot read property 'target' of undefined

VictorienTardif · 2021-11-30T08:36:45Z

FYI storybookjs/storybook#16759

yharaskrik · 2021-12-02T02:55:05Z

I can confirm I'm running into both the import issue and the esm issue. With my packages fully updated I get the esm, then it continues then fails with the import issue.

VictorienTardif · 2021-12-03T09:14:45Z

I did not test yet but it should be fixed in latest Storybook release, see : storybookjs/storybook#16759 (comment)

And in next Nx release: #7917

mandarini · 2021-12-06T10:49:59Z

PR merged, so closing this! :)

LukasMachetanz · 2021-12-06T12:57:36Z

Thanks for tackling this. Everything works as expected now.

github-actions · 2023-03-23T07:06:05Z

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.

VictorienTardif added the type: bug label Nov 23, 2021

AgentEnder added the scope: storybook Issues related to Storybook support in Nx label Dec 3, 2021

juristr self-assigned this Dec 6, 2021

juristr mentioned this issue Dec 6, 2021

feat(storybook): upgrade to Storybook 6.4 #7917

Merged

mandarini closed this as completed Dec 6, 2021

github-actions bot added the outdated label Mar 23, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Impossible to build storybook of lib after upgrading to v13 (possibly wrong ts config) #7846

Impossible to build storybook of lib after upgrading to v13 (possibly wrong ts config) #7846

VictorienTardif commented Nov 23, 2021

LukasMachetanz commented Nov 23, 2021

mehmet-erim commented Nov 24, 2021 •

edited

Loading

VictorienTardif commented Nov 24, 2021

mehmet-erim commented Nov 24, 2021

KylerJohnsonDev commented Nov 24, 2021

oco2000 commented Nov 26, 2021

LukasMachetanz commented Nov 26, 2021

VictorienTardif commented Nov 30, 2021

yharaskrik commented Dec 2, 2021

VictorienTardif commented Dec 3, 2021

mandarini commented Dec 6, 2021

LukasMachetanz commented Dec 6, 2021

github-actions bot commented Mar 23, 2023

Impossible to build storybook of lib after upgrading to v13 (possibly wrong ts config) #7846

Impossible to build storybook of lib after upgrading to v13 (possibly wrong ts config) #7846

Comments

VictorienTardif commented Nov 23, 2021

Current Behavior

Steps to Reproduce

Environment

LukasMachetanz commented Nov 23, 2021

mehmet-erim commented Nov 24, 2021 • edited Loading

VictorienTardif commented Nov 24, 2021

mehmet-erim commented Nov 24, 2021

KylerJohnsonDev commented Nov 24, 2021

oco2000 commented Nov 26, 2021

LukasMachetanz commented Nov 26, 2021

VictorienTardif commented Nov 30, 2021

yharaskrik commented Dec 2, 2021

VictorienTardif commented Dec 3, 2021

mandarini commented Dec 6, 2021

LukasMachetanz commented Dec 6, 2021

github-actions bot commented Mar 23, 2023

mehmet-erim commented Nov 24, 2021 •

edited

Loading