[Bug]: zone.js incompatibilty

Tallyb commented 12 months ago

Describe the bug

error when building storybook angular with zonejs 0.14.0

ModuleNotFoundError: Module not found: Error: Package path ./dist/zone is not exported from package /Users/tally/yoobic/yoobic-ng-6/node_modules/zone.js (see exports field in /Users/tally/yoobic/yoobic-ng-6/node_modules/zone.js/package.json)

Zonejs updated their exports: https://github.com/angular/angular/blob/main/packages/zone.js/CHANGELOG.md#breaking-changes

To Reproduce

Upgrade to zonejs 0.14.0 and try building storybook.

System

No response

Additional context

No response

shilman commented 12 months ago

Hey @Tallyb ! Is this with a particular version of Angular or SB? Or is this purely a zone.js version incompatibility? Do you have a reproduction handy?

Tallyb commented 12 months ago

Latest versions of both are fine. (angular 16.2.6, SB 7.4). You can use the SB sandbox example. change zone.js to 0.14 and run yarn storybook and you will see the error. (that counts as a repro, right?)

This is the problematic line.

https://github.com/storybookjs/storybook/blob/a3cdabb025524822807318bc137f69be006596c2/code/frameworks/angular/src/client/globals.ts#L28

lammers commented 11 months ago

Hello :-), I ran into the same issue, after updating our project to the latest angular dependencies using renovate. zone.js introduced breaking changes in version 0.14. There is no /dist directory anymore in the node-module. Here is the stacktrace of the build job (configured by nx). Hope this helps :-)

info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using angular browser target options from "storybook:build-storybook"
info => Using angular project with "tsConfig:C:\LVM-Develop\workspace\lvm-core-components-client-lib\libs\storybook\.storybook\tsconfig.json"
info => Using default Webpack5 setup
10% building 0/4 entries 18/19 dependencies 6/12 modulesinfo => Copying static files: C:\LVM-Develop\workspace\lvm-core-components-client-lib\src\assets at C:\LVM-Develop\workspace\lvm-core-components-client-lib\dist\storybook\s
torybook\assets
=> Failed to build the preview
Module not found: Error: Package path ./dist/zone is not exported from package .\node_modules\zone.js (see exports field in .\node_modules\zone.js\package.json)
Error: Package path ./dist/zone is not exported from package .\node_modules\zone.js (see exports field in .\node_modules\zone.js\package.json)
    at .\node_modules\enhanced-resolve\lib\ExportsFieldPlugin.js:110:7
    at Hook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
    at Resolver.doResolve (.\node_modules\enhanced-resolve\lib\Resolver.js:516:16)
    at .\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:76:17
    at .\node_modules\enhanced-resolve\lib\DescriptionFileUtils.js:145:13
    at .\node_modules\enhanced-resolve\lib\forEachBail.js:39:13
    at onJson (.\node_modules\enhanced-resolve\lib\DescriptionFileUtils.js:130:6)
    at Array.<anonymous> (.\node_modules\enhanced-resolve\lib\DescriptionFileUtils.js:83:7)
    at runCallbacks (.\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:15)
    at .\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:249:5
    at .\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:541:9
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)`

and the versions of our dependencies :

"dependencies": {
    "@angular/animations": "16.2.7",
    "@angular/cdk": "16.2.5",
    "@angular/common": "16.2.7",
    "@angular/compiler": "16.2.7",
    "@angular/core": "16.2.7",
    "@angular/forms": "16.2.7",
    "@angular/platform-browser": "16.2.7",
    "@angular/platform-browser-dynamic": "16.2.7",
    "@angular/router": "16.2.7",
    "@ngrx/effects": "16.2.0",
    "@ngrx/entity": "16.2.0",
    "@ngrx/store": "16.2.0",
    "@sentry/angular-ivy": "7.72.0",
    "angular-auth-oidc-client": "16.0.1",
    "prismjs": "1.29.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "rxjs": "7.8.1",
    "storybook-addon-matomo": "1.0.2",
    "tslib": "2.6.2",
    "uuid": "9.0.1",
    "zone.js": "0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "16.2.4",
    "@angular-devkit/core": "16.2.4",
    "@angular-devkit/schematics": "16.2.4",
    "@angular-eslint/builder": "16.2.0",
    "@angular-eslint/eslint-plugin": "16.2.0",
    "@angular-eslint/eslint-plugin-template": "16.2.0",
    "@angular-eslint/schematics": "16.2.0",
    "@angular-eslint/template-parser": "16.2.0",
    "@angular/cli": "16.2.4",
    "@angular/compiler-cli": "16.2.7",
    "@angular/language-service": "16.2.7",
    "@compodoc/compodoc": "1.1.21",
    "@lvm/release": "2.0.0-2023-06.0",
    "@ngrx/schematics": "16.2.0",
    "@ngrx/store-devtools": "16.2.0",
    "@nx/angular": "16.9.1",
    "@nx/eslint-plugin": "16.9.1",
    "@nx/jest": "16.9.1",
    "@nx/js": "16.9.1",
    "@nx/storybook": "16.9.1",
    "@nx/workspace": "16.9.1",
    "@schematics/angular": "16.2.3",
    "@playwright/test": "1.38.1",
    "@storybook/addon-a11y": "7.4.5",
    "@storybook/addon-coverage": "0.0.9",
    "@storybook/addon-essentials": "7.4.5",
    "@storybook/addon-interactions": "7.4.5",
    "@storybook/addon-styling": "1.3.7",
    "@storybook/angular": "7.4.5",
    "@storybook/blocks": "7.4.5",
    "@storybook/core-common": "7.4.5",
    "@storybook/core-server": "7.4.5",
    "@storybook/html": "7.4.5",
    "@storybook/jest": "0.2.2",
    "@storybook/manager-api": "7.4.5",
    "@storybook/test-runner": "0.13.0",
    "@storybook/testing-library": "0.2.1",
    "@storybook/theming": "7.4.5",
    "@types/jasmine": "4.3.6",
    "@types/jest": "29.5.5",
    "@types/node": "18.18.0",
    "@types/uuid": "9.0.4",
    "@typescript-eslint/eslint-plugin": "5.62.0",
    "@typescript-eslint/parser": "5.62.0",
    "clean-css-cli": "5.6.2",
    "concurrently": "8.2.1",
    "copyfiles": "2.4.1",
    "deep-object-diff": "1.1.9",
    "eslint": "8.50.0",
    "eslint-config-prettier": "9.0.0",
    "eslint-plugin-import": "2.28.1",
    "eslint-plugin-jasmine": "4.1.3",
    "eslint-plugin-jsdoc": "46.8.2",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-rxjs": "5.0.3",
    "glob": "8.1.0",
    "http-server": "14.1.1",
    "jasmine-core": "5.1.1",
    "jasmine-spec-reporter": "7.0.0",
    "jest": "29.7.0",
    "jest-environment-jsdom": "29.7.0",
    "jest-preset-angular": "13.1.2",
    "karma": "6.4.2",
    "karma-chrome-launcher": "3.2.0",
    "karma-coverage": "2.2.1",
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "2.1.0",
    "karma-junit-reporter": "2.0.1",
    "lodash": "4.17.21",
    "ng-packagr": "16.2.3",
    "normalize.css": "8.0.1",
    "npm-run-all": "4.1.5",
    "nx": "16.9.1",
    "postcss-cli": "9.1.0",
    "prettier": "2.8.8",
    "raw-loader": "4.0.2",
    "remark-gfm": "3.0.1",
    "replace-in-files": "3.0.0",
    "rimraf": "3.0.2",
    "sass": "1.68.0",
    "sass-loader": "13.3.2",
    "sonar-scanner": "3.1.0",
    "stylelint": "13.13.1",
    "stylelint-order": "4.1.0",
    "svg-sprite": "2.0.2",
    "ts-jest": "29.1.1",
    "ts-node": "10.9.1",
    "typescript": "5.1.6",
    "wait-on": "7.0.1",
    "zx": "7.2.3"
  }

valentinpalkovic commented 11 months ago

Closing. Fixed by https://github.com/storybookjs/storybook/pull/24354

storybookjs / storybook