# 🔍 問題の概要

SveltekitプロジェクトでPandaCSSを導入した際に、styled-system/cssモジュールが見つからないというTypeScriptエラーが発生する問題について解説します。

# 📋 発生条件

この問題は以下の手順で再現されます：

# 1. プロジェクトセットアップ

SvelteのプロジェクトをSvelte libraryテンプレートを使用してセットアップ

# 2. PandaCSSの導入

PandaCSS公式ドキュメントのSvelteセットアップガイドに従って設定

Using Svelte

panda-css.com

# 3. PandaCSSの使用

以下のようなコードを記述した際にエラーが発生

<script lang="ts">
  import { css } from 'styled-system/css';
</script>

<div class={css({ color: 'red' })}>
  Hello PandaCSS!
</div>

# ❌ エラー内容

Cannot find module 'styled-system/css' or its corresponding type declarations.

TypeScriptがstyled-systemモジュールを認識できず、型定義も見つからないというエラーが表示されます。

# ✅ 解決方法

この問題は、TypeScriptのモジュール解決設定が原因で発生します。

# 修正手順

tsconfig.jsonファイルのcompilerOptionsセクションを以下のように変更してください：

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "module": "esnext",
    "moduleResolution": "bundler"
  }
}

# 変更の詳細

# 🔧 なぜこの修正で解決するのか

• NodeNext: Node.jsの最新のモジュール解決ルールを使用（厳密だが制限が多い）
• bundler: Viteなどのバンドラーが提供する柔軟なモジュール解決を使用

PandaCSSが生成するstyled-systemは、バンドラー環境での使用を前提としているため、bundlerモードでの解決が必要です。

# 🎯 まとめ

• SvelteKitでPandaCSSを使用する際は、TypeScriptの設定調整が必要
• moduleResolution: "bundler"が推奨設定
• この設定により、PandaCSSが正常に動作するようになります

# 🔗 関連リンク

Additional debugging info · Issue #2658 · chakra-ui/panda

GitHub