search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.62k stars 9.31k forks source link

[Bug]: storybook 7 + ng14.0.1 #21617

Closed GuillaumeUnice closed 1 year ago

GuillaumeUnice commented 1 year ago

Describe the bug

I can't install storybook v7 on angular project

ng run angular:storybook

WARN   Failed to load preset: {"type":"presets","name":"C:\\Desktop\\projects\\ng13\\node_modules\\@storybook\\angular\\dist\\server\\framework-preset-angular-cli.js"} on level 1
ERR! SyntaxError: Invalid or unexpected token
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Object.newLoader (C:\Desktop\projects\ng13\node_modules\esbuild-register\dist\node.js:2262:9)
ERR!     at Object.extensions..js (C:\Desktop\projects\ng13\node_modules\esbuild-register\dist\node.js:4807:24)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!  SyntaxError: Invalid or unexpected token
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Object.newLoader (C:\Desktop\projects\ng13\node_modules\esbuild-register\dist\node.js:2262:9)
ERR!     at Object.extensions..js (C:\Desktop\projects\ng13\node_modules\esbuild-register\dist\node.js:4807:24)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
WARN   Failed to load preset: {"type":"presets","name":"C:\\Desktop\\projects\\ng13\\node_modules\\@storybook\\angular\\dist\\server\\framework-preset-angular-cli.js"} on level 1
ERR! SyntaxError: Invalid or unexpected token
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Object.newLoader (C:\Desktop\projects\ng13\node_modules\esbuild-register\dist\node.js:2262:9)
ERR!     at Object.extensions..js (C:\Desktop\projects\ng13\node_modules\esbuild-register\dist\node.js:4807:24)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!  SyntaxError: Invalid or unexpected token
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Object.newLoader (C:\Desktop\projects\ng13\node_modules\esbuild-register\dist\node.js:2262:9)
ERR!     at Object.extensions..js (C:\Desktop\projects\ng13\node_modules\esbuild-register\dist\node.js:4807:24)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
info => Starting manager..
Warning: Entry point 'ng2-pdf-viewer' contains deep imports into 'C:/Desktop/projects/ng13/node_modules/ng2-pdf-viewer/node_modules/pdfjs-dist/es5/build/pdf', 'C:/Desktop/projects/ng13/node_modules/ng2-pdf-viewer/node_modules/pdfjs-dist/es5/web/pdf_viewer'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
WARN Force closed manager build
ERR! SyntaxError: Invalid or unexpected token
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Object.newLoader (C:\Desktop\projects\ng13\node_modules\esbuild-register\dist\node.js:2262:9)
ERR!     at Object.extensions..js (C:\Desktop\projects\ng13\node_modules\esbuild-register\dist\node.js:4807:24)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!  SyntaxError: Invalid or unexpected token
ERR!     at Object.compileFunction (node:vm:352:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Object.newLoader (C:\Desktop\projects\ng13\node_modules\esbuild-register\dist\node.js:2262:9)
ERR!     at Object.extensions..js (C:\Desktop\projects\ng13\node_modules\esbuild-register\dist\node.js:4807:24)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)

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

To Reproduce

upgrade from ng13 to ng14 npx storybook@next init ng run my-project:storybook

System

Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.63)
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-rc.3 => 7.0.0-rc.3
    @storybook/addon-interactions: ^7.0.0-rc.3 => 7.0.0-rc.3
    @storybook/addon-links: ^7.0.0-rc.3 => 7.0.0-rc.3
    @storybook/angular: ^7.0.0-rc.3 => 7.0.0-rc.3
    @storybook/blocks: ^7.0.0-rc.3 => 7.0.0-rc.3
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

here is the angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular": {
      "root": "src",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "ixbat",
      "schematics": {
        "@ngrx/schematics:component": {
          "styleext": "scss",
          "changeDetection": "OnPush",
          "spec": false
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json",
              {
                "glob": "**/*",
                "input": "node_modules/ngx-extended-pdf-viewer/assets/locale",
                "output": "/assets/locale/"
              },
              {
                "glob": "**/*",
                "input": "node_modules/ngx-extended-pdf-viewer/assets/images",
                "output": "/assets/images/"
              },
              {
                "glob": "**/pdf.worker*.js",
                "input": "node_modules/ngx-extended-pdf-viewer/assets",
                "output": "/assets/"
              }
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "node_modules/@syncfusion/"
              ]
            },
            "styles": [
              "src/styles.scss",
              "node_modules/ngx-toastr/toastr.css"
            ],
            "scripts": [
              "node_modules/ngx-extended-pdf-viewer/assets/pdf-es5.js",
              "node_modules/ngx-extended-pdf-viewer/assets/viewer-es5.js"
            ],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                },
                {
                  "replace": "src/app/app-routing/app-routing.module.ts",
                  "with": "src/app/app-routing/app-routing.prod.module.ts"
                },
                {
                  "replace": "src/app/app-optional-modules/app-optional-modules.ts",
                  "with": "src/app/app-optional-modules/app-optional-modules.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": false
            },
            "development": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": false
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "node_modules/@syncfusion/"
              ]
            },
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        },
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "configDir": ".storybook",
            "browserTarget": "angular:build",
            "compodoc": false,
            "port": 6006
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "configDir": ".storybook",
            "browserTarget": "angular:build",
            "compodoc": false,
            "outputDir": "storybook-static"
          }
        }
      }
    },
    "angular-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "angular:serve"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "e2e/**/*.ts",
              "e2e/**/*.html"
            ]
          }
        }
      }
    }
  },
  "cli": {
    "schematicCollections": [
      "@angular-eslint/schematics"
    ],
    "analytics": false
  }
}
shilman commented 1 year ago

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. We prioritize issues with reproductions over those without. Thank you! 🙏

shilman commented 1 year ago

@valentinpalkovic @sheriffMoose does this look familiar to either of you?

valentinpalkovic commented 1 year ago

No, it doesn't. A reproduction would be fantastic!

GuillaumeUnice commented 1 year ago

Hi,

Ok thanks for the return, I will supply as soon as possible but before I try to clean it to have the minimum viable.

DanWebb commented 1 year ago

I was receiving the same error, I fixed it by renaming my browserlist file from browserlist to .browserslistrc.

Explanation

The point of failure within storybook/angular was this line in angular-cli-webpack.js where "@angular-devkit/build-angular/src/utils/webpack-browser-config" is imported.

Following the rabbit hole...the imported angular-devkit script fails when require('browserlist'); is called.

I noticed the working storybook reproduction uses a .browserlistrc file whereas my project was using a browserlist file, according to the readme both are valid, but I couldn't see any other differences so I changed the name and everything was well in the world once again.

I still don't know what the actual issue is

Can anyone tell where this issue comes from exactly? I would say it's browserlist butthe config file hasn't caused any issues until angular/storybook was upgraded. The import path @angular-devkit/build-angular/src/utils/webpack-browser-config seems dodgy to me, why is angular/storybook requiring this nested source code?

github-actions[bot] commented 1 year ago

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

github-actions[bot] commented 1 year ago

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.