Storybook: Storybook5.0.0感情をテーマにしたReactローダーのバグ

@ afrankel-sfdo node_modulesとyarn.lockを削除して、再試行できますか？ https://github.com/storybooks/frontpage/pull/28#issuecomment -468666553など、このようなものの周りに多くの奇妙なことが見られ

@shilmanはinfo @storybook/react v5.0.0-rc.10 ：

rm yarn.lock; rm -Rf node_modules/; yarn; yarn storybook

Error: Cannot find module 'emotion-theming/package.json'

それは本当に奇妙です。 再現を提供できますか？ CRAテストアプリまたはGatsbyテストアプリでそれが表示されない

私は@storybook/[email protected]と同じことをしています

編集：3回目のpackage-lock.jsonとnode_modulesの削除が私のためにトリックをしました

MacOSXで実行されているreact @
ただし、yarn.lockファイルを削除することは私たちのプロセスのオプションではありません

5.0.0同じ問題が発生し、

ModuleParseError: Module parse failed: Unexpected token (20:24)
You may need an appropriate loader to handle this file type.
|       console.info('HMR Configured');
|       module.hot.accept('layouts/App', () => {
>         ReactDOM.render(<App />, document.getElementById('root'));
|       });
|     }

    "@storybook/addon-a11y": "5.0.0",
    "@storybook/addon-actions": "5.0.0",
    "@storybook/addon-console": "^1.1.0",
    "@storybook/addon-info": "5.0.0",
    "@storybook/addon-knobs": "5.0.0",
    "@storybook/addon-links": "5.0.0",
    "@storybook/addon-notes": "5.0.0",
    "@storybook/addon-storyshots": "5.0.0",
    "@storybook/addon-viewport": "5.0.0",
    "@storybook/addons": "5.0.0",
    "@storybook/core": "5.0.0",
    "@storybook/react": "5.0.0",

ストーリーブックの新規インストールは正常に機能しますが、プロジェクトでこれらの問題を引き起こしている可能性のあるものを追跡していません。

@ afrankel-sfdo同じ問題が発生しています。 私の現在の理論では不足である@emotion/core原因ModuleParseError 。 npm i @emotion/core @emotion/styledを実行しましたが、問題は解決したようです。 奇妙なことに、理由はわかりませんが、これら2つの部門がpackage-lock.jsonから削除されていることに気付きました。 私はからそれらを削除package.jsonと左package-lock.json彼らと、そして私はそれが本当に何が起こったかを説明していませんが、私は、ビジネスに戻っだと思います。

更新：上記の手順の後でnpm ls @emotion/core実行すると、これに気づきました。

[email protected] /Users/jamesdigioia/Code/compiq/web
├── @emotion/[email protected]  extraneous
└─┬ @storybook/[email protected]
  └─┬ @storybook/[email protected]
    └── @emotion/[email protected]

npm ERR! extraneous: @emotion/[email protected] /Users/jamesdigioia/Code/compiq/web/node_modules/@emotion/core

@emotion/coreは、ビルドが期待しているルートに引き上げられていません（ package.jsonれなくなったため、無関係です）。 require.resolveは@storybook/ui/paths.jsで呼び出されますが、 @storybook/theming下にのみインストールされるため、そのフォルダーのnode_modulesにネストされます。つまり、 require.resolve @storybook/uiが見つかりません。

@storybook/uiがそれを探しているので、解決策は@storybook/uiへの依存関係として@emotion/{core,styled}を追加することです。

別の更新： package-lock.jsonを削除したくない場合は、 npm dedupe問題が解決したようです。

@ FrAgFo0d yarn.lockを削除しても機能しますか？ 変更をチェックインする必要はありませんが、そのソリューションが機能するかどうかを知っておくと便利です。 最終的にはその根底に到達しますが、今のところ、それは糸のバグのように感じます...

同じ問題があり、yarn.lockを削除しても解決できませんでした

yarn add @emotion/core @emotion/styledすぐに解決しました

私はいくつかの本当に奇妙な感情関連のエラーを受け取っていました。 インストールする前にnode_modules、yarn.lockを削除し、 yarn cache cleanを実行すると、問題が修正されました。

この問題は、ストーリーブック/コアとストーリーブック/テーマで使用されている2つの異なる感情バージョンに関連している可能性があります。 これはすべて非常に奇妙です、私はこれを乗り越えることができません。 エモーションライブラリを手動でインストールするとビルドされますが、ブラウザでエラーが発生し（ Cannot read property 'Consumer' of undefined at ThemeProvider ）、何もレンダリングされません。

手付かずのCRAアプリでは機能しましたが、私のカスタムWebpackセットアップでは機能しません。 React NativeWebコンポーネントライブラリのストーリーブックをセットアップしようとしています。 これが私のテストリポジトリです： https ：

ストーリーブック4.1.13ダウングレードすると問題が解決したので、私のプロジェクトでは、ストーリーブック/ reactとストーリーブック/ react-nativeのバージョンが異なるために互換性がない可能性があります

@MrLoh

私もこの問題に遭遇しました（私は@storybook/vueいますが）。
そして、 package.jsonのパッケージの1つが、内部的に古い@emotion/*パッケージに依存していた古い@storybook/addonsパッケージに依存していることがわかりました。

回避策として、そのライブラリのresolutionsフィールドを作成しました。これで、問題が解決しました。

  "resolutions": {
    "my-old-library/@storybook/addons":"^5.0.0"
  }

@ FrAgFo0d yarn.lockを削除しても機能しますか？ 変更をチェックインする必要はありませんが、そのソリューションが機能するかどうかを知っておくと便利です。 最終的にはその根底に到達しますが、今のところ、それは糸のバグのように感じます...

できればいいのですが、これを行った後、他のアイテムが一致しないバージョンでインストールされていることや、ストーリーブック自体が原因であるとは言えません。

yarn add @emotion/core @emotion/styledを試して、解決されるかどうかを確認できます。 `
ただし、自分のプロジェクトに依存関係を追加することはしません;）

明示的な依存関係として@storybook/themingを追加するために働いた

Mac OSXでも同じ問題が発生しました。Windowsでは、Macではすべて正常に動作します。動作させるにはnpm i @emotion/core @emotion/styledを実行する必要がありました。

同じ問題だった[email protected]を、ホンブルクソリューションは、私のために働きました

yarn.lockファイルを削除することは私にとってオプションではありませんでした（そしてほとんどの場合それをしないことをお勧めします）。 で修正できました。

$ rm -rf node_modules
$ yarn cache clean
$ yarn remove @storybook/core @storybook/theming [all other storybook deps]
$ yarn add -D @storybook/core @storybook/theming ....

これがこの問題に遭遇している他の誰かに役立つことを願っています

+1同じです。 このスレッドで機能した唯一の解決策は、ストーリーブック4に戻すことでした。

私もこの問題を抱えていました
@storybook/react: 5.0.3
MacOs Mojave
解決済み：

yarn add --dev @emotion/core -W
yarn add --dev emotion-theming -W

v5.0.3からv5.0.5にアップグレードした後、同じ問題が発生しました。

解決済み：
yarn add --dev @storybook/theming

私はまだこの問題を抱えています。 私は次の最新のものを持っています：

• @storybook/theming
• @emotion/core
• @emotion/styled

すべてのキャッシュクリアが機能しませんでした。 それはまだ古いemotion-themingパッケージを見つけようとしています：

info => Loading presets
WARN   Failed to load preset: "/Users/areardon/code/react-beautiful-dnd/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'

emotion-themingパッケージをインストールしましたが、すべてが機能しています。

emotion-themingインストールすることで、 @ alexreardonと同じように修正しました： https ： //emotion.sh/docs/emotion-themingで次のエラーが発生していました：

info @storybook/react v5.0.5
info 
info => Loading presets
WARN   Failed to load preset: "/Users/Felipe/Local_Projects/monorepo/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'

解決策は、@ storybook / uiがそれを探しているので@emotion / {core、styled}を@ storybook / uiへの依存関係として追加することです。

これが正しい解決策になるという@mAAdhaTTahに同意します。 パッケージマネージャーが依存関係を引き上げることを期待するのは誤りです。

@ storybook / reactv5.0.6にも同じ問題があります。

プリセットの読み込みに失敗しました： "/ Users / vinkumar2 / Documents / Projects / PatternLibs / ReactPatternLib / node_modules / @ storybook / core / dist / server / manager /manager-preset.js"
ERR！ エラー：モジュール '@ emotion / core /package.json'が見つかりません

DevDependenciesに@emotion / coreを追加すると、Storybookが機能します。 @ storybook / reactとのパッケージ依存関係に欠けているようです。

私はここにこれのPRを入れました：＃6435

Egads !! この問題を参照するPR＃6435を含むhttps://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.23をリリースしました。 今すぐアップグレードしてお試しください！

プレリリースなので、 @next NPMタグで見つけることができます。

この問題を閉じます。 まだまだやることがあると思われる場合は、再度開いてください。

アルファ版は私のために問題を修正しました、 @ shilmanに感謝し

この問題は5.0.10でも引き続き発生します（npmログによると、alpha.23以降のバージョンです）

エラーメッセージ：

プリセットの読み込みに失敗しました： "/.../node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR！ エラー：モジュール 'emotion-theming /package.json'が見つかりません

スタックトレース：

stack: 'Error: Cannot find module \'emotion-theming/package.json\'\n    
at Function.Module._resolveFilename (module.js:536:15)\n    
at Function.resolve (internal/module.js:18:19)\n   
at Object.<anonymous> (/.../node_modules/@storybook/ui/paths.js:16:38)\n    
at Module._compile (module.js:635:30)\n    
at Object.Module._extensions..js (module.js:646:10)\n    
at Module.load (module.js:554:32)\n    
at tryModuleLoad (module.js:497:12)\n    
at Function.Module._load (module.js:489:3)\n    
at Module.require (module.js:579:17)\n    
at require (internal/module.js:11:18)\n    
at Object.<anonymous> (/.../node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)\n    
at Module._compile (module.js:635:30)\n    
at Object.Module._extensions..js (module.js:646:10)\n    
at Module.load (module.js:554:32)\n    
at tryModuleLoad (module.js:497:12)\n    
at Function.Module._load (module.js:489:3)',

@Stralosこの修正は5.1.Xリリースブランチにあり、現在はまだアルファ版（ 5.1.0-alpha.33 ）です。

@BrendanAnnable @alexlafroscia @devrelm修正を5.0.xにパッチバックする必要がありますか？

@shilmanストーリーブックのリリーススケジュールがわからない（例：5.1.x）が、これによりストーリーブック5にアップグレードする多くのプロジェクトがブロックされているため、可能であれば、この修正でアルファ版以外のリリースをリリースしたいと思います🙂

ここでの問題は、yarn（またはnpm）が奇妙に（この場合はそうではない）パッケージを巻き上げていることです。 yarn listまたはyarn why出力にも障害があります。

% yarn why emotion-theming
yarn why v1.15.2
[1/4] 🤔  Why do we have the module "emotion-theming"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#some_project#@storybook#addon-actions#@storybook#theming" depends on it
   - Hoisted from "_project_#some_project#@storybook#addon-actions#@storybook#theming#emotion-theming"
✨  Done in 1.74s.

% yarn list emotion-theming
yarn list v1.15.2
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ [email protected]
✨  Done in 1.86s.

% find . -type d -name emotion-theming
./some_project/node_modules/@storybook/addon-actions/node_modules/emotion-theming
./some_project/node_modules/@storybook/theming/node_modules/emotion-theming
./node_modules/@storybook/ui/node_modules/emotion-theming
./node_modules/@storybook/router/node_modules/emotion-theming

ご覧のとおり、yarnはemotion-themingパッケージが1つしかないことを報告しています。これはルートに巻き上げる必要がありますが、そうではありません。異なるパッケージ間で4か所にパッケージを複製しています。 それがyarn / npmのバグであるかどうかは、わかりません。 依存関係のdependenciesとpeerDependenciesの組み合わせが、この奇妙な動作を引き起こしているのではないでしょうか。 ストーリーブックパッケージのメジャーバージョンが異なる場合、たとえば@storybook/[email protected]と@storybook/[email protected]並べると、ストーリーブックのセットアップが失敗します。

また、モノレポヤーンワークスペースとトップレベルのノーホイストの組み合わせも、この問題を引き起こす要因になる可能性があると思います。

"workspaces": { "nohoist": [ "some_project/*", "some_project/@*/*", ], "packages": [ "some_project", ] },

私も同じ問題を経験していますが、上記の解決策のほとんどは私にとって問題を解決しなかったようです。
アルファ版も試しましたが、まだエラーが発生します。
私にとっての問題は、2つの異なるパッケージが2つの異なるバージョンの@emotion/core探しているように見えるので、手動インストールは機能しますが、2つのパッケージのうちの1つが不足しているバージョンについて不平を言っています。

/[email protected] /repos/ui
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └── @emotion/[email protected]  deduped
├─┬ @storybook/[email protected]
│ └── @emotion/[email protected]
└─┬ @storybook/[email protected]
  └─┬ @storybook/[email protected]
    └─┬ @storybook/[email protected]
      └── UNMET PEER DEPENDENCY @emotion/[email protected]

npm ERR! peer dep missing: @emotion/core@^10.0.0, required by [email protected]

また、手動でnpm i @storybook/theming追加しようとしましたが、それでもうまくいきません。

@devrelm修正（＃6435）は、yarnだけでなく、npmでも機能するはずです。正しいですか？

@whyayalaは私のために働いた、ありがとう！

5.xにアップグレードし、バグが発生しました。まったく同じ問題で5.1.9にアップデートしました。

そうは言っても、@ emotion / core（10.0.10）のバージョンは1つしかありません。

@alasdairhurst私もこの問題に遭遇しました。

あなたはCRAでこのデモプロジェクトでそれを見ることができます
https://github.com/marco-silva0000/cra-test-pnp-storybook

明示的な依存関係として@storybook/themingを追加するために働いた

なぜそれが役に立ったのか理解したことがありますか？ それは私たちにも役立ったので、それは素晴らしいことです！ しかし、私は理由がわかりません：P

これが誰かを助けるかもしれないなら-私もこのエラーを受け取りました、そして私がウェブサイトフォルダの外にパッケージをインストールしていることに気付くのに少し時間がかかりました...それがpackage.jsonを見つけられなかった理由です...