react 🚀 - フック+ Reactの複数のインスタンス

明確にするために、コンポーネントのレンダリングに使用されたものとは異なるreactモジュールからフック（たとえばuseState ）をインポートしていましたか？

これが混乱を招くことに同意します。他のReactモジュールがレンダリングされているかどうかを知る方法があるかどうかはわかりません。 AFAIKは、複数のReactインスタンスが同じグローバルコンテキストで問題なく動作できるように、Reactを可能な限り分離して実行するようにしています。

それ以外の場合は、おそらくエラーメッセージを更新し、混乱しすぎない限り、このケースについても言及することができます。

philipp-spiess 2018年10月27日

はい、 React1 === React2を比較しましたが、 false （React1はindex.jsからのもので、React2はフックを使用したファイルからのものです）。これが発生すると、フックは上記の一般的なエラーメッセージで失敗します。

この問題は、このケースの認識を高め、おそらくこれに直面している人々を助けるために何らかの方法でエラーメッセージを改善することです。しかし、それはおそらく非常にエッジです。

brunolemos 2018年10月27日

👍25 😄2

うん、私は自分が作成しているパッケージをnpmリンクしようとしました。他のパッケージもフックを使用しているが、独自のReactを使用しているため、同じエラーがスローされます。パッケージをNPMに公開してから、NPMから直接インポートする必要がありました。そうすればエラーはなくなりましたが、テストせずにパッケージを公開するのは悪いことなので、これが修正されることを願っています。

GabrielBB 2018年11月01日

👍183 🚀17 😄17 👀16 ❤15 🎉14 😕3

Lerna monoreposは、カスタムフックが1つのパッケージで定義され、シンボリックリンクされた依存関係がreactの独自のコピーを使用するため、別のパッケージで使用される場合にも、この問題に悩まされます。

現在、 npm-link-sharedとprestart npmスクリプトを使用して、一方のパッケージのreact依存関係をもう一方のパッケージへのシンボリックリンクに置き換える（ハッキーな）回避策があります。同じインスタンス。

"prestart": "npm-link-shared ./node_modules/<other package>/node_modules . react"

mpeyper 2018年11月02日

👍43 ❤7 🎉7 🚀3 👀1

同じ問題が発生し、次のように追加して解決しました。

 alias: {
        react: path.resolve('./node_modules/react')
      }

メインアプリのwebpack構成のresolveプロパティに。

Reactを2つ使用するのは明らかに私の間違いでしたが、エラーメッセージがもっと良ければ素晴らしいと思います。これはおそらく次のようなものだと思います： https ：//github.com/facebook/react/issues/2402

apieceofbart 2018年11月03日

👍333 ❤111 🎉111 🚀57 😄29 👀23

@mpeyper動作します。ありがとう

GabrielBB 2018年11月05日

@apieceofbartそれは私のために働いた。提案をありがとう。 👍

jimbo 2018年11月18日

🎉5

私が理解しているように、この問題は、同じバンドルにReactの複数のコピーがある場合に発生します。

https://medium.jonasbandi.net/hosting-multiple-react-applications-on-で説明されているように、Reactの独自のコピーを持つ2つの別々のバンドルが、別々のdom要素で独自のReactアプリケーションをブートストラップしている場合も問題になりますか？

後者は、たとえばシングルスパメタフレームワーク（https://github.com/CanopyTax/single-spa）で使用される一般的な「統合」パターンだと思います。

jbandi 2018年12月04日

👍8

まったく同じreactバージョンでもこの問題が発生し、 npm-linkを使用すると、独自に公開されるフックの開発が壊れます。同じ役に立たないhooks can only be called inside the body of a function componentメッセージを取得します。 @apieceofbartのエイリアスソリューションは私のためにこれを解決しました。本当にありがとう！

vpicone 2018年12月10日

👍6 👀2 🎉1

メインアプリケーションにパッケージをnpm linkした場合も、同じ問題が発生します。 babel-plugin-module-resolverを動作させることができませんでした。
それは言う：
Could not find module './node_module/react'
これは、コンポーネントを公開する前にローカルでテストすることができないため、煩わしいものです。

dotlouis 2018年12月11日

👍16

"react": "^16.7.0-alpha.2"のキャレットを削除して問題を修正しました
コメントの全文は次のとおりです： https ：//github.com/facebook/react/issues/14454#issuecomment -449585005

doasync 2018年12月22日

👎8 👍3

私はYarnを使用していますが、 package.jsonで解決を強制することでこれを修正しました：

  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

pelotom 2018年12月22日

👍27 ❤9 🎉8 🚀4

こっちも一緒！！

leecade 2018年12月24日

👎8

私と同じようにこの問題を抱えていたかもしれない人のために、ここにメモを残したかっただけです。

react-rails gemを使用してReactとRailsを実行し、コンポーネントをRailsビューに直接レンダリングしています。 TurbolinksがReactの追加インスタンスをロードした<head>から新しいJSバンドルを取得していたため、アプリの新しいバージョンがプッシュされるたびにこのエラーが発生していました。解決策は、バンドルが変更されたことを検出したときにTurbolinksにページ全体のリロードを実行させることでした： https ：//github.com/turbolinks/turbolinks#reloading -when-assets-change

これで解決したようです。

zbuttram 2019年02月05日

👍4

ついにフックを本番環境に導入できることにとても興奮しています。それを可能にしてくれたすべての人に心から感謝します。それらは、作業するのが_トン_楽しいものであり、私のコードをより短く、より宣言的にしました。

ヘッドアップと同様に、この問題はリリースされたバージョンにも関連しており、「フックは関数コンポーネントの本体内でのみ呼び出すことができます」という同じ役に立たないエラーメッセージが表示されます。

これは修正できるものですか？より多くの開発者が新機能の実装を開始するにつれて、それはますます普及する可能性があり、完全な「修正」の代わりに、より明確なエラーメッセージが大いに役立つと思います。

大変な作業をありがとうございました。リリースおめでとうございます！それは本当に素晴らしい機能のセットです。

編集：オープンPRを詳しく調べる必要がありましたが、これに対処する＃14690が見つかりました。ありがとう@threepointone！

taylorham 2019年02月06日

👍6 🚀2

@taylorhamコミット内のリンクはまだ何も指していません。私はそれを待ちますが、これはリンクされた_（ npm link現在）_パッケージでフックを使用して以来私が抱えている問題であり、公開せずにローカルで作業することは不可能です。
いくつかの問題を調べた後、これはコンポーネントをクラスにコンパイルするreact-hot-loaderの問題だと思いましたが、フックをサポートするバージョンをリリースした後でも、同じように失敗します。
私はさまざまなハックを試しましたが、運がありませんでした。なぜ誰もがこの問題にまだ悩まされていないのかわかりません🧐

dotlouis 2019年02月07日

👍3

@dotlouisええ、これまでのところ更新されたエラーメッセージであり、問題自体はまだ苦痛です。

私にとってうまくいったのは、 "react": "link:../my-library/node_modules/react"を使用して、開発中のアプリをライブラリのReactのインスタンスに依存させることだけです。

taylorham 2019年02月07日

👍5 ❤2 🎉1

提案された解決策はどれも私にはうまくいきませんでした、そして私はすべてを試してきました
コンテキストと多くのHOCを実装するプロジェクトにインストールしようとしています
空白のプロジェクトから始めて、トリックを行いました
私は原因を探し続けています

[ok]私にとって、修正はpackage.jsonまたは他の二重反応の原因に関するものではありませんでした：コンテキストから来る、アプリの上にグローバルなthemeProviderがありました。それを「useContextフック」に置き換える（機能的なcompとして書き直している間）ことが唯一の解決策のようでした
多分いつ問題があります

<GoodOldContext iam={a class component}>
    <BrandNewHook>
             errors : Hooks can only be called inside the body of a function component #35
     </BrandnewHook>
</GooOldContext>
export withGoodOldContext.consumer(here component)

Mydde 2019年02月08日

create-react-appを使用するexampleフォルダーがあるコンポーネントを開発しています。

package.jsonでこれを行うと、この問題が解決しました。

{
    ...
    "dependencies": {
        "my-component": "link:..",
        "react": "link:../node_modules/react",
        "react-dom": "link:../node_modules/react-dom",
        "react-scripts": "2.1.3"
    },
    ...
}

DylanVann 2019年02月10日

❤9 👍5 🎉4 🚀3

@ taylorham @ DylanVann入力してくれてありがとう。残念ながら、それでも私には機能しません。
そして、あなたが使用したこのlink:プロトコルに関するドキュメントは見つかりませんでした。
基本的に、「react-spring」（reactを依存関係として使用する別のdep）はreact-domを見つけることができないと言っています。 "react": "link:../some/path"に関するドキュメントを教えていただけますか？

dotlouis 2019年02月12日

リンクされたUIパッケージも使用していますが、この問題を修正することができました。
UI（リンクされたパッケージ）からreactrenderToStringをエクスポートする必要があります。
リンクされたパッケージにレンダリング関数を作成しました。

seeden 2019年02月12日

より良いコンテキストのために-https：//github.com/facebook/react/issues/14257

theKashey 2019年02月12日

@theKasheyに感謝します。 @gaearonは、これが正常な動作であると考えているようです。 Reactを2回ロードするべきではないようですが、リンクされたローカルパッケージを操作するための推奨される方法は何ですか？

dotlouis 2019年02月13日

👀5

また、Lernaワークスペースが適切にシンボリックリンクされるという問題もありました。これは私がこれを機能させるために使用したトリックでした。後で必ずnpm installを実行してください。

"dependencies": {
    "react-dom": "file:../common/node_modules/react-dom",
    "react": "file:../common/node_modules/react"
}

jmlivingston 2019年02月13日

❤5 🎉4

それを解決する方法はたくさんありますが、糸の解像度は通常は役に立ちません-それは「構築ツール」にもっと関連しています

webpackの場合はaliasesを使用します- reactのようなすべてのアヒルを単一のファイルに「ハード」エイリアスします

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
     react: path.resolve(path.join(__dirname, './node_modules/react')),
   }

パーセルの場合は同じエイリアスを使用しますが、package.jsonで定義します-https： //parceljs.org/module_resolution.html#aliases
nodejs（jest以外）の場合は、requirecontrolを使用できます

import {setAliases} from 'require-control';
setAliases({
  'react': path.resolve(path.join(__dirname, './node_modules/react'))
});

冗談の場合はmoduleNameMapperを使用します

"jest": {
    "moduleNameMapper": {
      "^react$": "<rootDir>/node_modules/$1",
    },

theKashey 2019年02月14日

👍17 ❤10 🎉8 🚀3

@theKasheyの洞察に感謝します。これは、モジュールの解決がどのように行われるか（ツリーの下、次に上）を考えると理にかなっていますが、ユーザーの観点からは、これはあまり実用的ではありません。パッケージをnpm linkすると、依存関係を明示的に再配線しなくても機能することが期待されます。これにより、パッケージをローカルで開発するのは非常に困難になります。

dotlouis 2019年02月14日

これは基礎であり、これがnode_modulesが機能するように設計されている方法です。これが、2つの異なるメジャーバージョンに2つのバージョンのButtonがあり、依存モジュールが「正しい」ものを簡単に見つけられる理由です。パッケージのバージョン。
これが常に機能する方法です。

Node.js内部は非常に簡単です-既知のすべてのプレフィックス（ node_modulesなど）または拡張子（ js 、 ts 、 jsonなど）を追加してファイルを開いてみてください

yarn pnpはそれを行い、問題を解決する可能性があります。 yarn workspacesは、共有パッケージを最上位に_ホイスト_する可能性があります-「魔法」を伴わずに問題を解決することもできます。

npm workspaces ？現在は存在しません。

theKashey 2019年02月14日

👍1

実際、ワークスペースを使用するようにプロジェクトを切り替えることになりました。解像度を使用せずにこれを解決し、巻き上げ/構造はとにかく有益です。

DylanVann 2019年02月14日

これはヘッドスクラッチャーでした。 webpack resolve.alias設定を試しましたが、機能しませんでした。多くの設定も試しましたが、残念ながら実際には機能しませんでしたが、最終的に機能させることができました。

これが私のフォルダ構造です：

サンプルフォルダ内のpackage.jsonを変更する必要がありました。基本的に、 @ jmlivingstonの提案に基づいて、プロジェクトの「メイン」node_modulesからreactをプルします。最終的には次のようになります。

  "dependencies": {
    "react": "file:../node_modules/react",
    "react-dom": "file:../node_modules/react-dom",
    "react-scripts": "2.1.5"
  },

その後、 npm installを実行し、次にnpm linkを実行しました。これで、うまくいきました。

うまくいけば、これは他の誰かを助け、時間を節約することができます。

rmolinamir 2019年02月15日

👍2

では、この問題の修正はありますか？私はここでできるだけ多くの推奨事項を試しましたが、運がありません。 create-react-appとtypescriptを使用しています。 React / React-domの使用16.8.3。これは私が2日前に作成した新しいプロジェクトです。 useSpring（）とanimated.divを使用しています。ありがとう

guru-florida 2019年02月25日

👍9

@ guru-floridaたまたまreact-routerを使っていますか？

私はあなたと同じスタック（typescript＆create-react-app）を使用しており、 render属性に関する問題があります。 componentに変更するとうまくいきました。

前：

<Route path="/signup" render={SignUp} />

後：

<Route path="/signup" component={SignUp} />

それが役に立てば幸い..！

mikeyyyyyy 2019年02月27日

👍2 👀1 ❤1 😕1 🎉1

@mikeyyyyyyいいえ、これではReactRouterを使用していません。前回のプロジェクトで春を使ってみましたが、同じ問題が発生しましたが、ヒントをありがとうございます。

guru-florida 2019年02月27日

（パーセルアプリの）npmリンクでこの問題が発生しましたが、 npm link .../whatever/node_modules/reactは解決されていないようですが、フック以外のコンポーネントでは正常に機能します

tj 2019年03月05日

@tjssrに問題があると思います。迅速な回避策は、リンクされたパッケージから反応関数または反応全体をエクスポートして、サーバーパッケージにインポートすることです。

seeden 2019年03月05日

@seedenああ私はSSRを使用しておらず、パーセル付きのSPAだけを使用しています。私は自分のもののために内部にui pkgを持っており、私が取り組んでいるアプリは両方とも同じreactバージョンを持っており、重複しているのは奇妙に思えますが、おそらくそれはパーセルの懸念です

tj 2019年03月05日

@tjああ、なるほど。次に、この非常に奇妙な問題で頑張ってください。これで一週間過ごしました

seeden 2019年03月05日

では、この問題の修正はありますか？

ここ自体は問題ありません。このページで説明されているように、Reactは$ react-domの内部から「見た」 reactオブジェクトと同じreactオブジェクト上にuseState()呼び出しを行う必要があります。それがあなたに起こらない場合は、ページ上にReactの2つのコピーをバンドルしていることを意味します。これはそれ自体が悪いことであり、フックの前に他のいくつかの機能を壊します。とにかくそれを修正したいと思うでしょう。このページには、それを修正するために診断する一般的な方法が含まれています。

人々がこの問題に遭遇したときの特定の回避策を共有するために、この議論を開いたままにしておきます。しかし、それ自体は、あなた以外の誰もが「修正」できる問題ではありません。

gaearon 2019年03月05日

❤2

私はnpmリンク（パーセルアプリ内）でこの問題を抱えていましたが、npmリンク... / whatever / node_modules / reactはそれを解決していないようですが、フック以外のコンポーネントでは正常に動作します

小さな再現ケースを作成してもよろしいですか？

gaearon 2019年03月05日

@gaearonはそうするでしょう、来週もう少し掘り下げる時間があるはずです

tj 2019年03月05日

❤1

幸い、 require-controlは、 yarn link + SSR + styled-components4の静的コンテキストに関する問題を修正しました。ありがとう@theKashey👍

damassi 2019年03月07日

👍1

私はここですべてを試しましたが失敗しました。実際には、ここに記載されていない別の何かでした。 これは、reactインポートの大文字と小文字の区別に関係していました。場合によっては、次のようになりました。

import React from 'react'

そして他の人では：

import React from 'React'

一部のファイルシステム（unix、osx）では、これによりWebpackがReactの2つのコピーをインスタンス化します。

Reactのコピーが1つしかないことがはっきりとわかるので、これは極端な混乱を引き起こしました。しかし、それは代わりに私たちがそれをインポートしていた方法でした。

明らかに小文字のみを使用しているため、reactドキュメントのテストも問題なく実行されます。

これは、ドキュメントで言及する価値があるように思えますか？

adamscybot 2019年03月08日

❤1 👍1

私にとって、Reactの複数のインスタンスの理由はWebpackDllPluginでした。ベンダーDLLの場合、エントリリストにreactとreact-domを含めませんでしたが、 reactまたはreact-domを必要とする他のライブラリがありました。私のDLLにはreactとreact-domが含まれていました（マニフェストjsonファイルをすばやくチェックするとそれが明らかになります）。したがって、コードを実行してReactをアプリケーションにインポートすると、 node_modulesからロードされていましたが、ベンダーのコードでは、DLLファイルからReactが必要でした。

全体：DLLファイルに注意し、含まれているモジュールに不要な追加の依存関係が含まれていないことを確認してください。含まれていない場合は、それらを二重にインポートします。

mike1808 2019年03月08日

react-hot-loaderを4.6.0に更新することで、これを修正できました。

OliverRadini 2019年03月12日

👍3 🎉1

これは、Parcelのnpm linkのもののトリックを行いました。

"alias": {
        "react": "../ui/node_modules/react",
        "react-dom": "../ui/node_modules/react-dom"
    }

それが本番ビルドに使用しようとするものかどうかはわかりませんが、ちょっとハッキーなようですが、少なくとも開発には機能します

tj 2019年03月12日

@theKashey OMG男、それは動作します！私は、この問題に関連して人々が提案するさまざまな解決策を試しましたpackage.jsonの深さでマングリングし、プロジェクト全体で「2つの反応」を追跡し、*フックのルールを破っているかどうかを確認します。ではありません）が、私はあなたのオプションが次のようになっていると思います：

alias: {
      react: path.resolve(path.join(__dirname, './node_modules/react')),
      'react-dom': path.resolve(path.join(__dirname, './node_modules/react-dom'))
    }

app-as-a-libのフックを使用して、プロジェクトを次のレベルに移動できます。

これは結果のwebpack.config.jsです

chulanovskyi 2019年03月12日

👍1

npm ls react

戻り値

[email protected] D:\code\project
`-- (empty)

私のため

console.log(window.React1 === window.React2)はtrueを返します
この時点で、問題の原因はSSRだと思います

アップデート。それは確かにReact-apolloのSSR動作によって引き起こされました（https://github.com/apollographql/react-apollo/issues/2541）
2.3.1にアップグレードすると修正されました

damiangreen 2019年03月12日

こんにちはみんな、私たちのチームはこの問題に直面し、それを解決するのに数日かかりました。

私たちのための実用的なソリューション

解決策A：上記のように、検索するパッケージの位置を指定します

  alias: {
      react: path.resolve(path.join(__dirname, './node_modules/react')),
      'react-dom': path.resolve(path.join(__dirname, './node_modules/react-dom'))
    }

解決策B：webpack resolve.modulesを使用して、モジュールを探すために適切なnode_modulesフォルダーに優先順位を付けます

事件の背景とそれが起こる理由

まず第一に、それはreactのせいではなく、lernaのせいでもありませんが、react、webpack、npm-linkが何らかの責任を負う必要があるかもしれません。

ケース要件：

-非モノレポ：

シンボリックリンクされたパッケージがあります
symlinkedパッケージはフックを使用してコンポーネントをエクスポートしました
反応クライアントサイドページの作成
- モノレポに取り組んでいる場合
シンボリックリンクされたパッケージ
パッケージには異なるバージョンの依存関係があり（パッチバージョンの違いも）、2つのreactがインストールされているためワークスペースでも解決されます
エントランスパッケージはフックを使用したシンボリックリンクパッケージをインポートしました

例

構造

- mono repo root
  - packages
    - ComponentWithHooks (peerDependency: react@^16.8.1)
    - ProductA (dependency: ComponentWithHooks, dependency: react@^16.8.4)
    - ProductB (dependency: react@^16.8.1)

ワークスペースでブートストラップすると、次のように解決されます。

- mono repo root
  - node_modules
    - react(16.8.1)
  - packages
    - ComponentWithHooks
      - node_modules (empty)
    - ProductA
      - node_modules
        - react(16.8.4)
    - ProductB
      - node_modules (empty)

そして、webpackまたは何か他のものでProductAを提供すると、2つのreactインスタンスが含まれます。

ProductAのコードは、 ProductA/node_modules/reactを検索します。

ただし、インポートされたComponentWithHooksはmono repo root/node_modules/reactを検索します。

なんで？ npmのルックアップルールを覚えていますか？自身のnode_modulesフォルダーでモジュールが見つからない場合は、親のnode_modulesを検索します...

そのため、webpackなどのツールはデフォルトでこのルールを完全に適用しました。
util monorepoソリューションが普及するのは間違いありません。
そして、通常のパッケージはこれに気づきません。それらのほとんどは、reactやreduxとして単一のインスタンスを必要としないからです。

JennieJi 2019年03月14日

👍3

ヤーンワークスペースの例を使用した非常に基本的な複製を使用して、これと同じ問題が発生しています-https：//github.com/mwarger/yarn-workspace-hooks-repro

タイプスクリプトで書かれ、小包にバンドルされているcomponent-libraryがあります。 example-demoは、このcomponent-libraryを紹介するものであり、新しく作成されたCRAアプリです。すべての一般的なパッケージは糸で吊り上げられているため、理論的には1つのバージョンのreactしか利用できないはずです。ただし、index.tsxで行っているReact.useEffect呼び出しにより、このGitHubの問題につながるエラーが発生します。

フックが追加されるまで、すべてが機能します。エラーを再現するには、 component-library/src/index.tsxの7〜9行目のコメントを解除します。

うまくいけば、私は私が見落としている愚かなことをしている。これを改善するために私が使用する可能性のある手順についてアドバイスしてください。ありがとう！

フォローアップ編集：以下の推奨デバッグスクリプト出力は、 trueを出力します。 Reactsが2つないようです。

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

mwarger 2019年03月14日

👍5 👀1 😕1

数時間かかったので、ここでメモを取る価値があるかもしれません。

私の場合、HTMLテンプレートの先頭に<script defer src="./dist/bundle.js" />の行を配置しました。これは、Reactフックを使用しない場合は通常どおり機能します。すべてのソリューションが機能するわけではなく、この場合、 window.React1 == window.React2チェックはtrueを返します。

webpackは後でスクリプトタグを挿入するため、テンプレート自体にスクリプトタグを含めることはできません。テンプレートからスクリプトタグを削除して、Reactをフック（しゃれを意図したもの）で再び機能させます。

taiansu 2019年03月15日

👍3 🎉1

私の場合、作業中の依存関係にnpmリンクされたReactアプリがあります。これは、 reactとreact-domを開発部門とピア部門に移動する必要があるいくつかの依存関係を修正できるまでうまくいきます。

アプリから： cd node_modules/react && npm link
アプリから： cd node_modules/react-dom && npm link react
リンクされたパッケージから： npm link react

なぜそれが機能するのですか？エラー警告ページには、「フックが機能するためには、アプリケーションコードからのreactインポートが、react-domパッケージ内からのreactインポートと同じモジュールに解決される必要がある」と記載されています。

ajcrews 2019年03月15日

👍10 🎉7

上記のすべてを試したにもかかわらず、私はまだこの問題を抱えています。 preset-envおよびpreset-reactプラグインを使用した標準のwebpack4 / babel構成。私のreact / react-domバージョンは、糸の解像度を使用して16.8.4に固定されています（上記のwindow.React1 === window.React2チェックでもtrueが返されます）。

これは、最も基本的な使用法です。

import React, { useState } from "react";

function MyComp() {
  const [hello] = useState(0);

  return <div>HELLO {hello}</div>;
}
export default MyComp;

他に何かアイデアはありますか？

編集：明確にするために、エラーはOPに従ってreact.development.js:88 Uncaught Invariant Violation: Hooks can only be called inside the body of a function component.として表示されます

baking-code 2019年03月17日

私の場合、作業中の依存関係にnpmリンクされたReactアプリがあります。これは、 reactとreact-domを開発部門とピア部門に移動する必要があるいくつかの依存関係を修正できるまでうまくいきます。
アプリから： cd node_modules/react && npm link
アプリから： cd node_modules/react-dom && npm link react
リンクされたパッケージから： npm link react
なぜそれが機能するのですか？エラー警告ページには、「フックが機能するためには、アプリケーションコードからのreactインポートが、react-domパッケージ内からのreactインポートと同じモジュールに解決される必要がある」と記載されています。

ありがとう！これは私にとって素晴らしい働きをします。（npmリンクとシンボリックリンクが混在する状況を使用している場合でも）

Saebyuckbaan 2019年03月20日

👍1

上記の提案をすべて試しましたが、まだエラーが発生していました。

@inverheriveの少しの助けを借りて、 enzyme-adapter-react-16がまだ問題を引き起こしていることがわかりました。

react-test-rendererを最新バージョン（16.8.4）に更新したのは、フックのサポートが最近追加されたばかりであるためですが、 npm ls react-test-rendererを介して、最新バージョンのenzyme-adapter-react-16 （1.11.2 ）は[email protected]の内部依存関係を持っていましたが、これはフックをサポートしていません。

├─┬ [email protected]
│ └── [email protected] 
└── [email protected]

この問題を修正するため、および@chulanovskyiの修正に従うために、yarnを使用しているため、package.jsonにreact-test-rendererの解像度を追加しました。これにより、 react-test-rendererのすべての参照で「16.8.4」が使用されます。

  "resolutions": {
    "react-test-renderer": "16.8.4"
  },

これは非常に苛立たしいことでした。これが他の誰かを助けることができることを願っています。 @chulanovskyiと@theKasheyの提案にも感謝します。

Paddy-Hamilton 2019年03月21日

👍5

これは、reactとreact-domを開発者とピア部門に移動する必要があるいくつかの依存関係を修正できるまでうまくいきます。

@ajcrews （私は何かを逃したかもしれませんが）私はnpm linkの内部ライブラリを持っており、そのライブラリにはreact peerDependenciesとdevDependenciesに$＃$ 1 $＃$がありますが、それでもあなたが必要でしたエラーを解決するかどうかに関係なく修正します。素敵な発見！

ricokahler 2019年03月23日

投稿しようとしましたが、解決策を見つけました

コンポーネントライブラリがあり、開発用のCRAアプリの例が含まれています

CRAアプリのpackage.jsonで、reactとreact-domを変更して、ルートコンポーネントのpackage.jsonから「借用」する必要がありました。

"dependencies": {
  "react": "link:../node_modules/react",
  "react-dom": "link:../node_modules/reac-dom",
}

tim-soft 2019年03月23日

これは非常に苛立たしいことでした。これが他の誰かを助けることができることを願っています。 @chulanovskyiと@theKasheyの提案にも感謝します。

@ Paddy-Hamiltonインストール後は、常にロックファイルを確認してください。 yarnがreact-test-rendererを複製しているという同じ問題が発生しました。あなたのロックファイルに少しの手術をすることで、あなたはそれらを修正することができます：

yarn add -D react-test-renderer

-react-test-renderer@^16.0.0-0, react-test-renderer@^16.1.1:
+react-test-renderer@^16.0.0-0:
  version "16.8.4"
  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.4.tgz#abee4c2c3bf967a8892a7b37f77370c5570d5329"
  integrity sha512-jQ9Tf/ilIGSr55Cz23AZ/7H3ABEdo9oy2zF9nDHZyhLHDSLKuoILxw2ifpBfuuwQvj4LCoqdru9iZf7gwFH28A==
  dependencies:
    object-assign "^4.1.1"
    prop-types "^15.6.2"
    react-is "^16.8.4"
    scheduler "^0.13.4"

+react-test-renderer@^16.8.5:
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.5.tgz#4cba7a8aad73f7e8a0bc4379a0fe21632886a563"
+  integrity sha512-/pFpHYQH4f35OqOae/DgOCXJDxBqD3K3akVfDhLgR0qYHoHjnICI/XS9QDwIhbrOFHWL7okVW9kKMaHuKvt2ng==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.5"
+    scheduler "^0.13.5"

yarn checkはすでに警告します

$ yarn check
warning "enzyme-adapter-react-16#react-test-renderer@^16.0.0-0" could be deduped from "16.8.5" to "[email protected]"

次に、次のパッチを適用して手動で重複排除します。

-react-test-renderer@^16.0.0-0:
-  version "16.8.4"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.4.tgz#abee4c2c3bf967a8892a7b37f77370c5570d5329"
-  integrity sha512-jQ9Tf/ilIGSr55Cz23AZ/7H3ABEdo9oy2zF9nDHZyhLHDSLKuoILxw2ifpBfuuwQvj4LCoqdru9iZf7gwFH28A==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    react-is "^16.8.4"
-    scheduler "^0.13.4"
-
-react-test-renderer@^16.8.5:
+react-test-renderer@^16.0.0-0, react-test-renderer@^16.8.5:

これで、 resolutionsまたはwebpackエイリアスシェナニガンのない単一バージョンのreact-test-rendererができました。

リンクされたパッケージとcreate-react-appに関連する問題については、facebook / create-react-app＃6207をフォローしてください。

eps1lon 2019年03月23日

👍3

それを解決する方法はたくさんありますが、糸の解像度は通常は役に立ちません-それは「構築ツール」にもっと関連しています
webpackの場合はaliasesを使用します- reactのようなすべてのアヒルを単一のファイルに「ハード」エイリアスします
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
     react: path.resolve(path.join(__dirname, './node_modules/react')),
   }
パーセルの場合は同じエイリアスを使用しますが、package.jsonで定義します-https： //parceljs.org/module_resolution.html#aliases
nodejs（jest以外）の場合は、requirecontrolを使用できます
import {setAliases} from 'require-control';
setAliases({
  'react': path.resolve(path.join(__dirname, './node_modules/react'))
});
冗談の場合はmoduleNameMapperを使用します
"jest": {
    "moduleNameMapper": {
      "^react$": "<rootDir>/node_modules/$1",
    },

これは私のためにそれをしました。

ryudice 2019年03月27日

@ajcrews
ありがとう！私には見事に機能します！

nakhodkin 2019年03月28日

私はreact16.8.6、electron-webpack、RHLを使用して、最小限のセットアップで小さなテストケースを作成しました。特に、このエラーが発生すると、ブラウザ全体（このセットアップでは、electron）がCPU時間を消費し始めます）

https://github.com/PerfectionCSGO/reeee

私はこの問題について3日間頭を悩ませてきました。もともとRHLが問題だと思っていましたが、このプロジェクトから完全に削除しても問題は解決しません。

npm lsreactは1つの結果のみを返します。上記の修正が最新バージョンとwebpackエイリアスに適用されていることを確認しました。

コードはサンドボックスで機能します。

単純なwebpack / websiteでは、コードは問題なく機能します。ただし、electron-webpackを使用すると、この問題は解決しません。

  "dependencies": {
    "i18next": "^15.0.9",
    "i18next-browser-languagedetector": "^3.0.1",
    "react": "^16.8.6",
    "react-dom": "npm:@hot-loader/react-dom",
    "react-hot-loader": "^4.8.2",
    "react-i18next": "^10.6.1",
    "source-map-support": "^0.5.11",
    "tslint": "^5.15.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "@types/react": "^16.8.12",
    "@types/react-dom": "^16.8.3",
    "electron": "^4.1.3",
    "electron-builder": "20.39.0",
    "electron-webpack": "^2.6.2",
    "electron-webpack-ts": "^3.1.1",
    "typescript": "^3.4.1",
    "webpack": "^4.29.6"
  }

誰かが私にポインターをくれることを願っています...

react-l18nextをmobx-react-liteに置き換えてobserverを使用すると、同じ効果が発生します。

PerfectionVR 2019年04月04日

👍2 👀1

私の問題に関しては、electron-webpackを曲げることで問題を解決し、より「純粋な」電子ソリューションを採用しました。私の推測では、互換性のないのはwebpackまたはbabelで使用されるツールチェーンだと思います。

PerfectionVR 2019年04月05日

😕1

この問題は本番環境でのみ発生しました。ここで提案された解決策のどれも役に立ちませんでした。
私のユースケースは、別のWebサイトにウィジェットとして読み込まれるサードパーティのアプリでした。
サイトにウィジェットが最初に読み込まれたときはすべて正常に機能しましたが、ユーザーが別のページに移動してウィジェットのあるページに戻ったときに、フックエラーが発生しました。

このエラーは、ナビゲーションによってページがリロードされない場合にのみ発生することに注意してください。

私は何が問題なのかを理解しようと何時間も費やしました。最後に、問題はアプリバンドルをロードするコードスニペットにありました。ページの変更時に、バンドルが複数回読み込まれる可能性があり、同じ名前空間に複数のReactインスタンスがあると推測されます。

スクリプトがすでにロードされているかどうかを確認して修正しました。
まず、Webpackの「library」構成を使用してライブラリをグローバル名前空間にエクスポートしました。

output: {
    library: 'myLib',
    ...
}

次に、読み込みスクリプトで、ライブラリが存在するかどうかを確認しました。

if(!window.myLib){
    var bz = document.createElement('script');
    bz.type = 'text/javascript'; 
    bz.async = true;
    bz.src = 'https://path/to/bundle.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(bz, s);
}

これは非常に特殊なユースケースかもしれませんが、これが他の誰かに役立つことを願っています。

eladlevy 2019年04月05日

つまり、Webpackを活用するメインのReactアプリケーションがあります。
フックを使用する小さなReactライブラリを作成しようとしています。バンドラー（パーセル、純粋なbabel、webpack）を交換してみました。
webpackの実装を試すとき、reactとreact-domを外部としてマークしたので、バンドルには含めません。
npmリンクを使用すると、同じフック例外が発生します。

メインアプリケーションのreactへのシンボリックリンクを作成することは機能しますが、それは優れた開発ワークフローではありません。

問題の根本的な原因を突き止めるのに苦労しています。重複するReactインスタンスを生成しているのは何ですか？

adriene-orange 2019年04月09日

こんにちは@ adriene-orange、詳細については私の投稿https://github.com/facebook/react/issues/13991#issuecomment-472740798を見つけることができます。

npmリンクによって引き起こされるマルチインスタンスは、ノードがパッケージ内で見つからない場合、デフォルトで親フォルダーのnode_modulesでモジュールを検索するためです。

このために私たちが見つけた最も簡単で最良の解決策は、エントランスパッケージのwebpack（または他のツール）構成にありますresolve.modulesのようなものを使用して、パスを手動で設定し、webpackがモジュールを検索するパスを並べ替えます。 Exp。、 resolve: { modules: [path.resolve(PACKAGE_ROOT, 'node_modules'), 'node_modules'] }は、webpackが最初にエントランスパッケージルートのnode_module内のモジュールを検索するように強制します。ルートでモジュールが見つからない場合は、相対的なnode_modulesフォルダーで見つけてください...

つまり、Webpackを活用するメインのReactアプリケーションがあります。
フックを使用する小さなReactライブラリを作成しようとしています。バンドラー（パーセル、純粋なbabel、webpack）を交換してみました。
webpackの実装を試すとき、reactとreact-domを外部としてマークしたので、バンドルには含めません。
npmリンクを使用すると、同じフック例外が発生します。
メインアプリケーションのreactへのシンボリックリンクを作成することは機能しますが、それは優れた開発ワークフローではありません。
問題の根本的な原因を突き止めるのに苦労しています。重複するReactインスタンスを生成しているのは何ですか？

JennieJi 2019年04月10日

👍3

こんにちは、このエラーが発生します

不変の違反：無効なフック呼び出し。フックは、関数コンポーネントの本体の内部でのみ呼び出すことができます。これは、次のいずれかの理由で発生する可能性があります。
1. Reactとレンダラー（React DOMなど）のバージョンが一致していない可能性があります
2.フックのルールに違反している可能性があります
3.同じアプリにReactのコピーが複数ある可能性があります
この問題をデバッグして修正する方法のヒントについては、 https：//fb.me/react-invalid-hook-callを参照してください。

   5 | 
   6 | const useApiHelper = (url, reducer) => {
>  7 |     const [state, dispatch] = useReducer(reducer, {});
     |                                                  ^
   8 | 
   9 |     useEffect(() => {
  10 |         fetch(url).then(res => res.json())

サンプルコードhttps://stackblitz.com/edit/react-mbze9q

テストケース内でこの関数にアクセスしようとすると、上記のエラーが発生します

abhishekguru 2019年04月11日

👎1

@abhishekguruテストでは、コンポーネントの外側でフックを呼び出しています。

test('API test', async () => {
  const newState = useAPIHelper( // <- Called outside of a component
    'https://jsonplaceholder.typicode.com/posts',
    reducer
  )
  console.log(newState, 'new');
  // expect(newState[samUrl].loading).toEqual(true);
});

エラーが示すように、フックは別のフックから、またはコンポーネント内からのみ呼び出すことができます。あなたの場合、テスト用のコンポーネントを作成し、必要に応じてフックを使用するそのコンポーネントをレンダリングすることができます。

hamlim 2019年04月11日

恥知らずなプラグ

@abhishekguru複数のコンポーネント間で汎用フックを使用していて、特定のコンポーネントとは別にそれをテストしたい場合は、 react-hooks-testing-libraryの使用を検討してください。

import { renderHook } from 'react-hooks-testing-library'

test('API test', async () => {
  const { result } = renderHook(() => useAPIHelper( // <- now called within a component
    'https://jsonplaceholder.typicode.com/posts',
    reducer
  ))

  console.log(result.current, 'new');
  // expect(result.current[samUrl].loading).toEqual(true);
});

mpeyper 2019年04月11日

SSRだけに問題があったので、ここでチャイムを鳴らしたかったのです。ファイルの変更時にノードのrequire.cacheをクリアします。これにより、サーバーでのホットリロードが効果的に行われます。ノードのrequire.cacheをクリアすると、単一のコピーが必要なライブラリで問題が発生します。これが私たちの解決策です：

Object.keys(require.cache)
  .filter(key => !isSingleton(key)) // This is needed here because react cannot be deleted without causing errors
  .forEach(key => {
    delete require.cache[key]
  })

isSingleton関数には、単一のコピーが必要なライブラリのリストが含まれています。経験則として、 peerDependenciesで定義する必要のあるライブラリを使用します。

https://yarnpkg.com/lang/en/docs/dependency-types/#toc -peerdependencies

joeshehata 2019年04月12日

私にとっても同じ問題がありました

window.React1 = require('react');
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2); // true

また、 trueを返し、与えられたすべての提案を試しましたが、何も機能しませんでした。最後に、次のことが判明しました。

Webpackは、 bundle.jsのスクリプトタグをindex.htmlに自動的に追加します。私の問題は、 bundle.jsをindex.htmlに明示的に追加していたためでした。これは、フックの前は正常に機能していました。

jaikathuria 2019年04月17日

👍4

私にとっての問題は、babel 7のアップグレード後、npm lsreactを使用した個別のバージョンはありませんでした。削除
.babelrcの「react-hot-loader / babel」で一時的に問題が修正されました。

ts-jait 2019年04月30日

上記のすべての解決策を試しましたが、それでもエラーが発生しました。
最終的に、パッケージwhy-did-you-updateが原因であることがわかり、それに関連する問題があります。誰にとっても手がかりは、Reactを変更する同様のパッケージを使用しています。

desmondgong 2019年04月30日

❤1

react-native + Yarn Workspacesシナリオでこれを修正することができました。

ルート内package.json

{
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**/react-native",
      "**/react-native/!(react)/**"
    ]
  }
}

これにより、 react-nativeコードが（React Nativeに必要なように）引き上げられるのを防ぎながら、 reactを引き上げ、すべての共有モジュールが同じReactを使用するようにします。

metro.config.js

module.exports = {
  watchFolders: [
    path.resolve(__dirname, '../', 'shared-module'), 
    // ...more modules
    path.resolve(__dirname, '../', '../') // to make sure the root `react` is also part of the haste module map
  ]
}

メトロ構成により、バンドラーはすべてがどこにあるかを知ることができます。

sartaj 2019年04月30日

👍5

たとえば、npmパッケージをローカルで開発している人々が問題を解決する方法を見つけました。彼らは、ある種のサンプルアプリでnpmリンクを使用してパッケージをロードすることにより、ローカルでテストしようとしています。

サンプルアプリ（コンポーネントをテストする元の方法）からStorybookに切り替えました。プロジェクトでストーリーブックを使用する場合、コンポーネントが使用しているものと同じものを使用するため、Reactが2回ロードされることはありません。 npm linkを使用しているときに、フックとReactが2回読み込まれるという問題が発生しました。また、上記のソリューションを機能させることができませんでした。 Storybookで問題が解決し、複数のシナリオでコンポーネントをテストすると同時に、インタラクティブなドキュメントを作成する方法ができました。

Danilo-Zekovic 2019年05月02日

これに関する私の経験を共有し、コンポーネントライブラリにwebpackの外部を使用して、ビルドからreactとreact-domを除外することで、プロジェクトの問題を解決しました。

Reactから始めたばかりです。私の場合、NeutrinoコンポーネントライブラリパッケージとNeutrinowebappクライアントパッケージを備えたLernamonorepoから始めています。 Webアプリは、リンクされたコンポーネントライブラリのビルド製品を使用します。同じReactインスタンスに対していくつかの実験とtrueを取得した後、コンポーネントライブラリのビルドからreactとreact-domを完全に除外する方法を検討しました。

これは、webpackコンポーネントライブラリの一般的なデザインパターンソリューションのようです。そのため、コンポーネントライブラリでwebpack構成に追加しました。

"externals": {
  "react": "react",
  "react-dom": "react-dom"
}

reactとreact-domのグローバルスクリプトタグをwebappパッケージに入れる必要はありませんでした。 Webpackは、Webアプリケーションに提供するのと同じように、 require実装でコンポーネントライブラリにそれらを提供していると思います。

elpddev 2019年05月09日

❤6 🎉6

このエラーのもう1つの原因は、ReactルーターのRouteの設定ミスです。

これは失敗します：

<Route render={MyHookedComponent}/>

、しかしこれは成功します：

<Route component={MyHookedComponent}/>

例えば。 render componentを使用する必要があります。 render通常、クラスベースのコンポーネントで正常に機能するため、これは簡単な間違いです。

samuelcolvin 2019年05月11日

🚀1 👎1

私はbiolerplateに取り組んでいて、それをnpmに公開したいと思っており、 npm linkを使用して開発しています。正常に機能していましたが、しばらくするとエラーInvalid Hook call warningが発生し始めました。
npm link ../myapp/node_modules/reactを使用してみましたが、問題が解決しません。
そして、 React1 === React2と比較すると、それは真実であり、 npm ls reactも実行され、1つのパッケージのみが表示されます。

また、webpackも使用していません。create-react-appの外部にレイヤーを追加しているだけなので、アプリにローカルにインストールされたreactモジュールを使用させることはできません。
過去3日間から立ち往生しています。_

hnagarkoti 2019年05月13日

👍5

@hnagarkotiと同じです。

RohovDmytro 2019年05月15日

古いバージョンのreact-apolloを使用していたため、サーバーサイドレンダリング（SSR）中にこの警告が発生しました。この問題に遭遇した次の貧しい人々を助けるために、このリンクをここに残したかっただけです。

https://github.com/apollographql/react-apollo/issues/2541

つまり、 getDataFromTreeは、バージョン[email protected]までreactフックをサポートしていません。

richardscarrott 2019年05月18日

❤2 🎉1 👍1

同じ問題が発生し、次のように追加して解決しました。
 alias: {
        react: path.resolve('./node_modules/react')
      }
メインアプリのwebpack構成のresolveプロパティに。
Reactを2つ使用するのは明らかに私の間違いでしたが、エラーメッセージがもっと良ければ素晴らしいと思います。これはおそらく似ていると思います：＃2402

create-react-appでこれを行うための提案はありますか？

dwjohnston 2019年05月28日

^わかりました、create-react-appでこれを解決するために私が行った解決策は、 react-app-rewiredとcustomize-craを使用することです。

これが私のconfig-overrides.jsです：

const {
    override,
    addWebpackAlias,
  } = require("customize-cra");

const path = require('path'); 

module.exports = override( 
    addWebpackAlias({
        react: path.resolve('./node_modules/react')
    })
)

プロジェクトの例： https ：//github.com/dwjohnston/material-ui-hooks-issue/tree/master

dwjohnston 2019年05月28日

👍7 ❤1 🎉1

私たちのチームでは、数十のアプリにまたがるユニバーサルナビゲーションコンポーネントを使用しています。これらのアプリはすべて、react 15.0.0からreact 16.8.0に由来します。フックの上に実装されたナビゲーションを有効にするには、最新のreactとバンドルする必要があります。

この場合、reactの複数のインスタンスを持つことが私たちの基本的な要件ですが、reactの公式チームが将来この問題を解決する意思があるかどうかを知りたいですか？

otakustay 2019年05月28日

@dwjohnston create-react-appの回避策は、開発用のwebpack構成を作成することでした。 create-react-app内部でwebpack、webpack-dev-server、およびbabel-loaderを使用するため、依存関係はすでに暗黙的に存在しますが、取得するためのかなりのオーバーヘッドがあるため、開発専用のwebpack構成を作成することはそれほど悪くありませんでした正しく動作しています。

create-react-appに問題があります： https ：//github.com/facebook/create-react-app/issues/6953 Webpack aliasサポートなどを追加します。

👋誰かがcreate-react-appも使用していて、この問題点を経験している場合は、その問題に親指を立ててください。

ricokahler 2019年05月28日

👍10

@ ricokahler-指摘してくれてありがとう。この問題を抱えているのは私だけではないことを知ってうれしく思います。私も状況に応じて問題に遭遇しました。

この問題についてさらに議論していることを知っているリソースはありますか？

dwjohnston 2019年05月29日

👍1

私のボートにいる場合は、ローカルディレクトリからreactコンポーネントパッケージを追加しました。これにより、node_modulesの独自のコピー（npmリンクを使用してこれを行うため）とともに、自動的にビルドおよびインストールされます。アプリ2コピーまたは今すぐ反応します。

node_modules /を削除して回避しましたアプリを実行する前に/ node_modules。これを自動的に行うには：

"prestart": "rimraf ./node_modules/<my_package>/node_modules"

JeremyGrieshop 2019年05月30日

🎉1 👍1

私もSSRをしているときにこれに直面しました。
Lernaを使用してReactライブラリをローカルでテストする場合は、ライブラリのpeerDependenciesとして「react / react-dom / react-router」を追加できますが、devDependenciesとして追加しないでください。（これにより重複します）
node --preserve-symlinksを使用すると、peerDependenciesをインストールする親リポジトリを検索できます。
jestの場合、親リポジトリパスを「jest.moduleDirectories」オプションに追加して、Jestがそれらを解決できるようにする必要があります。

antonybudianto 2019年06月12日

@apieceofbartそれは私のために働く、thx！

wind4gis 2019年06月17日

JSモジュールなどの外部Reactコンポーネントをロードするときに、このエラーが発生しました。それらは完全にプロジェクトの外にあり、動的なimport（）がロードされています（より多くのサポートのためにjsonpも）。この問題を回避するために、Reactをプロパティとして各モジュールに渡す/注入します。これは機能しますが、各モジュールは含まれているReactアプリに依存します。依存関係を削除しようとしています。

mikeaustin 2019年06月22日

👍2

他の人が述べているように、このプロパティは、あらゆるタイプのマイクロフロントエンドに使用できるReactを排除します。問題は、ライブラリとして使用するためにReactをインポートするときに、JSランタイムでグローバル状態を作成するというこの副作用があることです。

単純なユースケースの場合、その副作用があるということは、Reactが「使いやすい」ことを意味することを理解しています。ただし、Webページが複数のバンドルステップからの複数のスクリプトで構成されている場合、そのうちの1つはReactを設定でき（その副作用を明示的に実行できます）、他のスクリプトは単にライブラリ関数を呼び出すことができます。

psharbau-cmu 2019年06月26日

私はまだreact-bootstrapに問題があります：＃https ：//github.com/react-bootstrap/react-bootstrap/issues/3965

timgerhard 2019年06月28日

Reactのライブラリを作成しようとして立ち往生している他の人は、 https：//github.com/whitecolor/yalcを試してください。シンボリックリンクよりもはるかにうまく機能します。

corysimmons 2019年06月28日

👍2

@mpeyperはうまく機能します。どうも

ediopia 2019年06月29日

🎉1

@apieceofbartそれは私のために働いた。提案をありがとう。 👍

pankaz 2019年06月29日

私の場合、この問題は、PowerShellでプロジェクトディレクトリに移動し、パスでディレクトリ名を大文字にしないときに発生しました。ユーザー/…/…ではなく、users /…/…でプロジェクトを作成しました。
この問題は、キャピタライゼーションエラーを修正してプロジェクトを再作成したときに解決されました。

Annie-Johnson 2019年07月02日

私にとっては、次のことを行います。

    "react": "file:../my-library/node_modules/react",
    "react-dom": "file:../my-library/node_modules/react-dom",

そのほとんどを修正しましたが、十分ではありませんでした。エラーhooks can only be called inside the body of a function componentが発生し続けました。

それは、私のライブラリのコンポーネントの一部が次のようにエクスポートされたためであることがわかりました。

export default Radium(withTranslation()(MyComponent))

：バツ：

ここで、 withTranslationはreact-i18nextからのHOCであり、 RadiumはRadiumからのHOCです。

そして、そのようにそれらをエクスポートします：

export default withTranslation()(Radium(MyComponent))

：heavy_check_mark：
すべてを修正しました。

react-i18nextはReactフックを使用するバージョン10にあったことに注意してください

Skylsmoi 2019年07月05日

@mikeaustin同じ問題が発生しています。「Reactをプロパティとして各モジュールに渡す/注入する」例はありますか？

cpuy 2019年07月09日

それでもこの問題が発生する場合は、すべての手順を試してください。

糸のワークスペース（lerna経由）
反応部が1つあるかどうかを確認しました、はい

影響を与える可能性のあるいくつかの事柄：

libraryTargetでwebpackを使用する
typescriptを使用する

$ npm ls react-dom
/xxx
└── [email protected]

$ npm ls react
/xxx
└── [email protected]

ルートpackage.json

{
  ...
  "workspaces": [
    "packages/*",
  ],
  "devDependencies": {
    ...
  },
  "dependencies": {
    "react": "16.8.6",
    "react-dom": "16.8.6"
  },
  "resolutions": {
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "**/react": "16.8.6",
    "**/react-dom": "16.8.6"
  }
}

robmoorman 2019年07月10日

👍1

@JeremyGrieshop私は同じ問題を抱えていました、そしてそれは私のために働きました、ありがとう。

以下のように、package.jsonに「prestart」を追加します。

"scripts": {
    "prestart": "rimraf ./node_modules/<my package>/node_modules",
    "start": "react-scripts start",
    "build": "react-scripts build",
  },

sureshsevarthi 2019年07月10日

私はこの問題を抱えていましたが、react / react-domの複数のバージョンが原因ではありませんでした
私が使用しているカスタムツールでは、requireキャッシュが（この説明以外の目的で）クリアされていました。例：

Object.keys(require.cache).forEach((key) => {
      delete require.cache[key];
    });

だから、あなたがこのようなことをしているなら、そこにいる人々にfyi-それはReact Hooksに影響を与えるので、できればそれを避けてください

jooj123 2019年07月11日

同じ問題が発生し、次のように追加して解決しました。
 alias: {
        react: path.resolve('./node_modules/react')
      }
メインアプリのwebpack構成のresolveプロパティに。
Reactを2つ使用するのは明らかに私の間違いでしたが、エラーメッセージがもっと良ければ素晴らしいと思います。これはおそらく似ていると思います：＃2402

Parcelを使用している人にとって、コンパイルされたファイルがdistである場合は、次を追加する必要があります。

  "alias": {
    "react-mediator": "./dist"
  },

あなたのpackage.jsonに、そしてあなたはまだローカル開発/テストのためにライブラリをlink （npmまたはyarn）することができます。

icyJoseph 2019年07月12日

👍1

@mikeaustin同じ問題が発生しています。「Reactをプロパティとして各モジュールに渡す/注入する」例はありますか？

React Contextを使用して「React」自体を渡し、HoCを作成してプロパティをすべてのコンポーネントに挿入できます。 api.ReactのようなAPIで何でも渡すことができますが、これらのコンポーネントの周りにHoCをラップするのは少しトリッキーになります（現在、それらはコンポーネント内でのみ使用可能であり、エクスポートには使用できないためです。

const withReact = Component = props => (
  <ReactContext.Provider value={api => <Component api={api} {...props} /> } />
)

mikeaustin 2019年07月13日

ソースコードを変更してエラーメッセージを変更し、それに情報を追加するのが簡単ではなく、さらに時間が必要な場合は、少なくともこのメモをドキュメントに追加してください。

_p.s：reactにはすばらしいドキュメントがありますが、ページを確認する必要があると思います。_

dehghani-mehdi 2019年07月13日

@OliverRadini

react-hot-loaderを^4.6.0に更新することで、これを修正できました。

マーン、それはそれを修正しました。
@gaearon @theKasheyこれをhttps://reactjs.org/warnings/invalid-hook-call-warning.htmlに追加して、古いバージョンのreact-hot-loaderが原因で時間を無駄にしないようにしてはどうでしょうか。

catamphetamine 2019年07月22日

私はそれがすでに十数の問題にわたって文書化されているのはかなり良いと思いました。

theKashey 2019年07月22日

こんにちは、私はアプリとライブラリの両方でReactを使用しています。アプリ内のライブラリを使用しています。私は以下を使用して2つのreactインスタンスの問題を修正することができました：

アプリのwebpack構成：

    alias: { react: path.resolve( '__dirname', '..',  'node_modules', 'react' ) // Adapt this to match your file tree

ライブラリのwebpack構成

  externals: {
    react: 'react', // Case matters here
    'react-dom': 'react-dom' // Case matters here
  }

pierreferry 2019年07月22日

🚀1 🎉1

そのため、トランスパイルされていないファイル（* .js）からフックを呼び出す際に問題が発生します。

index.js ：

import ReactDOM from 'react-dom';
import './index.css';
import App from './app';

ReactDOM.render(App(), document.getElementById('root'));

app.jsx

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const BaseContext = React.createContext();

const initialState = {
  woo: true
};

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

const Home = () => <h1>You're at home.</h1>;

const App = () => {
  // eslint-disable-next-line
  const [state, dispatch] = React.useReducer(reducer, initialState);
  return (
    <Router>
      <BaseContext.Provider value={initialState}>
        <BaseContext.Consumer>
          <div className="welcome">
            <nav>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
              </ul>
            </nav>
            <header className="header">
              <h1>Welcome!</h1>
            </header>
            <Route path="/" exact component={Home} />
          </div>
        </BaseContext.Consumer>
      </BaseContext.Provider>
    </Router>
  );
};
export default App;

「JSXファイルに移動してトランスパイルする」ではないと仮定して、何かアドバイスはありますか？

chrisgeo 2019年07月23日

刺激と反応を組み合わせて使用しているので、何もうまくいかないようです。ハイブリッドアプリがあり、フックを使い始めましたが、ターボリンクを追加し始めるとすぐに失敗しました:(

編集：今のところ、私が使用しているスクリプトタグにdata-turbolinks-track="reload" data-turbolinks-eval="false"を追加することで問題を解決したので、今のところそれを行う必要があります

sicksid 2019年07月23日

私は同じ質問をします、4時間後、私はjenkinsutilがサーバーへの変換.babelrcファイルを失っていたことがわかりました。

GoToBoy 2019年07月26日

なぜこれがエラーを引き起こすのでしょうか？

$ npm ls react
[email protected] /mnt/g/development/javascript/pow-vehmain
└── [email protected]`

Invalid hook call...
ServiceVisitMaintenance
src/components/ServiceVisit/ServiceVisitMaintenance.js:6
  3 | import { ServiceVisitForm } from './ServiceVisitForm';
  4 | 
  5 | const data = [{ id: 1, description: 'Ford' }, { id: 10, description: 'Edsel' }];
> 6 | const ServiceVisitMaintenance = () => {
  7 |   const [vehicleList, setVehicleList] = useState([]);
  8 |   return (
  9 |     <div>

ServiceVisitMaintenance.js：

import React, { useState } from 'react';
import { ServiceVisitForm } from './ServiceVisitForm';
const data = [{ id: 1, description: 'Ford' }, { id: 10, description: 'Edsel' }];
const ServiceVisitMaintenance = () => {
  const [vehicleList, setVehicleList] = useState([]);
  return (
    <div>
      <ServiceVisitForm vehicleList={data} />
    </div>
  );
};

export { ServiceVisitMaintenance };

larrym 2019年07月26日

あなたのreact-domバージョンを確認してください。

icyJoseph 2019年07月26日

$ npm lsreact-dom
[email protected] / mnt / g / development / javascript / pow-vehmain
└──[email protected]

larrym 2019年07月26日

ライブラリからconnect（mapStateToProps）（MyComponent）をエクスポートし、そのライブラリをCRAアプリで使用すると、この問題に直面しました。

ashokkumarsand 2019年07月29日

いいえ、これは私の悪いエラーでした。これを呼び出すルーチンは、react-router-domを使用し、コンポーネントではなくレンダープロップを使用しました。

larrym 2019年07月29日

同じ問題がありますが、gatsbyに問題がある人はいますか？

'npm lsreact'の後に次の結果が得られます。

および「npmlsreact-dom」

最初は、誤ってグローバルにreactをインストールしたと思っていましたが、グローバルにアンインストールした後は何も変わりませんでした。次に、別のディレクトリ「gatsby new random-name」にまったく新しいプロジェクトを作成してみて、小さな機能を追加しました（https://www.youtube.com/watch?v=asrdFuAxPaU&feature=youtuに続いてコメントを追加してください） .be）gatsby-starter-defaultに変更して、エラーが自動的に再現されるかどうかをテストします。まあ、私の残念なことに、それはしました！

ありとあらゆるアドバイスは、欲求不満のプレブスに好評です。

xianrusso 2019年07月31日

👀2

私はまだストーリーブックでこの問題に直面しています。 npm lsからのこの出力は正しいですか？

zibra 2019年08月02日

私の場合、問題はwhy-did-you-updateモジュールが原因で発生しました。

zibra 2019年08月02日

👍1

ワークスペースとlernamonorepoのいずれかを使用して、パッケージを持ち上げます。それは問題を解決します。

ashokkumarsand 2019年08月02日

SSRでも同じ問題が発生しています。 Webpackの設定でexternals: [“react”]を設定してから、手動でreact/umd/react.development.jsをロードすることで機能するようです。ただし、これは苦痛であり、より簡単な方法を見つけたいと考えています。

ianks 2019年08月07日

うまくいけば、これが誰かに役立つことを願っています。誤ってwebpackruntime.jsを複数回ロードしていたため、Reactの複数のコピーが存在していました。 runtimeChunk（runtime.js）を1回だけロードするようにしてください。

ianks 2019年08月08日

私のようなJestテストで問題が発生した場合は、これで問題が解決するようです。
これをjest.config.jsに追加します

moduleNameMapper: {
    '^react$': '<rootDir>/node_modules/react/'
  }

francisprovost 2019年08月13日

👍10 ❤1

このエラーが少なくともそれが発生しているファイルを指しているといいでしょう。通常の関数で誤ってフックを呼び出したため、デバッグが困難でした。

nandorojo 2019年08月13日

問題の別の原因とその解決策を見つけました。

私の環境はelectronとwebpackですが、これは電子以外の人々にも役立つかもしれません。 React 16.9（およびReact DOM 16.9）にアップグレードした後、このエラーメッセージが表示される理由を解決するために苦労しました。

私の場合、アプリに2つのReactがあるように見えましたが、 npm ls reactを使用していなくても、node_modulesに2つの物理ライブラリが見つかりませんでした。 webpack-bundle-analyzerを使用して、バンドル内の内容を確認しました。

最終的に、プロジェクトに物理的に2つのReactがないことを発見しましたが、 ReactとReactDOMはHTMLファイルで2回参照/ロードされました。これは、たとえばconsole.log("React load")をReactライブラリのindex.jsに追加することで簡単に確認できます。

実際のソースはelectron-webpackに接続されていました。 reactとreact-domは外部としてマークされていなかったため、他のモジュールで使用する必要があるため、バンドルにロードされ、後でnode_modulesからロードされました。

解決策は、これらの行をwebpack.renderer.config.jsに追加するのと同じくらい簡単でした。

module.exports = {
    externals: [
        "react",
        "react-dom"
    ],
};

travenec 2019年08月16日

👍17 🎉10

さて、ここで誰かがparcel.jsを使用している場合、奇妙な理由で次のインポートを回避することができました： import React from 'React';そしてreactフックを使い始めると、不変の違反エラーが発生しました。 from 'react' from 'React'を使用して不適切にインポートしていたためです。おっと。

jamesguan 2019年08月18日

同じ問題がありますが、gatsbyに問題がある人はいますか？
'npm lsreact'の後に次の結果が得られます。
および「npmlsreact-dom」
最初は、誤ってグローバルにreactをインストールしたと思っていましたが、グローバルにアンインストールした後は何も変わりませんでした。次に、別のディレクトリ「gatsby new random-name」にまったく新しいプロジェクトを作成してみて、小さな機能を追加しました（https://www.youtube.com/watch?v=asrdFuAxPaU&feature=youtuに続いてコメントを追加してください） .be）gatsby-starter-defaultに変更して、エラーが自動的に再現されるかどうかをテストします。まあ、私の残念なことに、それはしました！
ありとあらゆるアドバイスは、欲求不満のプレブスに好評です。

はい、私はあなたと同じ問題に遭遇しました。私はここのアドバイスに従いました... 、

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

ページの下のインデックスファイルにReact2を追加しました。 falseを返します。

Dedupedは、npmが依存関係を非重複化する必要があることを意味します。ここを参照してください...

同じパッケージを2回インストールする必要はありません！参照されているだけです。
また、パッケージを「ツリーの上方」に移動します（ツリーを平坦化します）。これは完全に理にかなっています。そうしないと、1つのパッケージが他のパッケージのnode_modulesを調べなければならず（これはちょっと面倒です）、依存関係を単純化するのに役立ちます。
これを検証できます。依存関係グラフ内の重複排除を示すすべてのパッケージが、グラフ内で少なくとももう1回、通常は「より高いレベル」で見つかるためです。

明らかに、デダッピングは機能していません。

何を試しましたか？

Sandbagger 2019年08月18日

NextJSでビルドしようとすると、このエラーが発生します。一部のコンポーネントはmaterial-uiを使用しており、それらを削除すると問題は解決します。 styled-componentsは使用しません。運が悪かったのでnode_modulesなどを削除してみました。 next.config.jsファイルとpackage.jsonにreactのエイリアスと解決策を追加しようとしましたが、運が悪かったです。私はreact16.8.6、react-dom 16.8.6、そして次の9.0.4を使用しています。 npm lsは、それぞれが1つしかないことを示しています。 npmリンクを使用していません。

リポジトリ： https ：//github.com/dancancro/questions/tree/invalid-hook-call

Codesandboxはここにあります： https ：//codesandbox.io/s/github/dancancro/questions/tree/invalid-hook-call/？fontsize = 14

Stackoverflow： https ：//stackoverflow.com/questions/57647040/nextjs-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-fun

エラーはここにあります：https：//gist.github.com/dancancro/2dfafb053aaaedfade406fd4f67eb68a
... render-> renderToString-> ReactDOMServerRenderer.read-> ReactDOMServerRenderer.render-> Object.WithStyles [as render] .. ..

問題のあるフックは、$ withStyles関数の次のファイルの17428行目のuseStyles()呼び出しです。「varclasses = useStyles（props）」を検索します。問題はnextjsで生成されたコードにあります。私が書いたコードは、 withStylesや、「use *」で始まるフックや関数を使用していません。

https://raw.githubusercontent.com/dancancro/questions/invalid-hook-call/.next/static/development/pages/index.js

更新：これをnext.config.jsから削除すると、問題が解決しました：

    webpack: config => {
        config.externals = [
            '/'
        ]
        return config
    },

dancancro 2019年08月26日

リンクされたパッケージのnode_modulesフォルダーからreactとreact-domを削除することで、回避策を見つけました。

私はあなた方の多くと同じ船に乗っています。ローカルで作業しているライブラリパッケージがあり、アプリケーションパッケージの変更を確認する必要があるたびに、ライブラリを公開する手間をかけたくありません。リンクして、このエラーが発生し始めました。

回避策は次のとおりです。

パッケージA：ライブラリコードパッケージはnpm link 'dになっています
パッケージB：アプリケーションコードパッケージ。パッケージAのnode_modulesフォルダにシンボリックリンクがあります

パッケージAをビルドします。Mineはアセットをdist/に出力します。これには、 node_modulesも含まれます。
パッケージAの配布されnode_modulesフォルダーで、 reactとreact-domを削除します
???
利益！

両方のパッケージに同じバージョンのReactをインストールしたことに注意してください。実行中のプロセスを再起動する必要があります。

dmart914 2019年08月28日

👍5 🎉2 🚀1 😄1

互換性のないwhy-did-you-updateを削除するとうまくいきます。（https://github.com/maicki/why-did-you-update/issues/52）

bertho-zero 2019年08月28日

互換性のないwhy-did-you-update

@ bertho-ゼロ使用は新しいdevtoolsまたは私のフックuseWhyDidYouUpdateを使用できます

brunolemos 2019年08月28日

👍1

@brunolemos素晴らしいですが、各コンポーネントに配置する必要があるため、より制約があります。

bertho-zero 2019年08月28日

@ dmart914のソリューションは私にとって問題を解決しました。私もパッケージをリンクして、変更を公開せずにライブラリをテストできるようにしています...誰かがこれの回避策を見つけましたか？オープンソースライブラリを公開し、フックが魔法のように機能し始めるために特定のNPMパッケージを削除することを文書化する必要があるのは素晴らしい経験ではありません...

AndrewCraswell 2019年09月03日

👀1 👍1

リンクされたパッケージのreactモジュールを削除するソリューションは、そのパッケージにreactを必要とするテスト（例： @testing-library/reactまたは@testing-library/react-hooks ）がある場合は機能しないため、これを処理するためのより良い方法がまだ必要なようです。

mcmillion 2019年09月10日

私のアプリケーションは2つの部分で構成されています。メインのWebアプリケーションとWebアプリケーションに動的にロードされるモジュール。 Webアプリケーションとモジュールの両方がReact16.9.0を使用します。
モジュールは、React.lazy（）および動的import（）ステートメントを使用してWebアプリケーションにロードされます。
モジュールがロードされると、「無効なフック呼び出し」エラーがスローされます。

私の場合、メインアプリケーションとモジュールは別々に構築されているため、お互いを認識せず、独自の反応コピーを持ちます。スレッドで見つかった次の提案を試しましたが、問題は解決しませんでした。

モジュールのwebpack.configにエイリアスを追加します。これは、apieceofbartによって提案されたメインアプリケーションの反応を指します。
エイリアス：{
反応：path.resolve（ '../../ node_modules / react'）
}
モジュールのpackage.jsonのreact依存関係をメインアプリケーションにポイントしようとしました。
「依存関係」：{
"react-dom"： "ファイル：../ common / node_modules / react-dom "、
"react"： "ファイル：../ common / node_modules / react "
}

動的にロードされるモジュールに関しては、reactは複数のコピーの実行をサポートする必要があると思います。

rajithaw 2019年09月11日

上記の回答のいくつかに基づいて、これが私のために働いたものです：

config/webpack.config.jsに以下を追加しました

externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom'
  }
}

編集済みpackage.json

"devDependencies" : {
  ...
  "react": "^16.9.0",
  "react-dom": "^16.9.0",
}

"peerDependencies": {
  "react": "^16.9.0",
  "react-dom": "^16.9.0"
}

編集済みpublic/index.html

<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
...

その後、Jestがnode_modules（devDependenciesからインストールされた）からreactコピーをロードしている間に、CDNからロードされたReactを使用してライブラリでフックを実行することができました。

お役に立てば幸い

hodgef 2019年09月11日

👍4 👀1

コンポーネントを機能コンポーネントからクラスフルコンポーネントに変更しようとすると、この問題に直面しました。また、このエラーが発生するので、このエラーに関する私の解決策は、あなたの場合にも役立つことを願っています。

この場合、より高次のコンポーネントを使用してみてください

'react'からReactをインポートします。
'prop-types'からPropTypesをインポートします。
import {withStyles} from '@ Material-ui / styles';
'@ Material-ui / core / Button'からボタンをインポートします。

const styles = theme =>（{
根： {
背景： 'linear-gradient（45deg、＃FE6B8B 30％、＃FF8E53 90％）'、
ボーダー：0、
borderRadius：3、
boxShadow： '0 3px 5px 2px rgba（255、105、135、.3）'、
色： '白'、
高さ：48、
パディング： '0 30px'、
}、
}）;

クラスHigherOrderComponentはReact.Componentを拡張します{

与える（）{
const {クラス} = this.props;
戻る（
高階成分
）;
}
}

HigherOrderComponent.propTypes = {
クラス：PropTypes.object.isRequired、
};

デフォルトのwithStyles（styles）（HigherOrderComponent）;をエクスポートします。

abdulmoizshaikh 2019年09月20日

私はYarnを使用していますが、 package.jsonで解決を強制することでこれを修正しました：
  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

親または子パッケージに追加しましたか？

iwarner 2019年09月21日

上記の回答のいくつかに基づいて、これが私のために働いたものです：
config/webpack.config.jsに以下を追加しました
externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom'
  }
}
編集済みpackage.json
"devDependencies" : {
  ...
  "react": "^16.9.0",
  "react-dom": "^16.9.0",
}
"peerDependencies": {
  "react": "^16.9.0",
  "react-dom": "^16.9.0"
}
編集済みpublic/index.html
<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
...
その後、Jestがnode_modules（devDependenciesからインストールされた）からreactコピーをロードしている間に、CDNからロードされたReactを使用してライブラリでフックを実行することができました。
お役に立てば幸い

違法ではありませんが、このような解決策に従わなければならないのは気がかりです。私はこの数日間、このようなハッキングに頼ることなく、このバグを解決しようとしてきました。

フックを使用したコンポーネントを含む再利用可能なライブラリに取り組んでいます。公開する前に、実際のプロジェクトでテストする必要があります。これに対する唯一の解決策は、 yarn|npm linkを使用することです。ロールアップを使用してライブラリをバンドルし、バンドルにreactのバージョンが含まれていないことを確認できます。ライブラリを利用するアプリをバンドル（webpack）すると、バグ/問題が発生します。これは、裸のcreate-react-app ＃$アプリとnext.jsアプリでも発生します。どちらのフレームワークもバックグラウンドでwebpackを使用しています。

誰かが持続可能な解決策をもう見つけましたか？

kelvinlouis 2019年09月24日

👀2

npm|yarn linkを完全に捨てることで、問題を解決することができました。代わりに、プロジェクト構造にとらわれないこの素敵なライブラリを使用します。また、バンドラーとしてwebpackを使い続けることができるため、_react_と_react-dom_をexternalまたはaliasとして宣言する必要はありません。残念ながら、プロジェクトにいくつかの新しいディレクトリとロックファイルが導入されていますが、ローカルで、さらにはDockerコンテナ内でも機能します。

kelvinlouis 2019年09月25日

👀2

多分これはリストに少し役立つでしょう：

リンク

woles 2019年09月26日

👍1

@GabrielBBありがとう、それは私のために働いています

behnammodi 2019年09月26日

@ dmart914ありがとう！これまでのところ、私のために働く唯一の回避策:)

maciekgrzybek 2019年09月29日

現在、最小限の簡単な設定を使用すると、React Invalid HookCall警告が表示されます。

この機能コンポーネント：

ReactとReactDOMに同じバージョンを使用します。
フックのルールに従います。
Reactのコピーは1つだけです。

__依存関係__
[email protected]
[email protected]
[email protected]
[email protected]

そして、ビルドするためにwebpack test.js -o main.jsを実行します。

私はこのファイルが次のことを期待しています：

ボックスをレンダリングします。
- React.useStateを呼び出す前に、デバッガーを一時停止します。
- ブール値のtestを作成し、コールバックupdateTestを更新します。
- Reactエラーをスローします。
- レンダリング時に、 React.useEffectコールバックを実行します。
- Reactエラーをスローします。

私は何か間違ったことをしていますか、それとも何か他のことが起こっていますか？

// test.js
import React, { createElement as el } from 'react';
import ReactDOM from 'react-dom'; 

function Item() {
  debugger;
  const [test, updateTest] = React.useState(false); // Throws React error.

  React.useEffect(function checkTest() { // Throws React error.
    console.log("checking test", test);
  }, [test]);

  React.useEffect(function tester() { // Throws React error.
    if (!test) {
      setTimeout(() => {
        console.log("changing value for test");
        updateTest(true);
      }, 1000);
    }
  }, [test]);

  return el('div', {style: {width: '300px', height: '300px', 'background-color': 'green', border: '1px solid red'}});
}

function render() {
  let root = document.querySelector('#primary');
  if (!root) {
    root = document.createElement('div');
    document.body.appendChild(root);
  }

  ReactDOM.render(Item(), root);
}

render();

ckmahoney 2019年10月02日

実際に要素を作成するのを忘れました。 ReactDOM.render呼び出しに到達する前に、同期的にItem() $を呼び出しています。 el(Item)を渡す必要があります。

Jessidhia 2019年10月02日

👍1

本当です！情報ありがとうございます。

ckmahoney 2019年10月02日

他のコメント投稿者の一部と同様の状況にあります。私はwebpackを使用していくつかのreactコンポーネント（一部はフックを使用）をトランスパイルし、トランスパイルされたコードをlibフォルダーに配置しています。 webpack構成のexternalsフィールドに反応するように追加したので、コンポーネントコードにバンドルされません。これらのコンポーネントを2つの別々のプロジェクトで使用したいと思います。これらのコンポーネントはコンポーネント間で共通であるため、1つの場所で開発し、更新を両方のアプリに反映させたいと考えています。

package.jsonでcommon-components: file:../../common-components/libを使用して依存関係を追加すると、コンポーネントは完全に読み込まれますが、webpackを実行してもコンポーネントはすぐには更新されません。代わりに、 yarn upgrade common-componentsを実行してから、開発サーバーを再起動する必要があります。

common-components: link:../../common-components/libを使用して依存関係を追加した場合、webpackを再実行すると、メインアプリのnode_modules内のファイルが更新されます（現在はシンボリックリンクを使用しているため）が、反応します。 common-components/node_modulesフォルダーのreactバージョンを使用していると思います。

リンクされたコンポーネントがメインアプリのnode_modulesフォルダーにあるreactを使用していることを確認しながら、シンボリックリンク（つまりcommon-components: link:../../common-components/lib ）を使用する方法はありますか？これらのコンポーネントを両方のアプリで使用することを計画しているため、どちらか一方の反応パッケージを共通コンポーネントライブラリにリンクできません。また、両方のメインアプリの反応を共通コンポーネントパッケージで使用されているものにリンクすることは避けたいと思います。 webpackのresolveフィールドについてのコメントをいくつか見ましたが、これは有望に聞こえますが、機能させることができません。どんな助けでも大歓迎です！

編集：私たちのユースケースに興味がある人のために、ビルドステップを変更して、ファイルを必要な2つのプロジェクトにコピーするだけで、トランスパイルを完全に回避することになりました。

ZM123 2019年10月02日

簡単な回避策の1つは、パッケージを公開するのではなく、それをgithubにプッシュし、 yarn add <git-url>を使用してプロジェクトにインポートすることです。

eskawl 2019年10月16日

簡単な回避策の1つは、パッケージを公開するのではなく、それをgithubにプッシュし、 yarn add <git-url>を使用してプロジェクトにインポートすることです。

私たちの多くがnpmリンクとnpmパッケージの相対パスを使用する理由は、コードが機能することを知る前に、変更をNPMまたはGitHubに公開することなく、コードを開発およびテストするためです。

JeremyGrieshop 2019年10月16日

https://github.com/facebook/react/issues/13972#issuecomment -447599035に関連するこの問題に遭遇しました。これは、Webpackされたノードサーバーが原因である可能性もあると思います。私たちのユースケースは、テストを実行する前にサーバーを構築するためにプログラムでwebpack()を実行したJest内で実行される統合テストでした。この問題は、ESMとCJSがどのように同時に存在できるかに関係していると思います。

たとえば、次の例を見てください。

// node express server, doing server-rendering
import React from 'react';
import { ApolloProvider } from '@apollo/react-common';
import { renderToStringWithData } from '@apollo/react-ssr';

res.send(await renderToStringWithData(<ApolloProvider><App /></ApolloProvider>)

デバッガーセッション中に私が見ているのは、このファイルのコンパイル済みバージョンでReactの2つの異なるインスタンスを取得できることです。

_react: {Children, ...}
_react2: {default: {Children, ...}

どこ
_reactは、このファイルのESM import React from 'react'からのものです
_react2はCJSからのものvar _react = _interopRequireDefault(require("react"));はnode_modules/@apollo/react-ssr/lib/react-ssr.cjs.js内から

これにより、Reactへの参照が2つの場所（サーバーレンダリングファイルと@apollo/react-ssrのバンドル内）で等しくなくなり、エラーがスローされたと思います。

これはおそらくテスト内からのwebpack()のプログラムによる使用が原因であることがわかり、これらのテストをエンドツーエンドのテストにリファクタリングしました。問題がテストコードでのみ発生している場合は、テストが非常に複雑になる可能性があるという教訓があります。

bwhitty 2019年10月17日

❤1

私はなんとか糸でそれを解決することができました：

myApp/node_modules/reactおよびyarn linkにCD

次に、ライブラリでyarn link reactを実行します

これで、ライブラリはメインアプリとまったく同じreactバージョンを使用しています

libでreactをピア依存関係として設定しようとしましたが、libがビルドされませんでした

danydhondt 2019年10月21日

👍5 😄3 👎3 🎉2

$＃$ yarn $＃$を取り出したり切り替えたりせずに、 create-react-appを使用してこれを修正するにはどうすればよいですか？

renanvalentin 2019年10月21日

npmリンクを使用してまったく同じ手法を使用できます。排出する必要はありません。

danydhondt 2019年10月22日

異なるバージョンの複数のプロジェクトで作業する場合、 reactをリンクすることは最善のアイデアではありません。

woles 2019年10月23日

👍2

@wolesあなたは完全に正しいですが、私の場合、それは私の「フック」の問題を解決します。反応開発者がより良い解決策を考え出すことを願っています

danydhondt 2019年10月23日

👍1

やあ、
私は、reactルーター内で誤ってコンポーネントを誤って使用したことに気づき、数時間後にこのバグを修正しました。

私のアプリは機能していましたが、1つのコンポーネントでuseStateをまったく追加できませんでした。その理由は、react routers renderメソッド内のコンポーネントを、次のような高階関数なしで使用したためです。
<Route exact path="/path" render={ ComponentCausingTheErrorMesage }/>
に切り替える
<Route exact path="/path" component={ ComponentNowWorkingAgain }/>
私のためにそれを修正しました

aricma 2019年10月23日

アプリとアクティブに作業しているモジュールの間でnpm linkを使用していたので、アプリのreactとreact-domをモジュールにリンクしてから、リンクすることで修正する必要がありました。アプリへのモジュール：

アプリ内：

cd node_modules/react && npm link
react-domについても同じ

モジュール内：

npm link react && npm link react-dom
npm link

アプリ内：

npm link [module-name]

これが誰かに役立つことを願っています

kristojorg 2019年11月07日

👍6 ❤2 🎉2

クライアント側で動作するフックがありましたが、SSRでこのエラーが発生していました。私の同僚は、サーバー側のwebpack構成で次のようにこれを解決しました。

const nodeExternals = require('webpack-node-externals');

const serverConfig = () => {
  // lots of config, then:
  externals: [
    nodeExternals({
      modulesFromFile: true,
    }),
  ],
}

sandinmyjoints 2019年11月07日

私はなんとか糸でそれを解決することができました：
myApp/node_modules/reactおよびyarn linkにCD
次に、ライブラリでyarn link reactを実行します
これで、ライブラリはメインアプリとまったく同じreactバージョンを使用しています
libでreactをピア依存関係として設定しようとしましたが、libがビルドされませんでした

これはちょうど美しく動作します

viniciusrangelfp 2019年11月08日

この問題が発生したのは、electron-webpack、react、material-uiを同時に使用している場合です。 Material-uiから何かを使おうとすると、このエラーが発生します（たとえば、

ZVER3D 2019年11月12日

こんにちはZVER3D、私の以前のコメントを読んでみてください。それが役に立てば幸い！

travenec 2019年11月12日

👍1

アプリとアクティブに作業しているモジュールの間でnpm linkを使用していたので、アプリのreactとreact-domをモジュールにリンクしてから、リンクすることで修正する必要がありました。アプリへのモジュール：
アプリ内：
1. `cd node_modules/react && npm link`

2. same for `react-dom`
モジュール内：
1. `npm link react && npm link react-dom`

2. `npm link`
アプリ内：
1. `npm link [module-name]`
これが誰かに役立つことを願っています

甘い赤ちゃんモーゼ、これは私をとても助けました。異なるバージョンのreactであるという問題も考慮していませんでした!! NPMに公開するためにローカルでコンポーネントを構築していますが、npmリンクを使用してローカルでテストするための別のプロジェクトがあります。明らかに（現在）彼らは両方とも異なるバージョンのreactを使用しています。 D'oh！

bpk68 2019年11月12日

こんにちはZVER3D、私の以前のコメントを読んでみてください。それが役に立てば幸い！

私を正しい方向に向けてくれてありがとう。もう1つの解決策は、使用しているuiライブラリを「whiteListedModules」に追加することでした。唯一の問題は、コンパイルするために反応を必要とするすべてのモジュールに対してそれを行わなければならないということです。
だから、package.jsonで私はこれを書いた：

"electronWebpack": {
    "whiteListedModules": [
      "@material-ui/core",
      "@material-ui/icons"
    ]
  }

ZVER3D 2019年11月13日

👍1

私はmonorepoアプローチを使用してReactアプリケーションを開発しています。メインアプリ（ brush ）とreactライブラリコンポーネント（ react-gbajs ）があります。

そのため、 react-gbajsコンポーネントをレンダリングしようとすると、Reactの複数のインスタンスについてこのエラーが発生します。同じコードをコピーしてbrushに貼り付けても、問題はありません。
私はそれを修正するために多くのアプローチに従いましたが、それらのどれもそれを解決しませんでした（Webpack、Yarnのワークスペース、npmリンクのビルドを変更...）

デバッグして、Reactに2つのコピーがあるかどうかを確認しようとしました（Reactのドキュメントのconsole.log(window.React1 === window.React2)を使用）が、 trueと評価されます！
（私が現在使用している非常に悪い回避策は、フックを小道具として渡すことです： <GBAEmulator useEffect={useEffect} /> ...しかし、私は本当にそれをマージしたくありません）

誰かがそれを修正するためのアイデアを持っていますか？

私のプロジェクトはオープンソースであり、このブランチにこの新しい反応ライブラリコンポーネントを追加しています： https ：//github.com/macabeus/klo-gba.js/blob/ac18f4d42b122c333622f502947135c2de217ce2/react-gbajs/src/index.js#L251 -L274

macabeus 2019年11月17日

👍1

こんにちは、みんな、

カスタムライブラリ（myDepPackage）を依存関係として使用するアプリ（myApp）があります。どちらもビルドツールとしてwebpackを使用しており、もちろん同じエラーが発生していました。上記の解決策はどれも私にはうまくいきませんでした。それが行ったことは、カスタムライブラリ（myDepPackage）の最終バンドルにreactを含めないようにwebpackを強制することでした。（myDepPackageの）webpack構成に追加する必要がある唯一の構成行は次のとおりです。

externals: {
  react: "react",
},

「externals」オプションの詳細については、 https ：//webpack.js.org/configuration/externals/#externalsをご覧ください。

tsevdos 2019年11月18日

👍21 ❤14 🚀7 👀6 🎉2

@tsevdosVeeeeryありがとうございます!!! ❤️
前のコメントで言った私の問題は解決しました。

macabeus 2019年11月18日

👍1

私たちにとっての問題は、WordPressのショートコードからページに読み込まれ、ランダムなIDでdivにマウントされる埋め込み可能なReactアプリがあることでした。一部のページには複数の埋め込みアプリがあり、フックを使い始めるまでは問題なく機能していました。

複数のアプリが埋め込まれているページでのみ文句を言うので、解決策はWPショートコードを更新してスクリプトをビルドで1回だけロードすることでした。

シンプルで明白に聞こえますが、理解するのは難しいです！特に、フックを追加するまではそれがうまく機能していたからです。

興味深いことに、一部のページには、フックを使用する他の（さまざまな）アプリが埋め込まれており、Reactを使用して独自のスクリプト/ビルドもロードします...しかし、それでも問題なく動作します！問題は、まったく同じビルドが複数回ロードされていて、フックを使用している場合でした。

florantara 2019年11月19日

👍2

私にとってうまくいったのは、この問題のスレッドからの2つの提案の組み合わせでした。

メインアプリケーションのwebpack構成（ @apieceofbartの提案）

  resolve: {
    alias: {
      react: resolve('./node_modules/react')
    }
  }

Dependencyのwebpack構成（ @tsevdosの提案）

  externals:
    react: 'react'
  }

kevireilly 2019年11月22日

👍3 🚀1

html-webpack-pluginでこの問題が発生し、 index.htmlをtemplateからHtmlWebpackPluginの設定として使用していました。

// webpack.config.js
plugins: [
   new HtmlWebpackPlugin({
      template: "./public/index.html"
   })
],

<!-- public/index.html -->
<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
</body>

</html>

プラグインが<div id="root"></div> $の直後に<script type="text/javascript" src="main.js"></script>を注入していることに気づきました。

したがって、開発ツールを開いてHTMLを生成すると、次のようになります。

<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
    <script type="text/javascript" src="main.js"></script> <!-- injected from html-webpack-plugin -->
</body>

</html>

私にとって、それはInvalid Hook Call Warningを引き起こしていました。

以下のように<script src="main.js"></script>を削除することで、警告を削除することができました。

<!-- public/index.html -->
<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
</body>

</html>

私はそれが解決策を探している誰かに役立つことを願っています！

leejh3224 2019年11月23日

❤1 🎉1 👍1

Reactに依存するライブラリもこれらの問題を引き起こす可能性があることに注意してください。私の場合、 @emotion/coreと@emotion/styledの異なるバージョンを使用していました。

https://github.com/emotion-js/emotion/issues/1470

awdyson 2019年11月23日

やあ、

イジェクトせずに考えられる解決策は、webpackエイリアス構成ソリューションをcustomize- craおよびreact-app-rewiredライブラリーと混合することです。このように、次のコマンドを使用してconfig-overrides.jsファイルを作成することにより、問題を解決するために必要なWebpack構成のみをオーバーライドできます。

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    react: path.resolve(path.join(__dirname, './node_modules/react')),
  }),
);

jecastro2 2019年11月25日

👍3

Gatsbyサイトでこの問題が発生しました。npminstallを実行し、Gatsbyの最新バージョンに更新すると、すべて修正されました。

OliverHuntsman 2019年11月30日

yarn or npm testを実行しているjestテストで問題が発生し（私がそうであったように）、 react-test-rendererを使用している場合は、 react-test-rendererが同じバージョンのreactと一致することを確認してください使用しています。

例：

// Package.json
{
  ...
    "react" : "16.8.3",
  ...
}

yarn add [email protected]実行します

evanlesmez 2019年12月02日

私はlibを持っていて、libプロジェクトとmainプロジェクトの両方でreactとreact-domのすべてのバージョンをチェックしました。それらはまったく同じですが、機能しませんでした。
しかし、 @ apieceofbartソリューションは私のために働きました。

arminyahya 2019年12月07日

❤1 🎉1

@apieceofbart 、あなたは私の日を救った<3

netojose 2019年12月08日

❤1

私にとってうまくいったのは、この問題のスレッドからの2つの提案の組み合わせでした。
メインアプリケーションのwebpack構成（ @apieceofbartの提案）
  resolve: {
    alias: {
      react: resolve('./node_modules/react')
    }
  }
Dependencyのwebpack構成（ @tsevdosの提案）
  externals:
    react: 'react'
  }

こっちも一緒。それを機能させるには、これらの修正の両方を行う必要があります。私の説明では、2番目の構成は依存関係に「react」という名前の外部reactを使用するように指示し、最初の構成は「react」という名前をメインリポジトリの「node_modules / react」フォルダーにポイントします。したがって、reactブリッジを機能させるには両方が必要です。

それでも、一部の人にとってはそのうちの1つで十分なようですが、私にはよくわかりません。

ghost 2019年12月12日

👍4

私にとってうまくいったのは、この問題のスレッドからの2つの提案の組み合わせでした。
メインアプリケーションのwebpack構成（ @apieceofbartの提案）
  resolve: {
    alias: {
      react: resolve('./node_modules/react')
    }
  }
Dependencyのwebpack構成（ @tsevdosの提案）
  externals:
    react: 'react'
  }
こっちも一緒。それを機能させるには、これらの修正の両方を行う必要があります。私の説明では、2番目の構成は依存関係に「react」という名前の外部reactを使用するように指示し、最初の構成は「react」という名前をメインリポジトリの「node_modules / react」フォルダーにポイントします。したがって、reactブリッジを機能させるには両方が必要です。
それでも、一部の人にとってはそのうちの1つで十分なようですが、私にはよくわかりません。

2番目の項目は重要です！
無視すると、ビルドプロセスで、reactは内部依存関係であるため、一緒にエクスポートされます

netojose 2019年12月12日

👍3

@apieceofbartが大好きです!!!! 机を壁から蹴り出そうとしていた

coderdix 2019年12月14日

❤1

したがって、マイクロサービスの回避策はまだありません。別のreactとのバンドルを動的に必要とするreactを使用したルートアプリケーションがあります。独自の依存関係を持つ独立したチームがたくさんあるため、reactの外部バージョンを使用することはできません。同じ外部バージョンを使用するようにプッシュすると、ほとんどのプロジェクトが明らかにクラッシュし、各プロジェクトがこのバージョンに依存するため、このバージョンをアップグレードできなくなります。

何か案は？

ugg0t 2019年12月15日

CRAからのイジェクトを必要としない、npmリンクと一緒にreactフックを使用するためのソリューションはありますか？

tschellenbach 2019年12月17日

👍2

@tschellenbach
cracoを使用して、イジェクトせずにCRA構成を上書きできます。
https://github.com/gsoft-inc/craco

arminyahya 2019年12月17日

@tsevdosのおかげで、問題を解決し、Reactパッケージの作成方法に関するチュートリアルを作成しました： https ：//youtu.be/esyS87NfBOw

guandjoy 2019年12月17日

👍1

この問題が発生しましたが、代わりにパーセルバンドラーを使用しているため、webpackソリューションが適用されませんでした。メインアプリのpackage.jsonで次のようなエイリアスを指定することで修正できました

    "alias": {
        "react": "./node_modules/react",
        "react-dom": "./node_modules/react-dom"
    },

ewan-m 2019年12月19日

👍7 🎉3 🚀1 ❤1 😄1

同じプロジェクトの異なるパッケージjsonを使用して、ElectronアプリでReactコンポーネント（フックで記述）を使用しようとすると問題が発生します。ファイル構造は次のようになります。

- javascript
  - src
     - ComponentIWantToUse.tsx
      - package.json
- electron
   - src
     - IwantToUseItHere.tsx
      - package.json

package.jsonは両方ともpackage.jsonにreactとreact-domを含んでいますが、それらは同じバージョンであり、 npm ls reactを実行したときに2つのreactインストールが表示されません。何か案は？

編集：@ ewan-mのソリューションは機能しました！

davidsth 2019年12月19日

🎉1

だから私は奇妙な事件に遭遇したと思います。残念ながら、サードパーティのライブラリには、機能ベースのコンポーネントとクラスベースのコンポーネントが混在しています。コードベースのコンポーネントは機能しています。ライブラリのクラスベースのコンポーネントは、コンポーネントを子としてレンダリングするレイアウトとして機能します。これが「エラー：無効なフック呼び出し」を引き起こしていると私は信じています。フックを使用するには、これをどのように回避する必要がありますか？私のものをクラスコンポーネントに変換する必要がありますか？

iantbutler01 2019年12月23日

@GrandathePandaミキシングクラスと機能コンポーネントは重要ではありません。クラスがフックを呼び出す汎関数を呼び出す場合、そこに問題はありません。できないのは、クラスから直接フックを呼び出すことだけです。

JeremyGrieshop 2019年12月23日

さて、 @ JeremyGrieshopはまだ調査が必要です。サードパーティのコンポーネントを使用せずにレンダリングすると、正常にレンダリングされるため、そのライブラリとコードの間に競合が発生します。私が推測しなければならなかった場合、彼らはおそらく彼らのパッケージで異なる反応バージョンを使用しています。

iantbutler01 2019年12月23日

さて、 @ JeremyGrieshopはまだ調査が必要です。サードパーティのコンポーネントを使用せずにレンダリングすると、正常にレンダリングされるため、そのライブラリとコードの間に競合が発生します。私が推測しなければならなかった場合、彼らはおそらく彼らのパッケージで異なる反応バージョンを使用しています。

そうです、アプリからnpm ls react react-domをチェックして、複数のバージョンがあるかどうかを確認してください。サードパーティのライブラリが特定のバージョンに依存している可能性があります。

JeremyGrieshop 2019年12月23日

@JeremyGrieshopしたがって、私のアプリケーションはreactとdomに16.12.0を使用しており、サードパーティ（elastic search-ui）はreactとdomに16.8.0を使用しているようです。私が正しければ、問題は、16.8.0サードパーティライブラリが16.12.0で作成されたコンポーネントをレンダリングしているため、問題が発生するということです。それらはまた、上記のコメントをすべて読んだ後、これをさらに複雑にする可能性のあるlernamonorepoです。この問題は、materialuiで作成されたuseStylesフックに起因します。これらは、下位互換性のためにwithStyles hocを提供します。それまでの間、私はそのルートに進むと思います。上記のwebpackやパッケージjsonへのすべての変更は、実際には、非常に多くの異なる実装の問題に直面してフックが成熟する方法を理解している間、古典的なホックを使用するよりも壊れやすいバンドエイドのように見えます。

iantbutler01 2019年12月23日

@GrandathePanda IMHO 、あなたのオプションは、（1）サードパーティにreact依存関係を16.12に更新するか、それをpeerDependencyとして持つことが依存関係よりも適切かどうかを決定させることです。（2）アプリで16.8を使用して、同じlibバージョンを共有します。（3）次の反応のコピーを削除します。

rimraf node_modules/search-ui/node_modules/react && rimraf node_modules/search-ui/node_modules/react-dom

上記のコマンドは、package.jsonの「scripts」部分の下にある「prebuild」と「prestart」に配置できます（これは私が現在行っていることです）。（3）の欠点は、それらが16.8から16.12の間に廃止されたものを使用しています。

JeremyGrieshop 2019年12月23日

こんにちは、みんな、
カスタムライブラリ（myDepPackage）を依存関係として使用するアプリ（myApp）があります。どちらもビルドツールとしてwebpackを使用しており、もちろん同じエラーが発生していました。上記の解決策はどれも私にはうまくいきませんでした。それが行ったことは、カスタムライブラリ（myDepPackage）の最終バンドルにreactを含めないようにwebpackを強制することでした。（myDepPackageの）webpack構成に追加する必要がある唯一の構成行は次のとおりです。
externals: {
  react: "react",
},
「externals」オプションの詳細については、 https ：//webpack.js.org/configuration/externals/#externalsをご覧ください。

@tsevdos私はあなたを愛しています。数日間の激しい煩わしさに終止符を打つだけです。ありがとう。

Totone 2019年12月26日

👍4 🎉1

皆さんこんにちは、

コンポーネントでフックを使用しようとしています。このコンポーネントはgatsby-browser.jsからエクスポートされます。

現在の行動は何ですか？

このエラーが発生します：

未処理の拒否（エラー）：無効なフック呼び出し。フックは、関数コンポーネントの本体の内部でのみ呼び出すことができます。これは、次のいずれかの理由で発生する可能性があります。
Reactとレンダラー（React DOMなど）のバージョンが一致していない可能性があります
フックのルールに違反している可能性があります
同じアプリにReactのコピーが複数ある可能性があります
この問題をデバッグして修正する方法のヒントについては、 https：//fb.me/react-invalid-hook-callを参照してください。

これはサンプルコードです：

import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';

import configureStore from './src/utils/configure-store';
import { useApiResources } from './src/hooks/use-api-resources';

const RootWrapper = ({ element }) => {
  const resources = useApiResources();
  const store = configureStore();
  return <Provider store={store}>{element}</Provider>;
};

RootWrapper.propTypes = {
  element: PropTypes.node.isRequired,
};

export default RootWrapper;

期待される動作は何ですか？

フックはエラーなしで実行されるか、有用なエラーメッセージが提供される必要があります。

reactおよびreact-domの依存関係のバージョンは16.12.0です。

davifantasia 2020年01月10日

@ leejh3224どうもありがとう！何時間も検索した後、私はこの答えを見つけました、それは私の問題を解決しました。
HtmlWebpackPlugin設定をから変更しました
inject: trueからinject: 'head'になり、縮小された反応エラーはなくなりました。

ccarnivore 2020年01月14日

これを機能させようとした経験から、 stackoverflowの質問を作成しました。これをうまく機能させることができた人にとって、それを見て、いくつかのアドバイスを提供することは可能でしょうか？

Meberem 2020年01月21日

jqueryアプリケーションをReactに移植しています。 asJqueryPluginと呼ばれるjQuery内のReactコンポーネントを公開するユーティリティがあります。ファイルは次のとおりです。

import React from 'react'
import ReactDOM from 'react-dom'

/**
 * A way to render React components with props easily with jQuery
 *
 * ## Register the React Component
 *
 * In your React Component file, register the component with jQuery using `asJqueryPlugin`
 * ```
 * const Greeting = ({ person }) => <div>Hello {person}</div>
 * asJqueryPlugin('Greeting', Greeting, { person: "Bob" })
 * ```
 *
 * ## Rendering, Selecting and Updating Props with jQuery
 *
 * Select an element and render using the `react` function
 * ```
 * $('#greeting').react('Greeting', { person: 'Frank' })
 * ```
 */

window.reactRegistry = window.reactRegistry || {}

// This is how React components register themselves as available within jQuery
export default function asJqueryPlugin(componentName, Component) {
  window.reactRegistry[componentName] = { Component }
}

if (typeof window.$ !== 'undefined') {
  ;(function($) {
    // Add the plugin function jQuery
    $.fn.react = function renderReactIntoElements(componentName, props) {
      this.each(function render() {
        const entry = window.reactRegistry[componentName || $(this).data('react')]
        if (!entry) throw Error(`${componentName} component is not registered.`)
        ReactDOM.render(<entry.Component {...props} />, this)
      })
      return this
    }
  })(window.$)
}

このアプリにはWebpackに多くのエントリポイントがあり、現在約3〜4個のコンポーネントがこの手法を使用しています。コンポーネントが異なるエントリポイントバンドルにバンドルされている場合、問題が発生するのはそのときだと思います。

したがって、Webpackに2つのエントリポイントがある場合：

entry: {
      foo: './assets/js/foo',
      bar: './assets/js/bar'
}

次に、これらの各ファイルで、公開されたコンポーネントを設定します（それぞれフックを使用）。

// foo.js
import React from 'react'
import asJqueryPlugin from '../utils/asJqueryPlugin'
const Foo = () => {
  const ref = useRef()
  return <div ref={ref}>Foo</div>
}
asJqueryPlugin('Foo', Foo)

// bar.js
... same stuff but with Bar component

同じページに両方のエントリを含め、jqueryプラグインを介して両方のコンポーネントをレンダリングしようとすると...

<script src="/bundles/foo.js" />
<script src="/bundles/bar.js" />
<script>
    $('#foo-container').react('Foo')
    $('#bar-container').react('Bar')
</script>

...このフックエラーが発生します。

これが会話に役立つかどうかはわかりませんが、少なくとも（疑わしいことに）正気の開発者が複数の反応インスタンスがある状況に陥る可能性のあるユースケースを示しています。

timkindberg 2020年01月29日

それは私を助けました-https： //github.com/facebook/react/issues/13991#issuecomment-554928373
ただし、依存関係からreactとreact-domを削除し、それらをピアの依存関係に移動して、ノードモジュールをアンインストールして再インストールする必要もありました。

maciekgrzybek 2020年01月30日

👍1

やあ、
私は会話とウェブ上の多くの投稿を読みました、そして私はまだ反応の複数のインスタンスのエラーで立ち往生しています。
バグを再現するためにこのリポジトリをプッシュします： https ：//github.com/jeromelegrand/dooliz-lib
誰かが私を助けてくれることを願っています。
ありがとう。

jeromelegrand 2020年01月31日

私はこの問題に直面しており、上記の解決策ではどこにも行きません。
要するに、私は1つのreactバージョンしか実行していないと確信しており、react-bootstrapを使用するとエラーが発生します。これは、他の誰も問題を抱えていないため、フックを間違って使用していない可能性があります。

このエラーは、node.jsバックエンドで発生します。

__reactバージョンについて確認したこと__

ワークスペースを使用したYarnセットアップがありますが、 yarn list reactまたはyarn list react-domには1つのインスタンスしか表示されません。

何がインポートされたかを確認するためにrequirecacheを印刷しました：

for(var key in require.cache) {
    if(key.indexOf("react") !== -1 && key.indexOf("index") !== -1) {
        console.log(key);
    }
}

私はreact-bootstrapから何かをレンダリングする直前にそれを実行します。これにより、無効なフックエラーが発生し、ログに記録されます。

C:\web\resourceful\daCore\node_modules\react-dom\index.js
C:\web\resourceful\daCore\node_modules\react\index.js
C:\web\resourceful\daCore\node_modules\react-router-dom\index.js
C:\web\resourceful\daCore\node_modules\react-router-dom\node_modules\react-router\index.js
C:\web\resourceful\daCore\node_modules\react-is\index.js
C:\web\resourceful\daCore\node_modules\mini-create-react-context\dist\cjs\index.js
C:\web\resourceful\daCore\node_modules\react-router\index.js
C:\web\resourceful\daCore\node_modules\@fortawesome\react-fontawesome\index.js
C:\web\resourceful\daCore\node_modules\@tinymce\tinymce-react\lib\cjs\main\ts\index.js

これは、ロードされたReactバージョンが1つしかないことを確認しているようです。

最後に、これをnode_modules / react-dom /index.jsに追加しました

console.log("React DOM daCore");
global['React1'] = require('react');

そしてこれをnode_modules / react-router-dom / cjs /Form.jsに

require('react-dom');
global['React2'] = require('react');
console.log('#TEST '+(global['React1'] === global['React2']? 'SAME' : 'NOT SAME'));

SAMEを印刷します

これが他に何ができるか考えていますか？
これはreact-bootstrapリポジトリにも投稿します。

flyon 2020年02月11日

したがって、Reactのインスタンスが2つあることは、ここでは問題ではないと確信しています。問題は、2つのreact_roots_がある場合だと思います。ページのさまざまな部分にReactDOM.render()を複数回呼び出していますか？もしそうなら、私はこれが問題を引き起こす可能性があると思います。フックは特定の「ルート」に「属し」、複数あり、2つのバンドルがいくつかの共通コードを共有している場合は壊れると思います。ここで推測しています...

timkindberg 2020年02月11日

👍1

...問題は2つのreact_roots_がある場合だと思います。ページのさまざまな部分にReactDOM.render()を複数回呼び出していますか？

ありがとう@timkindbergこれは私が最終的にそれを解決するのを助けました。 ReactDOMServer.renderToStringで最終レンダリングを行う前に、 react-tree-walkerを使用して初期レンダリングを実行し、必要なデータをフェッチしていることに気付きました。

このパッケージの使用をすばやく削除するとエラーが削除され、 react-ssr-prepassで同じことが機能するようになりました。これは、react-tree-walkerのreadmeページで実際に推奨されています。

つまり、実際には2回のReactDOM.render呼び出しでした。今のところ、 react-ssr-prepassを使用したこのセットアップは私にとってはうまくいき、Suspenseがreact-dom / serverに到達したら、それに切り替えることができます

flyon 2020年02月12日

Gutenbergプロジェクトでreact-compare-image https://github.com/junkboy0315/react-compare-imageを使用していますが、保存関数からReactCompareImageコンポーネントを削除するとすべてが機能しますが、この奇妙な問題が発生します。編集機能は完全に機能しますが、保存は機能しません。

https://reactjs.org/warnings/invalid-hook-call-warning.htmlを確認しましたが、これらの問題は発生していないと思います。

完全な保存機能ファイルは次のとおりです。

`` `import Inspector from" ./inspector ";
import {Fragment} from "react";
「react-compare-image」からReactCompareImageをインポートします。

/ **

WordPressの依存関係
* /
const {__} = wp.i18n;

const save =（{className、attributes}）=> {

const {
    paddingTop,
    paddingRight,
    paddingBottom,
    paddingLeft,

    marginTop,
    marginRight,
    marginBottom,
    marginLeft,

    border,
    borderColor,
    borderType,
    background,

    backgroundImage,
    gradient,

    dividerColor,
    buttonColor,

    direction,

    beforeImage,
    beforeLabel,
    afterImage,
    afterLabel,

} = attributes;

const style = {
    "padding": `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
    "margin": `${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft}px`,
    "border": `${border}px ${borderType} ${borderColor}`,
    "background": background
};

return(
    <Fragment>
        <ReactCompareImage
            leftImage={beforeImage.url}
            leftImageLabel={beforeLabel}
            rightImage={afterImage.url}
            rightImageLabel={afterLabel}
            vertical={'vertical' === direction}
            sliderLineColor={dividerColor}
        />
    </Fragment>
);

};

デフォルトの保存をエクスポートします。
`` `
Screenshot 2020-02-19 at 4 11 52 PM

azizultex 2020年02月19日

私もこの問題に直面しています。私はSOに要約を投稿しています： https ：//stackoverflow.com/questions/60331304/next-js-with-typescript-invalid-hook-call-hooks-can-only-be-called-inside-of-t

再現可能な最小限の例もあります： https ：//github.com/coler-j/shopify_playground

cjancsar 2020年02月21日

私のメインアプリは、Reactも使用する共有ライブラリをインポートしていたcreate-reactアプリ（排出されません）です。私はこれを解決することができました：

webpackの代わりにロールアップを使用してライブラリをパッケージ化する
何らかの理由で私はまだ解決していませんが、外部を使用してもライブラリバンドルからReactは削除されませんでした。

rollup-config.js

export default [
  {
    input: 'src/index.js',
    output: {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
    },
    plugins: [external(), babel(), resolve(), commonjs(), svgr()],
  },
  {
    input: 'src/index.js',
    output: {
      file: pkg.module,
      format: 'es',
      sourcemap: true,
    },
    plugins: [
      alias({
        entries: [{ find: '<strong i="12">@components</strong>', replacement: 'src/components' }],
      }),
      external(),
      babel(),
      svgr(),
    ],
  },
]

cracoをインストールし、それを使用してメインアプリのwebpackを変更する
craco.config.js

const path = require('path')

module.exports = {
  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },
}

私をクラコに向けてくれた@arminyahyaに感謝します。

blacksandsolutions 2020年02月21日

👍2

cdnからreactをロードしているときにフックを使用しようとしています。この例（これはhtmlページ全体です）では、 Example()が呼び出されたときに$ Hooks can only be called inside of the body of a function componentエラーが発生します。 ReactDOMも含めてすべてを削除したので、Reactの複数のコピーを持つことができるとは想像しがたいです。これは不可能ですか？

<!DOCTYPE html>
<html>

<head>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

</body>
  <script type="text/babel">
    function Example() {
      let [count, setCount] = React.useState(0);
      return ( <h1>Hello</h1> );
    };

  Example();
  </script>
</body>

</html>

samkamin 2020年02月26日

@samkaminそれはあなたがゼロ反応の根を持っているからです。アプリケーションをレンダリングする必要があります。ただし、これは、フックがリアクションルートに依存している（そしてそれに結合されている）ことを示す良い確認です。

<html>
<head>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
</body>
  <div id="root"></div>
  <script type="text/babel">
    function Example() {
      let [count, setCount] = React.useState(0);
      return ( <h1>Hello</h1> );
    };

    ReactDOM.render(<Example />, document.getElementById('root'))
  </script>
</body>
</html>

timkindberg 2020年02月26日

ありがとう！実際には、reactルートの欠如ではありませんでした-エラーを可能な限り単純化する過程でそれを削除しました-しかし、同じように愚かなことです： <Example />の代わりに、$＃ Example()と書いただけです

samkamin 2020年02月26日

私には何もうまくいかないようです。他のプロジェクトで共有および使用するためのコンポーネントを作成していますが、別のプロジェクトからローカルでテストすると機能しません。私はreact16.13.0でフックを使用しています。

webpack.config.js

module.exports = {
  entry: ENTRY,
  output: {
    library: LIBRARY_NAME,
    path: path.resolve(__dirname, OUTPUT_DIR),
    filename: OUTPUT_FILENAME,
    libraryTarget: 'commonjs2',
  },
  module: {
    rules: [
      {
        test: /\.(js|tsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      },
    ],
  },
  resolve: {
    alias: {
      '<strong i="7">@src</strong>': path.resolve(__dirname, './src'),
      '<strong i="8">@components</strong>': path.resolve(__dirname, './src/components'),
      '<strong i="9">@core</strong>': path.resolve(__dirname, './src/core'),
      react: path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
    },
    extensions: ['.js', '.json', '.tsx', '.ts'],
  },
  externals: {
    react: 'react',
  },
  target: 'node',
  plugins: [
    new HtmlWebPackPlugin({
      template: './tests/index.html',
      filename: 'index.html',
    }),
  ]}

助言がありますか？私は古い議論のすべての提案をテストしました。
ありがとう！：ニヤリ：

Jeconias 2020年02月27日

私はSettings.jsを次のように宣言しました：

import React, {useState} from 'react';

import {
    View,
    Text,
    Switch
} from 'react-native';

export function Settings(props) {
    const [rememberPin, setRememberPin] = useState(false);
    let {changeView, header} = props;


    const toggleRememberPin = (value) => {
        setRememberPin(value);
    };

    return (
            <View>
                    <Text>Remember PIN:</Text>
                    <Switch
                        onValueChange={toggleRememberPin}
                        value={rememberPin}
                        ios_backgroundColor="#aeaeae"
                        />
            </View>
    );
}

export default {Settings};

次のようにApp.jsにインポートして使用します。

import React, {Component} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Dimensions,
    ScrollView,
    Switch
} from 'react-native';

import Colors from './src/assets/Colors';
import {Settings} from './src/components/Settings';
...

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {viewsStack: this.viewsStack};
    }

    viewsStack = {
        SplashScreen: false,
        BindingInstructions: false,
        PinPad: false,
        Qr: false,
        Dashboard: false,
        Authorizations: false,
        Settings: true,
        Browsers: false,
        TransmitSDK: false,
        OTP: false,
    };

    changeView = (newView) => {
        let {viewsStack} = this.state;
        for (let key of Object.keys(viewsStack)) {
            viewsStack[key] = false;
        }
        viewsStack[newView] = true;
        this.setState(viewsStack);
    };

    render() {
        let {viewsStack} = this.state;
        return (
            <SafeAreaView style={styles.safeAreaView}>
                {viewsStack.SplashScreen && (splashScreen())}
                {viewsStack.BindingInstructions && (bindingInstructions({changeView: this.changeView}))}
                {viewsStack.PinPad && (pinPad({message: 'Inserisci un nuovo PIN', changeView: this.changeView}))}
                {viewsStack.Qr && (qr({header: 'QR Binding', message: 'Scansiona il QR dalla tua dashboard\noppure\ninserisci il codice manualmente.', changeView: this.changeView}))}
                {viewsStack.Dashboard && (dashboard({header: 'Profilo Utente', changeView: this.changeView}))}
                {viewsStack.Authorizations && (authorizations({header: 'Autorizzazioni', authorizations: [1, 2, 3, 4, 5, 6], changeView: this.changeView}))}
                {viewsStack.Settings && (Settings({header: 'Impostazioni', changeView: this.changeView}))}
            </SafeAreaView>
        );
    }
};
...

しかし、私は得ます：

Screenshot 2020-02-27 at 22 27 01

私は使っている：

"react": "16.9.0",
"react-native": "0.61.5"

どうしたの？

strawberry-code 2020年02月27日

Settingsコンポーネントを関数コンポーネントとしてではなく、関数として呼び出しています。

<Settings header='Impostazioni' changeView={this.changeView} />

フックはプレーン関数内では許可されていません。関数コンポーネント内でのみ許可されており、それを呼び出す方法は、Reactをだまして、コンポーネントが実際には通常の関数であると考えさせます。

emeraldsanto 2020年02月28日

❤1

たぶん、これは誰かの頭痛の種を免れるでしょう。react-router-domを使用している場合、このようにコンポーネントをレンダリングで渡すと（適切な方法ではありません）、 Invalid Hook Call Warningが得られます。
<Route path="/:cuid/:title" render={PostArticle} />

私がどこで間違っていたかを知るために30分かかりました

RodPaDev 2020年03月11日

👍1

これは誰かを助けるかもしれません-react-router-domを使用した後にこのバグが発生した場合は、ルートをどのように定義したかを確認してください。たとえば、 <Route path={'/upgrade/:plan'} exact children={Upgrade} />を実行している間は<Route path={'/upgrade/:plan'} exact children={<Upgrade />} />である必要があります

amoghs 2020年03月13日

インクまたはパステルを使用してCLIを構築している場合、これは特に厄介です（https://github.com/vadimdemedes/passel/issues/2を参照）。すべてのユーザーにReactのインストールを依頼することも、特定のバージョン/範囲のReactを使用するように強制することもできないため、peerDepにすることはできません。

adam-lynch 2020年03月14日

私のチームはYarnを使用しており、アプリではなくテストでのみInvalid hook callエラーが発生していました。問題は、 react-test-rendererがreactおよびreact-domよりも低いバージョンに解決されていたため、 package.json resolutionsを追加したことです。

"devDependencies": {
    ...
    "react": "16.12.0",
    "react-dom": "16.12.0",
    ...
},
"resolutions": {
    "react-test-renderer": "16.12.0"
}

cbryan-risklens 2020年03月17日

❤3

サブディレクトリでGatsbyを使用している人にとって、これは可能な解決策です。

gatsby-node.js ：

const path = require('path')
const fromRoot = name => path.resolve(__dirname + '/../node_modules/' + name)

exports.onCreateWebpackConfig = ({ actions }) => actions.setWebpackConfig({
  resolve: {
    alias: {
      'react': fromRoot('react'),
      'react-dom': fromRoot('react-dom'),
    },
  },
})

luukdv 2020年03月22日

npm linkコマンドを実行するときに同じ問題が発生します、問題があります

次に、reactが提供する公式ソリューションを使用してこの問題を解決しました

この問題は、npmリンクまたは同等のものを使用する場合にも発生する可能性があります。その場合、バンドラーは2つのReactを「見る」可能性があります。1つはアプリケーションフォルダーにあり、もう1つはライブラリフォルダーにあります。 myappとmylibが兄弟フォルダーであると仮定すると、考えられる修正の1つは、mylibからnpm link ../myapp/node_modules/reactを実行することです。これにより、ライブラリでアプリケーションのReactコピーを使用できるようになります。

AがBを紹介する必要がある場合（AとBは兄弟です）

ステップ1（B）
- npm link ./../A/node_modules/react
- npm link
ステップ2（A）
npm link B

わたしにはできる

IFmiss 2020年03月25日

❤5 🎉5 👍5 🚀3

これらの答えがあっても、なぜエラーが発生するのかわかりません。依存関係ライブラリをメインアプリにリンクし、エラーが発生した後、react-docsに従い、依存関係ライブラリのバージョンのreactをアプリのreactにリンクしました（ npm link <>/webapp/node_modules/reactを実行しています（react-でこれを実行しました）。 React1とReact2が同じかどうかをテストするためにログに記録したとき、 trueがログに記録されたため、重複バージョンのReactを使用せず、同じバージョンのReactを使用し、関数コンポーネントを使用していました。。したがって、テストログにReactの重複バージョンがないことが示されていても、フックエラーが発生していました。

しかし、上記のようにこのソリューションを試すと、その特定のバグが修正されました。

alias: {
        react: path.resolve('./node_modules/react')
 }

だから私は途方に暮れています。

orpheus 2020年03月25日

だから私は途方に暮れています。

@orpheus同じページに複数のreactルートをレンダリングしますか？別名、同じページに複数のReactDOM.render呼び出しがありますか？

timkindberg 2020年03月25日

同じページに複数のreactルートをレンダリングしますか？別名、同じページに複数のReactDOM.render呼び出しがありますか？

@timkindberg

私はしません。 app ReactDOM.renderがあり、リンクしているlibモジュールはコンポーネントライブラリであり、 ReactDOM.renderを使用していません。まったく。

編集：私は次のようなことをしています：

import React from 'react'
import ReactDOM from 'react-dom'
import Root from './App/Root'

ReactDOM.render(
  <Root />,
  document.getElementById('root')
)

ここで、 <Root />は次のようにレンダリングされます

const Root = () => {
  return <Provider store={store}>
        <PermissionsProvider>
              <Suspense fallback={null}>
                <Router history={history}>
                  <Routes store={store} />
                </Router>
              </Suspense>
        </PermissionsProvider>
  </Provider>
}

PermissionsProviderは、リンクされlibモジュールからインポートするReactコンポーネントであり、アプリを失敗させるフックを使用します。状態とコンテキストを作成し、その子をレンダリングします。

orpheus 2020年03月25日

こんにちは、私は反応フック付きの電子を使用しています。私が自分のフックを書くなら、それはうまくいきます。しかし、 react-use 、 swrなど、node_moduleの他のパッケージのフックを使用するとエラーが発生します。

パッケージをローカルファイルにコピーする必要があります。

誰かがこの問題に遭遇しますか？

ここにあるプロジェクトの例：
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error

コアコード：
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

Zaynex 2020年04月01日

また、reactとreact-domの重複コピーを削除した後も、この問題が発生しています。再現するための超簡単なテストプロジェクトを作成しました。

$ tree -I node_modules
.
|-- test-app
|   |-- dist
|   |   |-- index.html
|   |   `-- main.js
|   |-- package-lock.json
|   |-- package.json
|   |-- src
|   |   |-- index.html
|   |   `-- index.js
|   `-- webpack.config.js
`-- test-lib
    |-- dist
    |   `-- main.js
    |-- package-lock.json
    |-- package.json
    |-- src
    |   `-- index.js
    `-- webpack.config.js

現在、webpackエイリアスメソッドを使用していますが、 npm linkメソッドも試しましたが、どちらも機能しません。

onlyanegg 2020年04月02日

私もこの問題に遭遇しました。 ExpressJS + Pugを使用してビューをレンダリングしています。次に、コンポーネントのサーバー側とクライアント側をレンダリングできるレンダラー（ReactRailsと同様）を作成しました。

散らかっていたので、これを別のパッケージに抽出しようとしましたが、この問題に遭遇しました。

それを修正するには、 resolveキーの下に追加する必要がありました。

alias: {
  react: path.resolve("./node_modules/react"),
},

これで、webpackを正常に実行しているときに期待どおりに機能しますが、Dockerボリュームでも問題が解決しません。 Dockerを使用するには新しすぎて対処できないため、後で再検討します。

編集：私はあまりにも早く話しました。 Reactレンダリングでは正常に機能しますが、ハイドレートでは機能しません。

Gibbo3771 2020年04月06日

👀1

こんにちは、私は反応フック付きの電子を使用しています。私が自分のフックを書くなら、それはうまくいきます。しかし、 react-use 、 swrなど、node_moduleの他のパッケージのフックを使用するとエラーが発生します。
パッケージをローカルファイルにコピーする必要があります。
誰かがこの問題に遭遇しますか？
ここにあるプロジェクトの例：
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error
コアコード：
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

こんにちは。私も同じ問題を抱えていました。すべてのモジュールをwebpackの外部としてマークするelectron-webpackを使用しています。いくつかのハードコードされた例外を除いて-reactやreact-domなど。
私にとって、それは私のコードからロードされたreactがそのようなモジュールからロードされたreactとは異なることを意味しました。
これらのモジュールをホワイトリストに追加すると役立つようです（まだ他に何も壊れていないかどうかはわかりません:)

huhle 2020年04月08日

🎉2 👍2

@huhleありがとう、それは動作します！たぶん、electron-webpackに飛び込む必要があります。

Zaynex 2020年04月09日

私はこれを自分でうまく動かすことができました。 LernaとYarnのワークスペースに関しては、これは優れたソリューションの1つだと思います。おそらく、一部の要素を別のソリューションに使用できる可能性があります。

それはすべて、私がインポートしているpackage.jsonプロジェクトの構成に要約されているようです。これらのセクションを含める必要がありました。

 "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "workspaces": {
    "nohoist": [
      "react", "react-dom"
    ]
  }

これを行った後、私はプロジェクトを再構築する必要があり、私は稼働していました。それらをピアの依存関係としてリストすると、消費するプロジェクトでそれらをインストールする必要があるようです。また、依存関係にリストされていないため、インポートしようとしているパッケージで使用できないはずですが、何らかの理由で、持ち上げないように指示しない限り、使用可能なままで、新しいReactインスタンスが入ります。エラーが発生します。

幸運を！

counterbeing 2020年04月15日

👍3

単純なフェードイン効果を得るためにreact-springを使用しようとしています。何も機能していないようです。
`import React、{useState、useEffect} from'react ';
import {animated、useTransition} from'react-spring ';

const TextContent =（props）=> {

const [items] = useState([
    { id: '0', title: 'Text1' },
    { id: '1', title: 'Text2' },
    { id: '2', title: 'Text1' }
])

const [index, setIndex] = useState(0);

const transitions = useTransition(items[index], index => index.id,
    {
        from: { opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
        config: { tension: 220, friction: 120 }
    }
)

useEffect(() => {
    const interval = setInterval(() => {
        setIndex((state) => (state + 1) % items.length);
    }, 4000)
    return () => clearInterval(interval);
}, []);

return (
    <div>
        {
            transitions.map(({ item, props, key }) => (
                <animated.div
                    key={key}
                    style={{ ...props, position: 'absolute' }}
                >
                    <p>{item.title}</p>
                </animated.div>
            ))
        }
    </div>
)

}

デフォルトのTextContentをエクスポートします; `
Capture

Reactのインスタンスが複数あるかどうかを確認してみました。 Npm ls-ingによると、reactとreact-domのバージョンは1つだけで、どちらも16.13.1です。

Prat2103 2020年04月20日

こんにちは、私は反応フック付きの電子を使用しています。私が自分のフックを書くなら、それはうまくいきます。しかし、 react-use 、 swrなど、node_moduleの他のパッケージのフックを使用するとエラーが発生します。
パッケージをローカルファイルにコピーする必要があります。
誰かがこの問題に遭遇しますか？
ここにあるプロジェクトの例：
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error
コアコード：
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx
こんにちは。私も同じ問題を抱えていました。すべてのモジュールをwebpackの外部としてマークするelectron-webpackを使用しています。いくつかのハードコードされた例外を除いて-reactやreact-domなど。
私にとって、それは私のコードからロードされたreactがそのようなモジュールからロードされたreactとは異なることを意味しました。
これらのモジュールをホワイトリストに追加すると役立つようです（まだ他に何も壊れていないかどうかはわかりません:)

鮮やかさ！ありがとう

JuanIrache 2020年04月23日

単純なフェードイン効果を得るためにreact-springを使用しようとしています。何も機能していないようです。
`import React、{useState、useEffect} from'react ';
import {animated、useTransition} from'react-spring ';
const TextContent =（props）=> {
const [items] = useState([
    { id: '0', title: 'Text1' },
    { id: '1', title: 'Text2' },
    { id: '2', title: 'Text1' }
])

const [index, setIndex] = useState(0);

const transitions = useTransition(items[index], index => index.id,
    {
        from: { opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
        config: { tension: 220, friction: 120 }
    }
)

useEffect(() => {
    const interval = setInterval(() => {
        setIndex((state) => (state + 1) % items.length);
    }, 4000)
    return () => clearInterval(interval);
}, []);

return (
    <div>
        {
            transitions.map(({ item, props, key }) => (
                <animated.div
                    key={key}
                    style={{ ...props, position: 'absolute' }}
                >
                    <p>{item.title}</p>
                </animated.div>
            ))
        }
    </div>
)
}
デフォルトのTextContentをエクスポートします; `
Reactのインスタンスが複数あるかどうかを確認してみました。 Npm ls-ingによると、reactとreact-domのバージョンは1つだけで、どちらも16.13.1です。

こっちも一緒。私にとってreactとreact-domは16.13.1であり、react-springを使おうとすると同じエラーが発生します。

OctonianCat 2020年04月23日

👍5

styled-componentsの別のスレッドから、 package.jsonのfile: URIを介して独自のローカルパッケージを使用している場合は、$ rm -rf node_modules/local-package-name/node_modulesを使用する必要があることを学びました。どうやら、ローカルパッケージは冗長な依存関係についてnode_modulesをチェックせずにコピーされるため、アプリを実行する前にrm -rf node_modules/local-package-name/node_modules $。

jorisw 2020年04月23日

👍1

styled-componentsの別のスレッドから、 package.jsonのfile: URIを介して独自のローカルパッケージを使用している場合は、$ rm -rf node_modules/local-package-name/node_modulesを使用する必要があることを学びました。どうやら、ローカルパッケージは冗長な依存関係についてnode_modulesをチェックせずにコピーされるため、アプリを実行する前にrm -rf node_modules/local-package-name/node_modules $。

はい、これは、このスレッドだけで約12のユースケースで同じ問題です。 rm -rfを実行するために「prestart」および「prebuild」ターゲットを追加しました（rimrafを使用）。このスレッドの別のユーザーは、prestartでnpm-link-sharedを使用して、モジュールが同じreactインスタンスを共有するようにしました。私たちmonorepoユーザーの多くがこれに遭遇しています。

JeremyGrieshop 2020年04月23日

こんにちは、私は反応フック付きの電子を使用しています。私が自分のフックを書くなら、それはうまくいきます。しかし、 react-use 、 swrなど、node_moduleの他のパッケージのフックを使用するとエラーが発生します。
パッケージをローカルファイルにコピーする必要があります。
誰かがこの問題に遭遇しますか？
ここにあるプロジェクトの例：
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error
コアコード：
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx
こんにちは。私も同じ問題を抱えていました。すべてのモジュールをwebpackの外部としてマークするelectron-webpackを使用しています。いくつかのハードコードされた例外を除いて-reactやreact-domなど。
私にとって、それは私のコードからロードされたreactがそのようなモジュールからロードされたreactとは異なることを意味しました。
これらのモジュールをホワイトリストに追加すると役立つようです（まだ他に何も壊れていないかどうかはわかりません:)

これは、reduxまたはreduxツールキットとelectron-webpackで問題が発生している人にも当てはまります。私は次の動作構成を持っています：

// package.json
...
"electronWebpack": {
  "whiteListedModules": ["react-redux"]
}

https://github.com/electron-userland/electron-webpack/issues/349を参照してください

victormier 2020年04月25日

❤2 🎉2 👍2

私の問題は私が書いたことでした

import React from 'React'

それ以外の：

import React from 'react'

時々それはばかげたことです。

alflennik 2020年05月03日

😄2

Webpack構成に以下を追加することで解決しました。

 externals: {
    react: {
      root: "React",
      commonjs2: "react",
      commonjs: "react",
      amd: "react",
    },
    "react-dom": {
      root: "ReactDOM",
      commonjs2: "react-dom",
      commonjs: "react-dom",
      amd: "react-dom",
    },
  },

私は当初、それがnpmリンクの問題だと思い、提案されたすべてのことを行い、さらにはyarnに切り替えました。最終的に、npmに公開するときに何か他のことが起こっていることがわかり、別のプロジェクトにインポートするときに同じエラーが発生しました。

essential-randomness 2020年05月06日

ここの誰かが最近lernamonorepoでこれを解決しましたか？私は運が悪かったいくつかの提案を試しました。

tettoffensive 2020年05月16日

👍5

以下の//でコメントアウトされたコードを追加した後、エラーが発生しました。 CssBaselineを追加し、フラグメント情報を反応させると、エラーが発生します。コメントアウトすると、すべて正常に動作します。元のコードは、単純に基本的なnpxcreate-react-appコードです。これはまったく新しいものであり、上記で試したいくつかの修正は効果がありませんでした。

'react'からReactをインポートします。
'./logo.svg'からロゴをインポートします。
'@ Material-ui / core / CssBaseline'からCssBaselineをインポートします。

デフォルト関数のエクスポートApp（）{
戻る（

        //<React.Fragment>

        //<CssBaseline />

        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                    </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                    </a>
            </header>
        </div>

    //</React.Fragment>

）;
}

tsg-l 2020年05月21日

ローカルテストの場合：
ライブラリnode_modulesで、reactおよびreact-domフォルダーを削除します
メインパッケージで、「yarninstall」または「npminstall」を再度実行します。

これにより、reactの2番目のコピーがメインバンドルにロードされるのを防ぎます。明らかに恒久的な修正ではありませんが、ローカルテストで機能します。

warrenday 2020年06月03日

lernaを使用している場合、あるパッケージでテストを実行すると、コードが別のパッケージのコンポーネントを参照するときに、この問題が発生する可能性があります。

この場合に発生した問題は、仕様にインポートされ、マテリアルUIのフックを使用して実装されたマテリアルUIのwithStylesを使用していたコンポーネントツリーのコンポーネントにもインポートされたことが原因でした。

reactはReactCurrentDispatcher.current変数の状態を内部的に管理しているようです。これは、reactの一方のインスタンスで設定されますが、reactのもう一方のインスタンスで使用されます。空の場合はInvalid hook call ...をスローします。

ビルド時にCreateReactAppのwebpack構成をオーバーライドするためにすでにCracoを使用していました。

  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },

ただし、このWebpackオーバーライドはビルド時にのみ使用されます。テストの実行時には、コードはビルドされませんが、ソースからインスタンス化されます。そのため、ソリューションは、 craco.config.jsでCracoAliasを使用して指定することでした。テスト中の反応パス：

  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'options',
        baseUrl: './',
        aliases: {
          // We need to alias react to the one installed in the desktop/node_modules
          // in order to solve the error "hooks can only be called inside the body of a function component"
          // which is encountered during desktop jest unit tests,
          // described at https://github.com/facebook/react/issues/13991
          // This is caused by two different instances of react being loaded:
          // * the first at packages/desktop/node_modules (for HostSignUpDownloadComponent.spec.js)
          // * the second at packages/components/node_modules (for packages/components/Modal)
          react: './node_modules/react',
        },
      },
    },
  ],

jasondarwin 2020年06月04日

👍7 ❤2

@apieceofbartの例に従って、イジェクトせずに@craco/cracoをソリューションとして使用しました。私にとっての手順は、ローカルモジュールをテストするためにnpm linkを使用して次のとおりでした。

npm i @craco/craco --saveを実行して、デモアプリにcracoをインストールします
package.jsonがデモアプリ内にあるrootに構成ファイルcraco.config.jsを作成します。
デモアプリで$ react-scriptsをcracoに置き換えて、 start 、 build 、 testスクリプトを変更します。

// craco.config.js
const path = require('path');

module.exports = {
    webpack: {
        alias: {
            react: path.resolve(__dirname, './node_modules/react')
        }
    }
}

// package.json
{
....
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
...
}

編集： @jasondarwinが同じ考えを持っていることに気づいていませんでした。

tlehtimaki 2020年06月04日

👍1

この問題を解決するために1日を費やしました。それが誰かを助ける場合に備えて、ここに私の解決策を投稿してください。

モノリポジトリを使用しており、2つのパッケージがreactから異なるインスタンスをインポートしていましたが、ルートノードモジュールの同じ場所に解決されていました。アプリの1つが独自のWebpackを使用してバンドルを作成していたため、これら2つのインスタンスがあったことがわかりました。これはルートノードモジュールに正しく持ち上げられていましたが、そのパッケージによってインポートされると、独自のインスタンスを取得していました。解決策は、webpackがバンドルのreactの新しいインスタンスを作成しないように、webpack構成の外部にreactおよびreactDOMを含めることでした。

externals: { react: 'react', reactDOM: 'react-dom', },

これが誰かに役立つことを願っています！

Jstuff36 2020年06月04日

👍1

私にとってはreact-hot-loaderバージョン4.0.0を使用していましたが、react-hot-loader4.8に更新するとうまくいくようです

eliahuhorwitz 2020年06月08日

モーダルウィンドウを操作するために作成しているカスタムフックでテストを実行した場合にのみ、 Invalid hook callメッセージが表示されます。

動作を示すために、次の例を作成しました。
（https://github.com/BradCandell/invalid-hook-example）

reactとreact-domの1つのバージョンのみ

私はひどく明白な何かを逃していますか？過去にルールを破った場合、 npm startは失敗します。しかし、これは私のテストでは失敗しているだけです。

私は助けに感謝します！
-ブラッド

BradCandell 2020年06月09日

Webpack構成に以下を追加することで解決しました。
 externals: {
    react: {
      root: "React",
      commonjs2: "react",
      commonjs: "react",
      amd: "react",
    },
    "react-dom": {
      root: "ReactDOM",
      commonjs2: "react-dom",
      commonjs: "react-dom",
      amd: "react-dom",
    },
  },
私は当初、それがnpmリンクの問題だと思い、提案されたすべてのことを行い、さらにはyarnに切り替えました。最終的に、npmに公開するときに何か他のことが起こっていることがわかり、別のプロジェクトにインポートするときに同じエラーが発生しました。

これで修正されました。私はreact-toastifyをインポートしていて、無効なフック呼び出しを受け取っていました。コンソールエラーの各項目を確認しました。

ReactとReactDOMのバージョンが一致していない可能性があります。

フックのルールに違反している可能性があります。

同じアプリにReactのコピーが複数ある場合があります。

結局3号になりました。私はこれに従いました：
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react

RaoufOsman 2020年06月10日

👍1

私が_インポート_していたライブラリとreactの別のコピーをバンドルしていることに気付くまで、上記の解決策はどれもうまくいきませんでした。
ライブラリのソースコードをトランスパイルしてバンドルしたので、ドキュメントにリストされているReactのさまざまなバージョンのチェックで、 false $ではなくtrueが返されていました。
reactを外部依存関係としてマークし、ライブラリのバンドルから除外することでうまくいきました。

Gamaranto 2020年06月10日

👍1

私の場合はモノレポではありませんでしたが、やや似たような状況でした。新しいUIフレームワークを開発しており、npm linkやlernaを使用する代わりに、webpackエイリアスを使用して兄弟フォルダー上のファイルを要求しています。正常に動作しますが、この問題が発生します。幸い、 @ apieceofbartのソリューションで問題が修正されました。

danielo515 2020年06月18日

130：21行目：React Hook "useStyles"は、React関数コンポーネントでもカスタムReactHook関数react-hooks / rules-of-hooksでもない関数 "pharmacyDashboard"で呼び出されます。
133：45行目：React Hook "React.useState"は、React関数コンポーネントでもカスタムReactHook関数react-hooks / rules-of-hooksでもない関数 "pharmacyDashboard"で呼び出されます。

これはエラーです.....誰かがこれを解決するのを手伝ってくれませんか

vyshnaviryali 2020年06月19日

@vyshnaviryali関数を呼び出す方がよいusePharmacyDashboard

danielo515 2020年06月19日

./src/components/HomeFiles/AppFooter.js
1：1行目：ルール「material-ui / no-hardcoded-labels」の定義が見つかりませんでしたmaterial-ui / no-hardcoded-labels '
誰かがこれを解決するのを手伝ってくれませんか

vyshnaviryali 2020年06月19日

コンポーネントに機能を追加する必要があるが、テスト前にnpm publishを追加したくないために、 npm linkでこの問題を実行しているすべての人にとって、 yalcの使用を提案した人がいないことに驚いています。

promethyttrium 2020年07月06日

❤2 👍2 👀1

コンポーネントに機能を追加する必要があるが、テスト前にnpm publishを追加したくないために、 npm linkでこの問題を実行しているすべての人にとって、 yalcの使用を提案した人がいないことに驚いています。

私は昨年実際にやりました： https ：//github.com/facebook/react/issues/13991#issuecomment -535150839

ほぼ1年前から問題なく使用しています。

kelvinlouis 2020年07月06日

👍1

ここでもう1つはlernaを使用しています。これを修正するために、 reactとreact-domの依存関係をルートpackage.jsonに移動しました。

TranquilMarmot 2020年07月12日

同じ問題が発生し、次のように追加して解決しました。
 alias: {
        react: path.resolve('./node_modules/react')
      }
メインアプリのwebpack構成のresolveプロパティに。
Reactを2つ使用するのは明らかに私の間違いでしたが、エラーメッセージがもっと良ければ素晴らしいと思います。これはおそらく似ていると思います：＃2402

上記の方法を使用しているが、jestの実行時にエラーが発生する場合は、これらをjestの構成のmoduleNameMapperに追加します（必要がない場合はreact-domを省略します）。

moduleNameMapper: {

...

  "^react$": "<rootDir>/node_modules/react",
  "^react-dom$": "<rootDir>/node_modules/react-dom",

...

}

nopol10 2020年07月13日

❤8 👍6 🎉3

私は途方に暮れています。私はこれを取得していますが、私のアプリはフックを使用しておらず、reactまたはreact-domの重複はありません。 next.jsを使用しています。それはそれと関係がありますか？

dancancro 2020年07月21日

👍1

npm ls react
npm ls react-dom

maapteh 2020年07月21日

@maaptehは私にとってそれでしたか？これらのコマンドを実行しましたが、重複は見つかりませんでした。両方のライブラリはバージョン16.13.1です

dancancro 2020年07月21日

@dancancro私もNext.jsを使用していますが、これを修正できません。

npm ls reactとnpm ls react-domはどちらも1つのエントリのみを返します。しかし、それが正しいかどうかはわかりません。開発用のローカルパッケージにリンクすると、このエラーが発生します。 npm lsは、依存関係のreactをメインリポジトリにリンクしない場合でも、1つのエントリのみを返します。しかし、リンクが適切に反応しても、エラーが発生します。

justincy 2020年07月21日

@justincyプロジェクトにパッケージリンクがありません。 Next.jsに関連しているに違いない。メインコンポーネントをtypeof document !== 'undefined'の中に入れると、問題は解決し、Next.jsの目的が事実上損なわれます。

dancancro 2020年07月21日

依存関係のnode_modulesからreactとreact-domを削除することで、問題を解決することができました。理想的ではありませんが、少なくとも私は仕事を続けることができます。

@dancancroあなたの問題がNext.jsによって引き起こされているのではないかと疑っています。もしそうなら、他の多くの人が問題を抱えているでしょう。リンクされたパッケージのために私はそれに遭遇しているだけです。リンクされたパッケージがないとエラーは表示されません。

justincy 2020年07月21日

メインコンポーネントの7つのコンポーネントのうち5つを削除すると、問題は解決します。これらのコンポーネントについて特別なことは何もわかりません。これらのコンポーネントをtypeof document !== 'undefined'でラップすることもできます。

dancancro 2020年07月21日

こんにちはチーム、私はReactバージョンを16.2.0から16.13.1にアップグレードしようとしていますが、react-domでも同じことをしました。
今、私は「/ test」で呼び出されているラッパーコンポーネントを持っています

class TestWrapper extends React.Component { render() { return ( <React.Fragment> <TestComponent /> </React.Fragment> ) } }

テストラッパーで、フック付きの機能コンポーネントをインポートしました
function TestComponent(props) { useEffect(() => { console.log("TEST COMPONENT"); }); return ( <div> Hello world! </div> ) }

ただし、ページがレンダリングされると、UseEffectフックが機能せず、エラーが発生します。つまり、無効なフック呼び出しの警告です。
PS。：

私はreactのコピーが1つしかないことを確認し、react-domがインストールされています
Reactとreact-domのバージョンは16.13.1です

singhneha14 2020年07月22日

それは私が持っているものです
私はただ...
@ @
ReactError
nextJSを使用しているので、Reactをインポートする必要はありません。そして、私はそれを試しました-助けないでください。

Brotipok 2020年07月29日

他のすべてのページとfuncは完全に機能しています

Brotipok 2020年07月29日

@Brotipok next.jsのどのバージョンですか？（同様の問題が発生しますが、9.4.Xから9.5に移行した場合のみ）

bitfrost 2020年07月30日

やあ！

私は同じエラーを起こしました。npmlsを実行するときにreactとreactdomのパッケージは1つだけです。

Reactバージョン：16.13.1
React-domバージョン：16.13.1

私はtypescriptを使用しており、create-react-app my-app --templatetypescriptを使用してプロジェクトを初期化しました。

機能コンポーネントは、フックを使用していない場合にのみ機能します。

Package.json

{{
「名前」：「blablamovie」、
「バージョン」：「0.1.0」、
「プライベート」：true、
「依存関係」：{
"@ tests-library / jest-dom"： "^ 4.2.4"、
"@ tests-library / react"： "^ 9.5.0"、
"@ tests-library / user-event"： "^ 7.2.1"、
"@ types / jest"： "^ 24.9.1"、
"@ types / node"： "^ 12.12.53"、
"@ types / react"： "^ 16.9.43"、
"@ types / react-dom"： "^ 16.9.8"、
"@ types / react-router-dom"： "^ 5.1.5"、
"react-icons"： "^ 3.10.0"、
"react-scripts"： "3.4.1"、
"typescript"： "^ 3.7.5"、
"webpack-bundle-analyzer"： "^ 3.8.0"
}、
"スクリプト"：{
"start"： "react-scripts start"、
"ビルド"： "react-scriptsビルド"、
"test"： "react-scripts test"、
"eject"： "react-scriptsイジェクト"、
"analyze"： "source-map-explorer'build / static / js/*。js '"
}、
"eslintConfig"：{
"extends"： "react-app"
}、
"ブラウザリスト"：{
"製造"： [
"> 0.2％"、
"死んでいません"、
「op_miniallではない」
]、
"発達"： [
「最後の1クロームバージョン」、
「Firefoxの最新バージョン1」、
「最後の1サファリバージョン」
]
}
}
私は重要なプロジェクトであり、それは私を少し夢中にさせています。
誰かが助けることができればそれは素晴らしいことです。
ありがとう。

florianzemma 2020年07月31日

@Brotipok next.jsのどのバージョンですか？（同様の問題が発生しますが、9.4.Xから9.5に移行した場合のみ）

ここに依存関係があります
「依存関係」：{
「次へ」：「9.4.4」、
"次の画像"： "^ 1.4.0"、
"node-sass"： "^ 4.14.1"、
"react"： "16.13.1"、
"react-document-meta"： "^ 3.0.0-beta.2"、
"react-dom"： "16.13.1"、
"react-horizontal-timeline"： "^ 1.5.3"、
"react-meta-tags"： "^ 0.7.4"、
"react-onclickoutside"： "^ 6.9.0"
}、
"devDependencies"：{
"@ types / node"： "^ 14.0.23"、
"@ types / react"： "^ 16.9.43"、
"typescript"： "^ 3.9.7"
}

Brotipok 2020年08月01日

material-ui/core/Dialogコンポーネントをインポートするときに同じ問題が発生します。特に、 reactとreact-domの両方にreact 16.8.0 package.jsonを設定しました。 react-domインポート。

npm ls reactとnpm ls react-domを1回のインポートで実行しました。また、エラーページで説明されているテストも試しました。

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

これはfalseを返しますが、依存関係によってインポートされている「異なる」反応バージョンをどのように追跡しますか？これは、マテリアルUIダイアログコンポーネントをインポートしたときにのみ発生するようです。タップするとすぐに発生します。レンダリングのためにそれをトリガーするボタン。 ListやListItemsなどの他のコンポーネントを使用できます。

強制的に解決しようとしましたが、修正されませんでした。

私はWebパック（本当に小さなプロジェクト）を使用していないので、違いが生じる場合はreact-scripts buildでビルドが行われます。

triztian 2020年08月05日

👍1

書き直し：質問をソリューションリファレンスに置き換えます（そして、私たちダミーのために、ドキュメントでさらに用語を明確にするためのリクエストですか？:)）

バックグラウンド：
私は、フックを備えた機能コンポーネントを、ブラウザーのバニラJSからそのコンポーネントを呼び出すことができるアセットにWebpackでコンパイルしようとしていました。

例えば、

function Example() {
    const [count, setCount] = React.useState(0);

    return <button onClick={() => setCount(count + 1)}>
        You clicked {count} times
    </button>;
}
export default Example;

...それ自体をモジュールとしてエクスポートしたかったので、そのアセットを読み込んだ後、次のようにHTMLから直接使用します。

<script defer>
            ReactDOM.render(
                ExportedCompiledExample.default(props),
                document.getElementById("my_element")
            );
</script>

私はずっと前にこれを動作させました_コンポーネントにフックが含まれていない限り_。しかし、フックを使用しているとき、私はこの恐ろしいエラーメッセージに遭遇し続けました。

テーブルを弾くほどシンプルなソリューション
私は_多くの_より複雑な赤いニシン（複数のreact / reactDOMバージョン/インスタンス、npmインポートと非表示の二次依存関係、react-hot-loader、webpackセットアップ、外部、さまざまなバンドル/モジュール/ライブラリ規則、コンパイル後の構造）に従いました。。）これを試す前に、これはうまくいきました：

export default () => <Example />;

（または該当する場合export default props => <Example {...props} /> ）。

ふりかえり20/20では、それは理にかなっていると思います。

しかし、他の誰かがそれを必要とする場合に備えて混乱の原因を特定するために：フックのルールのドキュメントは_関数コンポーネントの本体のトップレベルでそれらを呼び出す_と言っています。実際に例を構造に直接貼り付けたので、これを実行したと思いました。

私の解釈は、これは、例から...

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

...それ自体は関数コンポーネントではありませんか？これは、適切な呼び出しコンテキストでそうなります（つまり、 Example()ではなく<Example /> ）。

ドキュメントのどこかで見逃したかもしれませんが、そうでない場合は、少しの使用コンテキスト（またはESモジュールのセットアップ）が含まれている/言及されている/リンクされていると、多くの時間を節約できます。 :)特に直接export default Exampleバージョンはフックなしで動作するので。

espen42 2020年08月05日

👍6

実用的なソリューション@apieceofbartをありがとう！私の問題はnpmリンクに関連していました。

これが、Webpackの設定が設計上隠されているCreate ReactAppで動作するようにした方法です。それもあなたの解決策かもしれません@florianzemma？

npm install -D react-app-rewired
プロジェクトルートのにconfig-overrides.jsというファイルを作成します。

// config-overrides.js
module.exports = function override(config, env) {
  const path = require('path');

  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        react: path.resolve('./node_modules/react')
      }
    }
  };
}

package.json内の関連するreact-scripts ...コマンドをreact-app-rewired ...に置き換えます。

お役に立てば幸いです

lapponiandevil 2020年08月13日

🎉5 👍5

バンドルを2回ロードしたため、このエラーが発生しました。
私の場合、スクリプトタグがレンダリングされたnunjucksテンプレートが2回使用されたために発生しました。レイアウト自体と、一般的にヘッドタグコンテンツのテンプレートです。

kote-isaev 2020年08月20日

毛糸の回避策

私はYarnを使用していますが、 package.jsonで解決を強制することでこれを修正しました：
  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

親アプリ（ライブラリを消費する）に解像度を追加することに加えて、次のコマンドでライブラリの依存関係を更新しました。

yarn add link:/path/to/parent-app/node_modules/react
yarn add link:/path/to/parent-app/node_modules/react-dom

この後、親アプリのライブラリをyarn add link:/path/to/libraryで再リンクしました

luciomartinez 2020年08月21日

👍1

やあ
私は糸のワークスペースで同じ問題に遭遇しています。
私はこのようなレイアウトを持っています：

ワークスペース/
├──図書館/
├──app1/
├──app2/

app1とapp2には、react v16.9.0、react-dom v16.9.0、および 'library'への直接の依存関係があります。
「ライブラリ」には、v16.9.0に対応するためのピア依存関係がありますが、ストーリーブックに対する開発依存関係もあります。
問題は、reactv16.13.1に依存しているストーリーブックに起因しているようです。
ただし、yarn installを実行すると、トップレベルのnode_modulesでreact 16.13.1になり、app1とapp2のローカルnode_modulesでreact16.9.0になります。

app1（CRAで作成）を実行すると、ローカルのreact v16.9.0を使用していますが、「library」のコンポーネントはReactv16.13.1を使用しています。

これは、糸巻き上げロジック、create-react-appsのwebpack定義、またはその両方に問題があるように思われますか？
誰かがこのシナリオの回避策のアイデアを持っていますか？

JamesRamm 2020年08月25日

やあ
私は糸のワークスペースで同じ問題に遭遇しています。
私はこのようなレイアウトを持っています：
ワークスペース/
├──図書館/
├──app1/
├──app2/
app1とapp2には、react v16.9.0、react-dom v16.9.0、および 'library'への直接の依存関係があります。
「ライブラリ」には、v16.9.0に対応するためのピア依存関係がありますが、ストーリーブックに対する開発依存関係もあります。
問題は、reactv16.13.1に依存しているストーリーブックに起因しているようです。
ただし、yarn installを実行すると、トップレベルのnode_modulesでreact 16.13.1になり、app1とapp2のローカルnode_modulesでreact16.9.0になります。
app1（CRAで作成）を実行すると、ローカルのreact v16.9.0を使用していますが、「library」のコンポーネントはReactv16.13.1を使用しています。
これは、糸巻き上げロジック、create-react-appsのwebpack定義、またはその両方に問題があるように思われますか？
誰かがこのシナリオの回避策のアイデアを持っていますか？

これについて私が見つけた唯一の解決策は、CRAアプリをyarn run ejectし、 resolveセクションの順序を次のように切り替えることでした。

`` `javascript
モジュール：['node_modules'、paths.appNodeModules] .concat（
modules.additionalModulePaths || []
）、
`` ``

に
`` `javascript
モジュール：[paths.appNodeModules、 'node_modules']。concat（
modules.additionalModulePaths || []
）、
`` ``

'appNodeModules'が最優先ではないことは私には奇妙に思えます-依存関係の解決に関しては、問題の実際のアプリを延期する必要がありますか？

JamesRamm 2020年08月25日

WebpackとElectronが関係する設定で「フック」の問題が発生しました。私のプロジェクトは、それ自体がWebpackによってバンドルされている（そして私が自分で作成した）モジュールAに依存しています。私はReactをAから外部化しました（commonjs2モジュールであると宣言しました）。これにより、ライブラリバンドルからReactファイルが除外されます。

Electron Rendererプロセスで実行されている私のメインプログラムは、Reactも使用しています。 WebpackにReactをバンドルに含めました（特別な構成はありません）。

ただし、ランタイム環境でReactのインスタンスが2つあるため、これにより「フック」の問題が発生しました。

これはこれらの事実によって引き起こされます：

モジュールA 'には' Reactが必要であり、これはElectronのモジュールシステムによって解決されます。したがって、Electronはnode_modulesからReactを取得します。
メインプログラムは、Webpackランタイムに依存して、バンドル自体からReactを「ロード」します。
ElectronとWebpackランタイムの両方に独自のモジュールキャッシュがあります...

私の解決策は、メインプログラムからもReactを外部化することでした。このようにして、メインプログラムとモジュールAの両方がElectronからReactを取得します。これはメモリ内の単一のインスタンスです。

エイリアスをいくつでも試しましたが、エイリアスはモジュールコードの場所をWebpackに指示するだけなので、問題は解決しません。複数のモジュールキャッシュの問題に関しては何もしません！

制御できないモジュールでこの問題が発生した場合は、Reactが外部化されているかどうかとその方法を確認してください。外部化されていなければ、Electronのコンテキストではこの問題を解決できないと思います。グローバルとして外部化されているだけの場合は、Reactを.htmlファイルに入れて、メインプログラムもそれに依存するようにします。

joopringelberg 2020年08月28日

👍2

ついに...

//webpack.config.js

module.exports = {
  ...
  externals: {
      react: 'react',
  },
}

Naterra 2020年09月04日

👍2

Vue3にも同じ問題があります

frei-x 2020年09月09日

👀5

この問題を解決し、Reactを使用する外部ライブラリのpackage.jsonにreactとreact-domをpeerDependenciesとして配置しました。

  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },

Sergioamjr 2020年09月15日

👎5 👍1

ドキュメントのどこかで見逃したかもしれませんが、そうでない場合は、少しの使用コンテキスト（またはESモジュールのセットアップ）が含まれている/言及されている/リンクされていると、多くの時間を節約できます。 :)特に直接export default Exampleバージョンはフックなしで動作するので。

こんにちは@ espen42 、
私はあなたの解決策が私たちを助けることを本当に望んでいました。あなたが言ったように、私たちは文字通り_すべて_を試しました。

残念ながら、あなたの解決策も役に立たないようです。多分私は何かを逃したのだろうか？

したがって、パッケージ（@ bla / blaと呼びます）には、次のようなフック付きのコンポーネントを持つindex.jsがあります。

function Bla = ({...props]) => {
const [bla, setBla] = useState(false);
return bla ? <div {...props} /> : 'no luck';
}

npx babelを使用してパッケージをコンパイルします。

このパッケージをnpm linkにリンクしてから、 npm link @bla/blaのようにプロジェクトに含めます。
パッケージとプロジェクトの両方が同じバージョンのReactとreact-domを使用します。

プロジェクトには、次のようなパッケージが含まれています。

import Bla from `@bla/bla`

const RenderBla = ({...props}) => <Bla {...props} />

export default RenderBla

残念ながら、エラーは引き続き発生します。
Invalid hook call. Hooks can only be called inside of the body of a function component.

何が欠けているのでしょうか？

afkatja 2020年09月15日

"externals": {
  "react": "react",
  "react-dom": "react-dom"
}

これは私のために問題を修正しました、どうもありがとう❤️

brenoprata10 2020年09月18日

外部リンク（Sharepoint Online）を介してアクセスした場合のフィールドカスタマイザーエラー

リンクを介してアクセスすると、いくつかのファブリックUIコンポーネントを含むspfxフィールドカスタマイザー拡張機能で、fabricUIのバージョンに応じて次のいずれかのエラーが発生します。
https://reactjs.org/docs/error-decoder.html/?invariant=321 、
https://reactjs.org/docs/error-decoder.html/?invariant=290&args [] = A.％20General

ページが更新されると、すべてが正しく機能します。
コードでReactフックを使用したことはなく、Reactコンポーネントのみを使用しました。
参照も使用していません。

すべてのファブリックUIコンポーネントを削除すると、ファブリックUIの原因である可能性があり、エラーは発生しません。

さまざまなバージョンのfabicui、6.189.2、6.214.0、および7.114.1を試し、すべてのfabric-ui参照を流暢なuiに置き換えようとしましたが、まだ問題が解決していません

aj2rck 2020年09月18日

こんにちは、みんな、
私もこの厄介なエラーに出くわしました。私の場合、これは最終的に私のwebpackビルドの設定ミスでもありました。しかし、この問題で提案されたものはどれも私にはうまくいきませんでした。だから私も私の経験を共有したいと思います。

私のページには複数のエントリポイントが含まれており、SplitChunkPluginはランタイムチャンクを作成できます。 rails-webpacker gemを使用しているため、デフォルトでは、チャンクごとにランタイムを作成するように構成されています。しかし、webpackはデフォルトで同様のことを行い、チャンク内にランタイムが含まれています。

もちろん、ドキュメントはこのケースについて警告していますが、あなたはそれを見つけなければなりません。 optimization.runtimeChunkをsingleに設定すると、個別のランタイムが作成されます。これにより、複数のエントリポイントからreactを使用する場合に、ビルドがreactの複数のコピーをインスタンス化するのを防ぐことができます。

https://webpack.js.org/configuration/optimization/#optimizationruntimechunkを参照してください

dino115 2020年09月25日

👍1

こんにちは、みなさん、
CDNから取得し、 <script>タグに含まれている外部ライブラリを使用したいという問題があるため、コード自体でできることはあまりありません。 libはreactとhooksを使用しているので、
3. You might have more than one copy of React in the same appエラー。
残念ながら、ライブラリ用のNPMパッケージはありません： https ：//github.com/Anyline/anyline-ocr-anylinejs-module
CRAを使用していますが、プロジェクトが排出されません。

サンドボックスの例を少し作成しました。

TomlDev 2020年10月08日

他のパッケージもフックを使用しているが、独自のReactを使用しているため、同じエラーがスローされます。パッケージをNPMに公開してから、NPMから直接インポートする必要がありました。それか

私は最近この問題に遭遇し、なぜだろうと思います。
GitLabにアップロードし、アドレスでインストールすることで解決しました。
パッケージとローカルパッケージの違いは何ですか？

catsheue 2020年10月21日

「無効なフック呼び出し」が発生することがわかりました。フックを呼び出しているコンポーネントを動的にロードするとき。

コードサンドボックス

「アプリ」をロードするテストは静的に合格します。それを動的にロードする2つのテスト（1つはrequireを使用し、もう1つは関数としてimportを使用）は両方ともエラーを出します。

私が気にする理由：ドキュメントに従って、jest.doMockを使用していくつかのものをモックアウトし、テストしたいモジュールを動的にロードするテストを作成しようとしています。さまざまな機能でさまざまな方法でモックを作成できるようにする必要があるため、Mockの代わりにdoMockを使用しています。ただし、モックを使用せずにエラーが発生することに気付くでしょう。

miket01 2020年10月21日

👍2

他のパッケージもフックを使用しているが、独自のReactを使用しているため、同じエラーがスローされます。パッケージをNPMに公開してから、NPMから直接インポートする必要がありました。それか
私は最近この問題に遭遇し、なぜだろうと思います。
GitLabにアップロードし、アドレスでインストールすることで解決しました。
パッケージとローカルパッケージの違いは何ですか？

@catsheueはあなたにとってReact1 === React2 trueたか？
私はnpmで私のものを公開していませんが、それが原因かどうか知りたいと思っていました

私のはReact1 === React2 = trueのようで、私の反応ライブラリをプロジェクトにインポートするときになぜこれが起こっているのか解決策を見つけていません

jyoon006 2020年10月28日

yarn linkを使用してローカルライブラリをテストするときにも同じ問題が発生しました。私の間違いは、 reactとreact-domを開発者の依存関係としてピアではなくリストすることでした。

だから私はyarn add --peer react react-domをやるべきだった。 最後に、Reactを開発依存関係としてコミットする際にすでに間違いを犯したため、ライブラリからnode_modulesを削除する必要がありました。 rm -rf node_modules; yarnで問題が解決しました。

zaydek 2020年10月29日

🎉1

私もこの問題に直面しました。私の場合、Storybook（v6.0.28）のReactが重複していることが原因でした。私はあなたがここでより多くの情報を見つけることができると信じています。

Storybookの依存関係をアンインストールし、 node_modulesを削除して、 yarn installを再度実行しました。これは私のために働いた。私はそれが誰かがこれで涙と無駄な時間を避けるのを助けることを願っています。

giorgosera 2020年11月13日

この回避策は私にも有効です。 Firebase Functionsを使用していて、プロジェクトルートと/functions/ディレクトリの両方にnode_modulesフォルダがあります。 /functions/node_modulesを削除すると、アプリは正常に動作します。これは回避策ですが、かなり面倒です。両方のnode_modulesフォルダーが同時に存在することを可能にする回避策を見つけた人はいますか？

schlosser 2020年11月13日

後世およびcreate-react-appで作成されたアプリでmdbootstrapを使用するときにこの問題に直面する可能性のある人のために。

ボタンやカード画像などのさまざまなmdbootstrapコンポーネントを追加すると、このエラーが発生しました。 Reactのサポート記事に従ってトラブルシューティングのためにindex.jsに追加されたコンソール出力は、バージョンの比較でtrueを返しました。だから私は何か他のことを試みなければなりませんでした。

修正はnpm dedupeを実行することでした

npm ls react

+-- [email protected]
| `-- [email protected]
`-- [email protected]

npm dedupe

npm ls react

+-- [email protected]
| `-- [email protected]  deduped
`-- [email protected]

この後、すべてのコンポーネントは正常に機能しました。幸せな日々。

pnm563 2020年11月17日

「無効なフック呼び出し」が発生することがわかりました。フックを呼び出しているコンポーネントを動的にロードするとき。
コードサンドボックス
「アプリ」をロードするテストは静的に合格します。それを動的にロードする2つのテスト（1つはrequireを使用し、もう1つは関数としてimportを使用）は両方ともエラーを出します。
私が気にする理由：ドキュメントに従って、jest.doMockを使用していくつかのものをモックアウトし、テストしたいモジュールを動的にロードするテストを作成しようとしています。さまざまな機能でさまざまな方法でモックを作成できるようにする必要があるため、Mockの代わりにdoMockを使用しています。ただし、モックを使用せずにエラーが発生することに気付くでしょう。

@ miket01まさに私がやろうとしていることです（ただし、モックはありません）。解決策は見つかりましたか？

YannickFricke 2020年11月18日

👍1

これを行うことに遭遇しました：

function HeadedSection (props) {
   if (!ReactDOMServer.renderToStaticMarkup(props.children))
        return null;

    const [hidden, set_hidden] = useState(props.hidden);

最初useStateを呼び出すことで修正：

function HeadedSection (props) {
    const [hidden, set_hidden] = useState(props.hidden);

    if (!ReactDOMServer.renderToStaticMarkup(props.children))
        return null;

mwri 2020年11月24日

何ヶ月も脇に置いた後も、このエラーが発生します。

プログラムではゼロフックを使用しています。 reactのコピーが1つとreact-domのコピーが1つだけあり、それらは同じバージョンです。リンクはありません。

最近、セキュリティの問題を修正するためにいくつかのパッケージを更新しようとする前に、部分的に機能していました。私はnext.jsを使用しており、修正はいくつかのサブコンポーネントを{typeof window !== 'undefined'でラップすることによってトップレベルのコンポーネントから除外することでしたが、現在はどちらも機能しません。

[18:50:42] (master) questions
// ♥ npm ls react
[email protected] /Users/Dan/work/b/questions
└── [email protected]

[22:46:34] (master) questions
// ♥ npm ls react-dom
[email protected] /Users/Dan/work/b/questions
└── [email protected]

[22:46:55] (master) questions
// ♥ npm dedupe
removed 55 packages, moved 46 packages and audited 1712 packages in 65.449s

33 packages are looking for funding
  run `npm fund` for details

found 26 vulnerabilities (15 low, 3 moderate, 8 high)
  run `npm audit fix` to fix them, or `npm audit` for details

ReactCurrentDispatcher.current === nullが原因でエラーがスローされますが、これが何かに設定されている/node_modules/react/cjs/react.development.jsのどこにも見つかりません。

ReactCurrentDispatcher.currentがどこで価値を得るべきか誰かに教えてもらえますか？
https://github.com/facebook/react/search?p=2&q=%22ReactCurrentDispatcher.current+%3D%22&type=code

これは候補のように見えますが、このコードは私のreact-development.jsに含まれていません。すべきですか？

    const prevPartialRenderer = currentPartialRenderer;
    setCurrentPartialRenderer(this);
    const prevDispatcher = ReactCurrentDispatcher.current;
    ReactCurrentDispatcher.current = Dispatcher;

https://github.com/facebook/react/blob/702fad4b1b48ac8f626ed3f35e8f86f5ea728084/packages/react-dom/src/server/ReactPartialRenderer.js#L859

next.jsによるサーバー側のレンダリングでこのエラーが発生し、このコードはreact-dom/serverの下のreactソースにあります。 /node_modules/react/cjs/react-development.jsが正しいかどうかを確認するにはどうすればよいですか？

更新：これが問題でした。 next.config.jsファイルのwebpack.config.externalsを編集しました
https://github.com/vercel/next.js/issues/17592#issuecomment -712443172

dancancro 2020年11月27日

マテリアルUIをアプリに統合しようとすると、アプリが大きなエラー（無効なフック呼び出し）をスローします。私はReactにまったく慣れていないので、助けが必要です。

Ksound22 2020年11月30日

React: フック+ Reactの複数のインスタンス

検索から来る人へ：最初にこのページを読んでください。最も一般的な可能な修正が含まれています！

最も参考になるコメント

全てのコメント285件

私たちのための実用的なソリューション

事件の背景とそれが起こる理由

ケース要件：

例

例：

毛糸の回避策

関連する問題

React: フック+ Reactの複数のインスタンス

検索から来る人へ：最初にこのページを読んでください。 最も一般的な可能な修正が含まれています！

最も参考になるコメント

全てのコメント285件

私たちのための実用的なソリューション

事件の背景とそれが起こる理由

ケース要件：

例

例：

毛糸の回避策

関連する問題

検索から来る人へ：最初にこのページを読んでください。最も一般的な可能な修正が含まれています！