storybook
storybook copied to clipboard
Published
20 hours ago •
storybookjs
storybookjs
[Bug]: storybook 7 + ng14.0.1
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
}
}
