# 開発日記-2024-07-15 / Reactコンポーネントのnpmパッケージ公開が進んでいる

## CSS Modulesの型を生成する

::link-card[https://zenn.dev/cybozu_frontend/articles/2528ad2935be9f]

::link-card[https://zenn.dev/overflow_offers/articles/20221024-css_modules_typescript]

## npmでReactコンポーネントパッケージを作る

::link-card[https://muhammad-f-huda.medium.com/publish-your-react-component-to-npm-49a1c2671e22]

::link-card[https://github.com/TimMikeladze/tsup-react-package-starter]

## tsupでReactのクライアントコンポーネントをビルドする場合

npmパッケージで `"use client"` をつけたクライアントコンポーネントを公開する時、tsupでビルドする場合に設定を工夫しないとコンポーネントから `"use client"` の記述が消えてしまう場合がある。この時パッケージの利用側では使えずにエラーになってしまう。

::link-card[https://github.com/egoist/tsup/issues/835]

::link-card[https://zenn.dev/readyfor_blog/articles/939991bd64c2c3]

## esm, cjsのファイルを同じ階層に置いてしまうとエラーになる

> ESM packages need to be imported

上記のエラーが発生する。まだ整理できていないが、dist/esm、dist/cjsと分けることで解決している。