Open1

react × typescript × rollupプロジェクトにstorybookを導入して稼働までの奮闘

shigeshige
cannot find module 'react/package.json'

下記コードを実行後、storybookを起動時に発生

$ npx sb init
$ npm run storybook

パッケージのソースに

 'react-dom': _path.default.dirname(require.resolve('react-dom/package.json'))

の記述があっておそらくここ
他にも同じエラーが数箇所のファイルで発見された。見ていないのでわからんが、同じ原因だと思われる。
これを参考にdevDependenciesにreactとreact-domをインストール

エラーが変わった

 contains "type": "module" which declares all .js files in that package scope as ES modules.

どうやらpackage.jsonにtype: modulesが存在することが原因でcommonjsの記述が読み込めていないらしい。。。
type: moduleを外すとstorybookの起動はできた

しかし、これがないとプロジェクトのbuildができない。。。困った。。。
ここよるとcjs拡張子も無意味らしい。

.storybook配下にpackage.jsonを作成すると解決

{
 "type": commonjs
}

そもそもpeerDependenciesだけにreactとreact-domを入れていたのが、原因?
勝手にinstallされないので環境をリセマラする際にnode_modulesを削除してnpm installをしたのがまずかった気がする。
そう考えるとreact/package.jsonがnode_modulesのreactディクトリの話をしていたんだなと納得できた。

ちなみに、今回の検証で他にわかったことはpeerDependenciesはnpm installで自動installがされないというもの。バージョン7以降はinstallされるんだと思っていたが。。。