fix: storybook occurred an unexpected error when starting

[ttpss930141011]

Why need this change

• An unexpected error occurred while storybook was starting.

Previous	Current

Root cause

• This error will occur when Next.js upgrades to ~13.4. Relevant issue: Issue23648, Issue23314

Changes made

• Update @storybook/addon-essentials from version 7.0.23 to 7.2.3
• Update @storybook/addon-interactions from version 7.0.23 to 7.2.3
• Update @storybook/addon-links from version 7.0.23 to 7.2.3
• Update @storybook/blocks from version 7.0.23 to 7.2.3
• Update @storybook/nextjs from version 7.0.23 to 7.2.3
• Update @storybook/react from version 7.0.23 to 7.2.3
• Update storybook from version 7.0.23 to 7.2.3

Test Scope / Change impact

Issue

• Fix: storybook 啟用時出現預期外的錯誤 #267

Note

前幾日 @bxbdev 找我討論在升級 yarn 3 後 Storybook 壞掉的問題，我想問題是出在 Next.js 版本更新導致 Storybook 無法使用，不是升級 yarn 的問題。

有趣的是，在修復了 Storybook 之後準備 commit 時在 Hasky 出現錯誤，錯誤訊息如此 issue，Storybook 的成員猜想這或許是 yarn 1 的問題，並且不知道原因。他提出了兩種解法：

1. So a simple workaround is to fix the resolution of jackspeak to 2.1.1:

  "resolutions": {
    "jackspeak": "2.1.1"
  }

2. I'll note another workaround is to simply not use yarn 1 🤷

但最後我只有將 node_modules 砍掉，重新 yarn 一次錯誤變消失了，這點還要後續追蹤看看會不會有其它問題。

更新：

在 CI install dependencies 時出了一樣的錯，之後在 package.json 依建議增加了 resolutions 後暫時解決了問題。

但隨著越來越多的 package 試圖通過提供混合esm/cjs 支持來逐步進入 esm 支持，也許在未來放棄 cjs 支持的 package 會越來越多，升級 yarn 或許是未來可以討論的選項之一。

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
game-lobby-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 13, 2023 1:32pm

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[GaaSBot]

✅ Knip Scan Result for 02e2bb4

Unused files (10)

Unused files (10)
.bundlewatch.config.js
components/shared/Chat/ChatContent.tsx
components/shared/Chat/ChatMessage.tsx
components/shared/Chat/index.tsx
components/shared/Icon/group/news.tsx
configs/i18nConfigs.ts
lighthouserc.js
reset.d.ts
scripts/knipScanReporter.js
scripts/lhciScanReporter.js

Unused dependencies (2)

Unused dependencies (2)
@svgr/webpack package.json
sharp package.json

Unused devDependencies (5)

Unused devDependencies (5)
@actions/github package.json
@octokit/core package.json
@storybook/blocks package.json
@storybook/testing-library package.json
@total-typescript/ts-reset package.json

Configuration issues (1)

Configuration issues (1)
Unused item in ignoreDependencies: @next/bundle-analyzer

[GaaSBot]

🤖 Lighthouse Scan Result for 02e2bb4

/rooms

Metric	Value
Performance	62
Seo	80
Accessibility	79
HTML Report for LHCI Scan	Report Link

/rooms/abc

Metric	Value
Performance	74
Seo	80
Accessibility	69
HTML Report for LHCI Scan	Report Link

/login

Metric	Value
Performance	49
Seo	80
Accessibility	97
HTML Report for LHCI Scan	Report Link