求助：执行npx storybook@latest init初始化Storybook时出现JSON解析错误

问题场景 #

在Windows机器的Angular工作区（包含组件库与测试应用）根目录执行npx storybook@latest init初始化Storybook 7.0.11时，出现以下错误：

SyntaxError: Unexpected token } in JSON at position 5133
at JSON.parse (<anonymous>)
at new AngularJSON (C:\Users\{}\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\cli\dist\generate.js:50:689)
at generator (C:\Users\{}\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\cli\dist\generate.js:50:3150)
at async installStorybook (C:\Users\{}\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\cli\dist\generate.js:332:791)
at async doInitiate (C:\Users\{}\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\cli\dist\generate.js:337:707)
at async withTelemetry (C:\Users\{}\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\core-server\dist\index.js:35:3422)
at async initiate (C:\Users\{}\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\cli\dist\generate.js:348:109)

原因分析 #

该错误是Storybook CLI解析工作区angular.json文件时触发的——文件第5133位存在多余的}，导致JSON语法不合法，无法完成解析。

解决步骤 #

1. 打开工作区根目录下的angular.json文件
2. 定位到文件第5133行附近，检查是否存在多余的}，或是逗号缺失、括号不匹配等其他JSON语法问题
3. 修复所有语法错误后保存文件
4. 重新执行npx storybook@latest init命令

补充提示 #

如果手动定位错误有困难，可借助VS Code等编辑器的JSON校验功能（错误行会自动高亮），快速排查并修正所有语法问题。

内容的提问来源于stack exchange，提问作者efarley