storybook: Angular 13: running Storybook 6.4 fails with ModuleBuildError: Module build failed

Describe the bug

I upgraded from Storybook 6.3.2 to 6.4.0

When running Storybook 6.4 together with Angular 13 the Storybook build fails with the following error:

info @storybook/angular v6.4.0
info
(node:22708) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Serving static files from ././src/ng1/app at /
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular project with "tsConfig:C:\work\source\ng\cc\ui\tools\storybook\tsconfig.json"
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
info => Using default Webpack5 setup
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
<i> [webpack-dev-middleware] wait until bundle finished
7% setup compile fork-ts-checker-webpack-pluginStarting type checking service...
10% building 0/1 entries 0/0 dependencies 0/0 modules
info => Ignoring cached manager due to change in manager config
<i> [webpack-dev-middleware] wait until bundle finished
15% building 2/19 entries 1361/1442 dependencies 205/349 modulesBrowserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
21% building 4/19 entries 5662/5687 dependencies 900/1608 modulesBrowserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
95% emitting emitassets by chunk 5.25 MiB (id hint: vendors)
  assets by status 4.88 MiB [big]
    asset vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-9e5819.manager.bundle.js 4.51 MiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_ScrollArea_OverlayScrollbars_js.manager.bundle.js 380 KiB [emitted] [big] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_syntaxhighlighter_syntaxhighlighter_js.manager.bundle.js 182 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_tooltip_WithTooltip_js.manager.bundle.js 113 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_controls_Color_js.manager.bundle.js 66.4 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_ScrollArea_GlobalScrollAreaStyles_js.manager.bundle.js 15.6 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 13.9 KiB [emitted] (name: runtime~main)
asset index.html 3.5 KiB [emitted]
asset main.manager.bundle.js 1.89 KiB [emitted] (name: main)
asset node_modules_unfetch_dist_unfetch_js.manager.bundle.js 1.28 KiB [emitted]
Entrypoint main [big] 4.53 MiB = runtime~main.manager.bundle.js 13.9 KiB vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-9e5819.manager.bundle.js 4.51 MiB main.manager.bundle.js 1.89 KiB
orphan modules 3.58 MiB [orphan] 847 modules
runtime modules 8.58 KiB 14 modules
javascript modules 4.6 MiB
  modules by path ./node_modules/ 4.6 MiB 960 modules
  modules by path ./*.inspect (ignored) 30 bytes
    ./util.inspect (ignored) 15 bytes [built] [code generated]
    ./util.inspect (ignored) 15 bytes [built] [code generated]
json modules 1.52 KiB
  ./node_modules/character-entities-legacy/index.json 1.24 KiB [built] [code generated]
  ./node_modules/character-reference-invalid/index.json 289 bytes [built] [code generated]
manager (webpack 5.43.0) compiled successfully in 86352 ms
99% done plugins webpack-hot-middlewarewebpack built preview 789f1821b955bc0f79c1 in 87847ms
ModuleBuildError: Module build failed (from ./node_modules/@storybook/core-common/node_modules/babel-loader/lib/index.js):
SyntaxError: C:\work\source\ng\cc\ui\node_modules\prettier\standalone.js: Expected atom at position 0
    {{(.+?)}}
    ^
    at bail (C:\work\source\ng\cc\ui\node_modules\regjsparser\parser.js:1135:13)
    at parseTerm (C:\work\source\ng\cc\ui\node_modules\regjsparser\parser.js:486:9)
    at parseAlternative (C:\work\source\ng\cc\ui\node_modules\regjsparser\parser.js:457:21)
    at parseDisjunction (C:\work\source\ng\cc\ui\node_modules\regjsparser\parser.js:437:16)
    at parse (C:\work\source\ng\cc\ui\node_modules\regjsparser\parser.js:1150:18)
    at rewritePattern (C:\work\source\ng\cc\ui\node_modules\regexpu-core\rewrite-pattern.js:339:15)
    at PluginPass.RegExpLiteral (C:\work\source\ng\cc\ui\node_modules\@babel\helper-create-regexp-features-plugin\lib\index.js:89:24)
    at newFn (C:\work\source\ng\cc\ui\node_modules\@storybook\core-common\node_modules\babel-loader\node_modules\@babel\traverse\lib\visitors.js:177:21)
    at NodePath._call (C:\work\source\ng\cc\ui\node_modules\@storybook\core-common\node_modules\babel-loader\node_modules\@babel\traverse\lib\path\context.js:53:20)
    at NodePath.call (C:\work\source\ng\cc\ui\node_modules\@storybook\core-common\node_modules\babel-loader\node_modules\@babel\traverse\lib\path\context.js:40:17)
    at NodePath.visit (C:\work\source\ng\cc\ui\node_modules\@storybook\core-common\node_modules\babel-loader\node_modules\@babel\traverse\lib\path\context.js:100:31)
    at TraversalContext.visitQueue (C:\work\source\ng\cc\ui\node_modules\@storybook\core-common\node_modules\babel-loader\node_modules\@babel\traverse\lib\context.js:103:16)
    at TraversalContext.visitSingle (C:\work\source\ng\cc\ui\node_modules\@storybook\core-common\node_modules\babel-loader\node_modules\@babel\traverse\lib\context.js:77:19)
    at TraversalContext.visit (C:\work\source\ng\cc\ui\node_modules\@storybook\core-common\node_modules\babel-loader\node_modules\@babel\traverse\lib\context.js:131:19)
    at Function.traverse.node (C:\work\source\ng\cc\ui\node_modules\@storybook\core-common\node_modules\babel-loader\node_modules\@babel\traverse\lib\index.js:82:17)
    at NodePath.visit (C:\work\source\ng\cc\ui\node_modules\@storybook\core-common\node_modules\babel-loader\node_modules\@babel\traverse\lib\path\context.js:108:18)
    at processResult (C:\work\source\ng\cc\ui\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:701:19)
    at C:\work\source\ng\cc\ui\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:807:5
    at C:\work\source\ng\cc\ui\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\work\source\ng\cc\ui\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\work\source\ng\cc\ui\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at C:\work\source\ng\cc\ui\node_modules\@storybook\core-common\node_modules\babel-loader\lib\index.js:59:103

System Environment Info:

System: OS: Windows 10 10.0.19043 CPU: (12) x64 Intel® Core™ i9-8950HK CPU @ 2.90GHz Binaries: Node: 16.13.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 96.0.4664.45 Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.34) npmPackages: @storybook/addon-a11y: 6.4.0 => 6.4.0 @storybook/addon-actions: 6.4.0 => 6.4.0 @storybook/addon-controls: 6.4.0 => 6.4.0 @storybook/addon-docs: 6.4.0 => 6.4.0 @storybook/addon-essentials: 6.4.0 => 6.4.0 @storybook/addon-storysource: 6.4.0 => 6.4.0 @storybook/addon-viewport: 6.4.0 => 6.4.0 @storybook/angular: 6.4.0 => 6.4.0 @storybook/builder-webpack5: ^6.4.0 => 6.4.0 @storybook/manager-webpack5: ^6.4.0 => 6.4.0

Angular CLI: 13.0.3 Node: 16.13.0 Package Manager: yarn 1.21.1 OS: win32 x64

Angular: 13.0.2 … animations, cdk, common, compiler, compiler-cli, core, forms … language-service, localize, platform-browser … platform-browser-dynamic, router, upgrade

Package Version

@angular-devkit/architect 0.1300.3 @angular-devkit/build-angular 13.0.3 @angular-devkit/core 13.0.3 @angular-devkit/schematics 13.0.3 @angular/cli 13.0.3 @schematics/angular 13.0.3 rxjs 7.4.0 typescript 4.4.4

I use Storybook with Compodoc and have Eslint for TypeScript in place.

Please let me know if I can provide any more information.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 28 (12 by maintainers)

Most upvoted comments

@JohnCasab I have a fix for this for us locally, while this gets fixed on the Storybook side.

Lock your prettier version to 2.3.0 and things should work.

If you are using Yarn, you can use selective dependency resolution.

E.g.

{
  "resolutions": {
    "prettier": "2.3.0"
  }
}

prashantpalikhe on Jan 13, 2022

I have the same issue using Storybook with Vue, when upgrading from 6.3.12 to 6.4.9. Any solution to this?

JohnCasab on Jan 8, 2022

I was able to narrow down the problem. When I disable the docs addon, my storybook compiles fine and opens in the browser as expected.

When docs addon is enabled, the node_modules.cache\storybook\public\vendors-node_modules_prettier_parser-html_js.iframe.bundle.js contains the following code:

(self["webpackChunkapm_acc_ui"] = self["webpackChunkapm_acc_ui"] || []).push([["node_modules_prettier_standalone_js"],{

/***/ "./node_modules/prettier/standalone.js":
/*!*********************************************!*\
  !*** ./node_modules/prettier/standalone.js ***!
  \*********************************************/
/***/ (() => {

throw new Error("Module build failed (from ./node_modules/@storybook/core-common/node_modules/babel-loader/lib/index.js):\nSyntaxError: C:\\work\\source\\ng\\cc\\ui\\node_modules\\prettier\\standalone.js: Expected atom at position 0\n    {{(.+?)}}\n    ^\n    at bail (C:\\work\\source\\ng\\cc\\ui\\node_modules\\regjsparser\\parser.js:1135:13)\n    at parseTerm (C:\\work\\source\\ng\\cc\\ui\\node_modules\\regjsparser\\parser.js:486:9)\n    at parseAlternative (C:\\work\\source\\ng\\cc\\ui\\node_modules\\regjsparser\\parser.js:457:21)\n    at parseDisjunction (C:\\work\\source\\ng\\cc\\ui\\node_modules\\regjsparser\\parser.js:437:16)\n    at parse (C:\\work\\source\\ng\\cc\\ui\\node_modules\\regjsparser\\parser.js:1150:18)\n    at rewritePattern (C:\\work\\source\\ng\\cc\\ui\\node_modules\\@babel\\preset-env\\node_modules\\regexpu-core\\rewrite-pattern.js:331:15)\n    at PluginPass.RegExpLiteral (C:\\work\\source\\ng\\cc\\ui\\node_modules\\@babel\\preset-env\\node_modules\\@babel\\helper-create-regexp-features-plugin\\lib\\index.js:89:24)\n    at newFn (C:\\work\\source\\ng\\cc\\ui\\node_modules\\@storybook\\core-common\\node_modules\\babel-loader\\node_modules\\@babel\\traverse\\lib\\visitors.js:177:21)\n    at NodePath._call (C:\\work\\source\\ng\\cc\\ui\\node_modules\\@storybook\\core-common\\node_modules\\babel-loader\\node_modules\\@babel\\traverse\\lib\\path\\context.js:53:20)\n    at NodePath.call (C:\\work\\source\\ng\\cc\\ui\\node_modules\\@storybook\\core-common\\node_modules\\babel-loader\\node_modules\\@babel\\traverse\\lib\\path\\context.js:40:17)\n    at NodePath.visit (C:\\work\\source\\ng\\cc\\ui\\node_modules\\@storybook\\core-common\\node_modules\\babel-loader\\node_modules\\@babel\\traverse\\lib\\path\\context.js:100:31)\n    at TraversalContext.visitQueue (C:\\work\\source\\ng\\cc\\ui\\node_modules\\@storybook\\core-common\\node_modules\\babel-loader\\node_modules\\@babel\\traverse\\lib\\context.js:103:16)\n    at TraversalContext.visitSingle (C:\\work\\source\\ng\\cc\\ui\\node_modules\\@storybook\\core-common\\node_modules\\babel-loader\\node_modules\\@babel\\traverse\\lib\\context.js:77:19)\n    at TraversalContext.visit (C:\\work\\source\\ng\\cc\\ui\\node_modules\\@storybook\\core-common\\node_modules\\babel-loader\\node_modules\\@babel\\traverse\\lib\\context.js:131:19)\n    at Function.traverse.node (C:\\work\\source\\ng\\cc\\ui\\node_modules\\@storybook\\core-common\\node_modules\\babel-loader\\node_modules\\@babel\\traverse\\lib\\index.js:82:17)\n    at NodePath.visit (C:\\work\\source\\ng\\cc\\ui\\node_modules\\@storybook\\core-common\\node_modules\\babel-loader\\node_modules\\@babel\\traverse\\lib\\path\\context.js:108:18)");

/***/ })

}]);

However, it is unclear at which point this error occurs and that is is thrown by the docs module. The {{(.+?)}} expression is used by prettier for parsing.

I tried with the latest compodoc release.

PavelSkopik on Dec 3, 2021

Also facing the same issue using SB with Vue. Upgrading from 6.1 to 6.4

prashantpalikhe on Jan 13, 2022