飽き性の頭の中
tsconfigとStorybook(Vite)のpathのエイリアスがズレていてエラーになった|Remix, Panda CSS, Storybookのサムネイル

tsconfigとStorybook(Vite)のpathのエイリアスがズレていてエラーになった|Remix, Panda CSS, Storybook

2024-02-10に公開

Remix で Panda CSS を使うのを試していたときに、Storybook も入れたのだが、少し手間だったのでその時のメモ。

考えれば至極当たり前なのだが、少し手間だったので作業ログとして残しておく。

Panda CSS を使った Remix のプロジェクト

Remix の./appディレクトリや、Panda CSS のstyled-systemディレクトリへのエイリアスを設定することが多いと思う。

そうした設定は、tsconfig.jsonに入っているはずだが、例えば以下のようになっているとする。

tsconfig.json
{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"],
      "~/s/*": ["./styled-system/*"],
    },
    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  }
}

Storybook のエラー

何もせずにこのプロジェクトに Storybook を入れると、以下のようなエラーが出る。

🐼 info [hrtime] Extracted in (6.85ms)
21:01:51 [vite] Pre-transform error: Failed to resolve import "~/s/css" from "app/components/Header.tsx". Does the file exist?
21:01:51 [vite] Internal server error: Failed to resolve import "~/s/css" from "app/components/Header.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/****/your-project/app/components/Header.tsx:1:29
  14 |    window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
  15 |  }
  16 |  import { css } from "~/s/css";
     |                       ^
  17 |  import { stack } from "~/s/patterns";
  18 |  export const Header = () => {
      at formatError (file:///Users/****/your-project/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:50510:46)
      at TransformContext.error (file:///Users/****/your-project/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:50504:19)
      at normalizeUrl (file:///Users/****/your-project/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:65561:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///Users/****/your-project/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:65716:47
      at async Promise.all (index 3)
      at async TransformContext.transform (file:///Users/****/your-project/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:65637:13)
      at async Object.transform (file:///Users/****/your-project/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:50819:30)
      at async loadAndTransform (file:///Users/****/your-project/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:53592:29)
      at async viteTransformMiddleware (file:///Users/****/your-project/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:63376:32)

Storybook の設定

最近だと、Storybook は Vite で動かすことが多いと思う。そうすると、Vite の方にも別途エイリアスの設定が必要になる。

その設定がないから以上のエラーが出ているということだ。

Storybook は Vite の設定が露出していないので、main.tsで Vite の設定を上書きする必要がある。

今回は、vite-tsconfig-pathsを使って、tsconfig.jsonpathsを Vite のエイリアスとして使うことにした。

.storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";
import { mergeConfig } from "vite";
// このライブラリを使うと、tsconfig.jsonのpathsをViteのエイリアスとして使える
import tsconfigPaths from "vite-tsconfig-paths";

const config: StorybookConfig = {
  stories: ["../app/components/**/*.stories.@(ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  // 以下がViteの設定
  async viteFinal(config) {
    return mergeConfig(config, {
      // ここにresolve.aliasを追加してもよいが、手間なのでライブラリでtsconfig.jsonのpathsと揃えられるようにした
      plugins: [tsconfigPaths()],
    });
  },
};
export default config;

そうすると、Storybook でもエイリアスが使えるようになる。

まとめ

別に、Remix とか Storybook とか Panda CSS とかに限らない問題ではある。

ただ、tsconfig のエイリアスと Vite のエイリアスの設定が揃っていないと、エラーが出るということだ。

関連記事

タグ

#福岡:39

#東京:20

#大学院:15

#移住:10

#Firebase:9

#Google:9

#Sony:9

#エナジードリンク:9

#ブロックチェーン:9

#Apple:7

#Mac:7

#Next.js:7

#Webエンジニア:7

#a7iii:7

#インドネシア:6

#サントリー:6

#英語:6

#Googleフォト:5

#TypeScript:5

#埼玉:5

#AWS:4

#Anker:4

#Canon:4

#EOS 8000D:4

#Gatsby.js:4

#Kindle:4

#React:4

#ZONe:4

#iPad mini:4

#コワーキングスペース:4

#セブンイレブン:4

#ラーメン:4

#京都:4

#仮想通貨:4

#修士論文:4

#内省:4

#民主主義:4

#社会人:4

#鴨川シーワールド:4

#Docker:3

#EOS8000D:3

#Firebase Hosting:3

#GitHub Actions:3

#Google Drive:3

#Lightroom:3

#Markdown:3

#Pixel:3

#React Native:3

#Soundcore:3

#d.school:3

#iPad:3

#iPhone:3

#アマルティア・セン:3

#アメリカ:3

#ジャカルタ:3

#スピーカー:3

#デザイン思考:3

#ブログ:3

#レッドブル:3

#ワークショップ:3

#卒業旅行:3

#寿司:3

#旅行:3

#研究:3

#紅葉:3

#長崎:3

#65mm F2 DG DN Contemporary:2

#API:2

#ChatGPT:2

#Creative:2

#ECR:2

#ERC20:2

#Expo.io:2

#Firestore:2

#GPT4:2

#GitHub:2

#Kindle Oasis:2

#Kindle Paperwhite:2

#Kubernetes:2

#LINE:2

#Mac mini:2

#MacBook Pro:2

#NestJS:2

#Notion:2

#Oculus:2

#Oculus Quest:2

#Panda CSS:2

#Pixel Buds:2

#Remix:2

#Sigma:2

#Storybook:2

#VS Code:2

#Zotero:2

#pandoc:2

#re:Invent:2

#かき小屋:2

#くら寿司:2

#カフェ:2

#ギグワーカー:2

#サーチコンソール:2

#シェアオフィス:2

#スターバックス:2

#ステーキ:2

#スマートウォッチ:2

#ソラマチ:2

#チョコレート:2

#デモクラシー:2

#ニューヨーク:2

#バリ島:2

#パンとエスプレッソと:2

#ヒュッゲ:2

#ビーチ:2

#ブックスタンド:2

#マクドナルド:2

#ミズマチ:2

#モンスターエナジー:2

#リモートワーク:2

#ワイヤレスイヤホン:2

#三千院:2

#両国:2

#兵庫:2

#千葉:2

#博多:2

#堀江貴文:2

#宗教:2

#宮崎:2

#就活:2

#嵐山:2

#川越:2

#広島:2

#引用:2

#新宿御苑:2

#日米学生会議:2

#早稲田:2

#有馬温泉:2

#東寺:2

#東浩紀:2

#機械学習:2

#歯医者:2

#歴史:2

#江ノ島:2

#浅草:2

#清澄白河:2

#温泉:2

#独自ドメイン:2

#神奈川:2

#神戸:2

#英検:2

#転職:2

このブログの運営者

Profile picture

たわ / tawachan

1994年生まれ(29歳)

大学院修士課程(政治学)(2021-2023)

Web開発(2017-)

©2024 tawachan All Rights Reserved.