Zenn
Closed13

Storybook v7.6.x で出てきた問題全部解決する(したい)

Next.js
Storybook
snakasnaka

今の環境

# yarn next info

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
Binaries:
  Node: 20.11.0
  npm: 10.2.4
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 14.0.4
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

# yarn storybook --version
7.6.16

凡例

見出しでステータスを表現する

  • ✅ 解決済み
  • 💢未解決
  • 🚧保留
snakasnaka

✅ CSF Parsing error: Expected 'ObjectExpression' but found 'TSAsExpression' instead in 'TSAsExpression'. が出る

関連しているか不明だけど、コードの一部がオブジェクトとして出力されている

ちなみに Storybook 7.6.10 では発生していなかった。

Hidden comment
snakasnaka

ASTに出力されている import { withThemeFromJSXProvider } from '@storybook/addon-themes' から推測されるのは .storybook/preview.tsx

snakasnaka

該当エラーの1つは ExportDefaultDeclaration で発生するので、 preview.tsx の export default を確認する

export default {
  // 略
} as const satisfies Preview

となっていて、 as const が怪しい

snakasnaka

以下で解消したっぽい
as const はあったら良いだろう、くらいの意識で付けてただけなので外す。

--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -51,4 +51,4 @@ export default {
     withRecoil,
     withLocalizationProvider
   ]
-} as const satisfies Preview
+} satisfies Preview
snakasnaka

ちなみに Storybook 7.6.10 では発生していなかった。

と書いてたが、まちがい。
実際でていたが、AST の node の dump がたまたま(?)出てなくて気づいていなかっただけだった...

このスクラップは2024/03/28にクローズされました