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

[PavelSkopik]

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(R) Core(TM) 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.

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

[PavelSkopik]

Sure thing, I will do that. I already created our app skeleton with minimum code to bootstrap the app (we are using the Angular upgrade module to bootstrap AngularJS, plus we have some private NPM packages), but everything worked OK.

So I will have to use the elimination method and try to remove some stuff one by one that I think might potentially create an issue.

Is there a way to print more verbose logging (warning , errors)? I used the --webpack-stats-json parameter but it does not save any files in the specified folder.

[shilman]

@PavelSkopik Try running with --debug-webpack

[PavelSkopik]

@shilman Thank you.

Based on the stacktrace it seems to me that the issue might be Babel related. Is there a way to get more debug information about that part of the process.

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)

[shilman]

hmm i don't know. @ndelangen ?

[ndelangen]

I haven't seen this before.. {{(.+?)}} doesn't look like valid JS to me..

[PavelSkopik]

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.

[lacolaco]

Does has workaround mean disabling addon-docs?

[shilman]

@lacolaco Yup, tho I have not confirmed the workaround on a project. Does it fix the problem for you?

[lacolaco]

In my project, docs are very used, so disabling that can not be a solution for me.

Logs on my environment (Angular v12.2, Storybook 6.4.8)

info @storybook/angular v6.4.8
info 
info => Cleaning outputDir: xxx
info => Loading presets
info => Loading custom manager config
info => Compiling manager..
info => Compiling preview..
info => Loading custom manager config
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config for angular lower than 12.2.0
info => Using angular project "storybook:build" for configuring Storybook

...

92% sealing asset processing TerserPlugininfo => Manager built (2.17 min)
ERR! => Failed to build the preview
ERR! Module build failed (from ./node_modules/babel-loader/lib/index.js):
ERR! SyntaxError: /Users/xxx/node_modules/prettier/standalone.js: Expected atom at position 0
ERR!     {{(.+?)}}

[lacolaco]

I've changed my angular.json to migrate to use @storybook/angular:build-storybook builder as a 12.2.x style, but nothing has been resolved.

[shilman]

@lacolaco if you remove docs for debugging purposes, does it fix the problem?

[lacolaco]

@shilman Yes, it seems ok. I disabled docs and remove all mdx files from stories dependency and then build-storybook now works.

[lacolaco]

I found loading common-preset in addon-docs occurs that error.
https://github.com/storybookjs/storybook/blob/v6.4.8/addons/docs/preset.js#L10-L16

If I comment out { name: require.resolve('./common-preset'), options: presetOptions },, its build doesn't throw error. (Not sure runtime behavior then). In other hand, it throws the error if I leave only that preset.

[lacolaco]

This line is the cause. I'm going to dig deeper. https://github.com/storybookjs/storybook/blob/v6.4.8/addons/docs/common-preset.js#L9

[lacolaco]

https://github.com/storybookjs/storybook/blob/main/lib/core-common/src/utils/es6Transpiler.ts#L28

@shilman I'm not sure a mechanism technically, but removing prettier from es6Transpiler list can solve the problem. I wonder why only Angular + addon-docs environment is affected.

[lacolaco]

sourceDecorator of addon-docsfor Angular depends on prettier/standalone and prettier/parser-html. And Prettier is treated as an ES6 module in es6Transpiler processing.

https://github.com/storybookjs/storybook/blob/v6.4.8/addons/docs/src/frameworks/angular/sourceDecorator.ts
https://github.com/storybookjs/storybook/blob/v6.4.8/lib/core-common/src/utils/es6Transpiler.ts#L28

Prettier has separated entrypoints for UMD and ESM, however, addon-docs always depends on UMD format.

• https://unpkg.com/browse/prettier@2.5.1/standalone.js (UMD)
• https://unpkg.com/browse/prettier@2.5.1/esm/standalone.mjs (ESM)

In my environment, I confirmed the problem can be solved by editing sourceDecorator to load prettier/esm/standalone.

And I found another solution. an option for babel-loader in es6Transplier is another cause.

https://github.com/storybookjs/storybook/blob/v6.4.8/lib/core-common/src/utils/es6Transpiler.ts#L53

I confirmed it can be solved bytargets: { node: 10 } instead of targets: "defaults".

[shilman]

@lacolaco Thanks so much for tracking this down. Any chance you can submit a PR with the change and I can review it with the team?

[lacolaco]

@shilman Yes I can. I'll edit es6Transpiler to change targets to appropriate value. Is it OK?

[shilman]

@lacolaco To be honest, I don't understand the solution yet. But please submit the PR with that change and then I can discuss with the team and test it. Thanks for moving this forward.

[JohnCasab]

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

[JohnCasab]

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

@shilman @ndelangen

[prashantpalikhe]

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

[JohnCasab]

@shilman @ndelangen we are quite lot of people facing this issue, would be nice with a response :)

[prashantpalikhe]

@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"
  }
}

[JohnCasab]

@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"
  }
}

This worked for our vue storybook, thank you @prashantpalikhe!
And remember to run yarn install or npm install after you have added:

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

[shilman]

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.17 containing PR #17239 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.13 containing PR #17239 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade