ViteでReact Cosmosを使う

⚠️2023/04/29現在の情報です。
最新情報は、以下を参照するなど、ご自身で確認してください。
https://github.com/react-cosmos/react-cosmos/tags
https://github.com/react-cosmos/react-cosmos/tree/main/docs

前提環境

vite: 4.2.0
react-cosmos: 6.0.0-alpha.17
react-cosmos-plugin-vite: 6.0.0-alpha.17

インストール

yarn add --dev react-cosmos@6.0.0-alpha.17
yarn add --dev react-cosmos-plugin-vite@6.0.0-alpha.17

設定

README を見るとcosmos.config.jsonに"plugins": ["react-cosmos-plugin-vite"]を追加と記載されている。
そのままyarn cosmosとやると、以下メッセージが出る。そのため、viteのconfigPathを指定してあげたほうが良い。

[Cosmos] No vite config found, using default settings

その結果、cosmos.config.jsonの設定値は以下のようになった。これでvite+react-cosmosが使えるようになった。

{
  "plugins": ["react-cosmos-plugin-vite"],
  "vite": {
    "configPath": "vite.config.ts"
  }
}