You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You are probably here because you got the following error message:
7
+
このページを見ているのは、恐らく以下のエラーメッセージが出たからでしょう。
8
8
9
-
> Hooks can only be called inside the body of a function component.
9
+
> Hooks can only be called inside the body of a function component.（フックは関数コンポーネントの本体でしか呼び出せません）
10
10
11
-
There are three common reasons you might be seeing it:
11
+
このエラーを目にする理由としてよくあるものは 3 つです。
12
12
13
-
1.You might have **mismatching versions** of React and React DOM.
14
-
2.You might be **breaking the [Rules of Hooks](/docs/hooks-rules.html)**.
15
-
3.You might have **more than one copy of React** in the same app.
13
+
1.React と React DOM の**バージョンがマッチしていない**。
14
+
2.**[フックのルール](/docs/hooks-rules.html)**に違反している。
15
+
3.同じアプリ内に **2 つ以上の React のコピー**が含まれている。
16
16
17
-
Let's look at each of these cases.
17
+
それぞれのケースについて見てみましょう。
18
18
19
-
## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom}
19
+
## React と React DOM のバージョン不整合 {#mismatching-versions-of-react-and-react-dom}
20
20
21
-
You might be using a version of `react-dom` (< 16.8.0) or`react-native` (< 0.60) that doesn't yet support Hooks. You can run `npm ls react-dom`or`npm ls react-native`in your application folder to check which version you're using. If you find more than one of them, this might also create problems (more on that below).
21
+
まだフックをサポートしてない `react-dom` (< 16.8.0) や`react-native` (< 0.60) を利用しているのかもしれません。アプリケーションフォルダで `npm ls react-dom`か`npm ls react-native`を実行して、どのバージョンを使っているのかを確認できます。もしも 2 つ以上出てきた場合は、それも問題になりえます（後述）。
22
22
23
-
## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks}
23
+
## フックのルールへの違反 {#breaking-the-rules-of-hooks}
24
24
25
-
You can only call Hooks **while React is rendering a function component**:
>[Custom Hooks](/docs/hooks-custom.html)*may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
In order for Hooks to work, the `react`import from your application code needs to resolve to the same module as the `react`import from inside the `react-dom`package.
If these `react`imports resolve to two different exports objects, you will see this warning. This may happen if you **accidentally end up with two copies** of the `react` package.
If you see more than one React, you'll need to figure out why this happens and fix your dependency tree. For example, maybe a library you're using incorrectly specifies `react`as a dependency (rather than a peer dependency). Until that library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)is one possible workaround.
If it prints `false`then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/facebook/react/issues/13991)includes some common reasons encountered by the community.
This problem can also come up when you use `npm link`or an equivalent. In that case, your bundler might "see" two Reacts — one in application folder and one in your library folder. Assuming `myapp`and`mylib`are sibling folders, one possible fix is to run `npm link ../myapp/node_modules/react`from `mylib`. This should make the library use the application's React copy.
>In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if `require('react')`resolves differently between the component and the `react-dom` copy it was rendered with.
If none of this worked, please comment in [this issue](https://github.com/facebook/react/issues/13991)and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it.
0 commit comments