@baldurhこれは確かに非常にまれです

• すべてを単一のNext.jsアプリに移動します
• lernaまたはプライベートnpmパッケージなどを使用する

@lfades返信ありがとう

@baldurh例としてネストされたNextJsアプリがあるため、 next-i18nextでこれに

@isaachinmanまだありません。 他の理由でまだ9.xにアップグレードできていないので、調査していません。 これに影響を与えるコードがどこにあるのか誰かが知っていますか？ 問題をもっとよく理解したいです。

私はまだこれを掘り下げる時間がありませんでしたが、誰かが再現が必要な場合： next-i18nextのクローンを作成し、 cdをexamples/simpleにクローンし、NextJsバージョンを> = 9.0.6にアップグレードします。

現在9.0.3であるため、これは技術的にはパッチの重大な変更です。

最近同様のエラーが発生し、9.0.5（およびReact 16.8.x）にダウングレードする必要がありました。 私が見た問題をNextのMDXの使用に絞り込んだのですが、それ以上の具体的な詳細はありません。

Next＆next-i18nextに基づくかなり大きなプロジェクトで同じ問題を掘り下げました。

このエラーは次の3つの理由でスローされる可能性があることがわかりました。

1. 不整合なreact＆react-domバージョン-私のアプリには適用されません
2. 2つのバージョンのreact-domがインポートされました-私のアプリには適用されません
3. Reactフックの不適切な使用-私はフックを使用していませんが、いくつかのライブラリは使用しており、他のすべての人に機能しているようです。

奇妙なことに、それは本番ビルドでのみ発生します。

@timneutkens @Timerこれにタグを付けて申し訳ありませんが、あなたからの入力をお待ちしています。 これは修正できるものだと思いますか？私たち全員がいくつかの回避策を実装する必要がありますか？ これは、現時点ではかなり大きなブロッカーです。 ありがとう。

reactエイリアスを作成したようですが、 react-domはエイリアスしていません。 あなたはそれを試すことができますか？

@Timerありがとう。 試しましたが効果がありませんでした

reactとreact-dom依存関係を1レベル上に移動することで、今リプロでこれを解決することができました。 誰かが試してみたい場合は、変更をプッシュしました。 実際のプロジェクトでは試していませんが、うまくいくことを願っています。 おそらくこれは、同様@isaachinman、@jaredcwhiteと@felixmoshのための問題を解決するだろうか？

@Timerこれをプロジェクトで機能させましたが、プロジェクトのnode_modulesフォルダーにreactをインストールする他の依存関係がないことも確認する必要がありました。 私たちの場合、それはストーリーブックに関連していました（ yarn why reactは大いに役立ちました😄）。 とにかくストーリーブックを別のプロジェクトに移動することを計画していたので、このソリューションは私たちの場合にはうまくいくと思います。

ああ、そうです。 不適切に公開されたnode_moduleパッケージは、これを引き起こします（ピアの依存関係ではなく、 react(-dom|)に依存します）。

reactとreact-dom依存関係を1レベル上に移動することで、今リプロでこれを解決することができました。 誰かが試してみたい場合は、変更をプッシュしました。 実際のプロジェクトでは試していませんが、うまくいくことを願っています。 おそらくこれは、同様@isaachinman、@jaredcwhiteと@felixmoshのための問題を解決するだろうか？

このリポジトリで行った変更について詳しく説明していただけますか？

npm ls reactまたはnpm ls react-domを実行しました。リストにある次のアプリのみを取得しました。

@felixmosh申し訳ありませんが、昨日プッシュが失敗したようです。 これで変更は間違いなくあります😅 reactとreact-domをappフォルダーからルートフォルダーに移動したので、両方でyarn/npm installを実行する必要がありますappフォルダとルートフォルダあなたが実行する前にapp 。 これが十分に明確であることを願っています。

これを本番環境で機能させるには、ビルドシステムにいくつかの変更を加える必要があるため、このソリューションはまだ少し面倒です😝

説明をありがとう、私は次のチームがそれを解決するのを待ちます、私のモノリポジトリのルートにreactdepsを置くのは少し奇妙に聞こえます...

@felixmoshええ私はあなたに同意します。 ただし、糸のワークスペースのようなものを使用する場合、それはまさにそのツールが行うことです。 2つ以上のプロジェクトで同じ依存関係がある場合は、依存関係をルートに引き上げます。 すべてのプロジェクトで同じバージョンの依存関係があることが保証されるので、これは素晴らしいことです。 しかし、そのようなツールがない場合は、自分で管理する必要があり、実際には少し厄介です。 最善の解決策は、Next.jsチームが調査し、私たち全員のためにこれを解決することであることに同意します😇🙏🏻

同じ問題が発生し、 reactとreact-dom 1レベル上げて、ルートからサーバーを実行することが、現在9.1.5で機能する唯一の回避策です。 この問題の前にこれらのリンクを見つけたので、参照用にhttps://github.com/facebook/react/issues/13991とhttps://github.com/facebook/react/issues/15315#issuecomment-479802153をリンクします。

こんにちはこの問題に関する更新はありますか？ 私たちはモノレポを持っており、この正確な問題に直面しています。

同じ問題に直面します。
v9.0.5は、rootFolderの外部にインポートされたコンポーネントのフックでうまく機能します。

9.0.6から9.1.6-canary.5まで同じ問題があります。

この問題はサーバー側でのみ発生します。 SSRが無効になっている場合（たとえば、動的を介して外部コンポーネントをロードする場合）、バージョン> = 9.0.6ですべてが期待どおりに機能します。

@nodkzこれはreactパッケージの解決に関する問題であるため、ノードでのみ発生します。

@Timerこの問題は、約6バージョンの「次の」マイルストーンに移動しました。これにより、最新バージョンに更新できなくなります。

私はその宿泊施設で一日中無駄になりました、それの原因が何であるかわかりません、回避策を試しました（それはうまくいきませんでした）。

方向性を調査するのに助けが必要ですか？
何か直感はありますか？
なぜそれは本番ビルドでのみ発生するのですか？
これに関連する可能性のある9.0.5から9.0.6何が変更されましたか？

ありがとう🙏🏼

私は問題を見つけたと思います!!!
私はそれが2つのことの組み合わせだと思います：

1. node_modulesのシンボリックリンクの使用
2. i18next / react-i18nextはサーバーバンドルの外部ではありませんでした!!
   
   私の場合、本番ビルドで爆発すると、i18next useTranslationフックで文句を言います...

そこで、サーバーバンドル内にノードモジュールが存在する理由を調査しました（サーバーバンドルのベストプラクティスは、それらを外部にすることです）。

nextにはnextlibのいくつかの例外があることがわかりました（なぜですか？）、面白い部分は、 i18next ＆ react-i18next同様に、この正規表現がnext/dist/で終わるすべてのlibをキャッチすることです。 !!

したがって、これを変更すると、次のようになります。

res.match(/next[/\\]dist[/\\]/) 

に

res.match(/[/\\]next[/\\]dist[/\\]/) 

サーバーバンドルは、 nextではなく、 next/distで終わるすべてのライブラリを除外し、問題を解決しました。

私にとっての主な問題は、リクエストを解決する新しい方法です： https ：

プロジェクトルートの外部にコンポーネントがあるため、リクエストの解決によりエラーがスローされ、サーバーチャンクにreactがバンドルされます。 そのため、サーバーでInvalid hook callエラーが発生します。

リンクした式の@baldurh contextはwebpackによって提供され、コンパイルルート（プロジェクトディレクトリ）とは異なります。
requireを発行しているのは常にファイルのディレクトリです。

正しい。 今のところ機能するようにパッチを適用しました。 最終的には、依存関係が上位ディレクトリレベルで共有されるように、コードの構造を変更すると思います。 ただし、 reactが外部フォルダー（ルートの外）で使用できる場合でも、エラーが発生します。

リンクされたパッケージを使用しようとしていますが、同じ問題が発生しています。 残念ながら、 https： //github.com/facebook/react/issues/13991からの修正はどれも機能しません🙁

yarn linkシンボリックリンクされたコンポーネントライブラリでも同じ問題が発生しています。 これはv9.0.6-canary.4までは問題なく機能しましたが、現在は他のコメント投稿者と同じ立場にあり、これを超えてアップグレードすることはできません。このPRへの変更を特定しましたhttps://github.com/zeit /next.js/pull/8739

私のコンポーネントライブラリはreact 、 react-dom 、およびstyled-componentsます。 この構成は次のとおりです。

• パッケージをdevDependenciesとして追加し、peerDependenciesに含めました
• 私のwebpack設定に外部としてパッケージを追加しました
• 次の設定でこれらのパッケージに解決エイリアスを追加しました
• コンポーネントライブラリモジュールをnext-transpile-modulesでトランスパイルしました

更新

これらのモジュールをサーバーの外部に含めることで、これを修正することができました。 このコメントの@HosseinAghaに感謝しますhttps://github.com/martpie/next-transpile-modules/issues/50#issuecomment-558318688

if (isServer) {
  config.externals = [
    'react',
    'react-dom',
    'styled-components',
    ...config.externals
  ]
}

まったく同じ問題が発生していますが、これまでのところ回避策はありませんでした。

パッケージを公開してインストールすると（そしてnext.config.jsでresolve.aliasを使用すると）、パッケージは機能します。

ただし、 yarn link @mypackageを介してリンクされたパッケージを使用して開発ビルドを実行すると、常に無効なフックエラーが発生します。

node_modules/dist/build/wepack-config.jsを変更し、 https：//github.com/zeit/next.js/pull/8739に追加された行をコメントアウトすることで、それを機能させることもできました

baseResとresをログに記録した場合に表示されるのは、if条件が次のようにトリガーされることです。

• /myApp/node_modules/react/index.js！== /myApp/node_modules/myPackage/node_modules/react/index.js
• 私の理解では、ファイル/バージョンが100％同一であっても、パスが同じでない場合、これがトリガーされます

更新：

パッケージをyarnワークスペースを使用するように変換することで問題を回避することができました（リポジトリに含まれるパッケージは1つだけですが）。
コードを./srcから./package/our-package-name/srcに移動し、yarnワークスペースをセットアップしました=> https://classic.yarnpkg.com/en/docs/workspaces/

これにより、共通の依存関係が最上位の./node_modulesフォルダーに引き上げられ、。/ package / our-package-name / node_modulesはほとんど空のままになるため、これは問題を回避します。

したがって、パッケージをリンクすると、次に2番目のバージョンのreactがプルされなくなり（パッケージのnode_modulesフォルダーに存在しないため）、すべてが正常に機能します。

私は同じクソの問題を抱えています。 ¬¬ '

行動規範に反するため、私たちは一般的に罵倒します。

申し訳ありませんが、私はこのバグに腹を立てていました。 実は、Next.JSが好きすぎます。 しかし、この問題は退屈なので、使用できません。

外部ローカルパッケージとnext-transpile-modulesときに、この問題に直面しています。

Next.jsの最新バージョンを使い続けたいので、根本的な原因が見つかった場合は、Next.jsにパッチを送信しようとします。

[email protected]をインストールした後、同じ問題に直面し
私の依存関係はnext @ v9.3.1 、 react @ 16.13.0 、 react-dom @ 16.13.0 、そしてもちろん他の多くのライブラリです（ただし、next-i18nextをインストールする前はすべてが機能していました）。 誰かが回避策を持っているなら、それは素晴らしいかもしれません：+1：

この号を投稿していただきありがとうございます。デザインシステム（reactコンポーネントライブラリ）パッケージのシンボリックリンクにも問題がありました。 また、 https： //github.com/martpie/next-transpile-modulesを使用してトランスパイルしてい

ここで提案されている修正は私たちのために働いた：

• ライブラリをnode_modulesフォルダにシンボリックリンクします（ npm link代わりに独自のユーティリティを使用して行いましたが、基本的に同じである必要があります）
• 次のようなものをnext.config.js追加します。

// next.config.js
const nextConfig = {
    webpack: (config, options) => {
        // modify the `config` here

        if (options.isServer) {
            config.externals = ["react", ...config.externals];
        }
        config.resolve.alias["react"] = path.resolve(__dirname, ".\\node_modules\\react");

        return config;
    },
};
// more plugins etc...

設定を必要としない代替の回避策

• パッケージのnode_modulesを除くすべてをシンボリックリンクします。 私はこれのために独自のユーティリティを作成しました。おそらくgithubに投稿できます。

しかし、これがNextJSで修正されているのを見るといいでしょう。私は、WebpackエイリアスがNextJS以外のすべてのプロジェクトで機能する理由を理解しようと多くの時間を費やしました:)

PS。 これが本番ビルドにどのように影響するかはわかりませんが、開発中にのみ使用します

if (options.isServer) {
            config.externals = ["react", ...config.externals];
        }

reactはすでに外部サーバー側です。

config.resolve.alias["react"] = path.resolve(__dirname, ".\\node_modules\\react");

これでは問題は解決しません。

この問題は、に応じて、あなたの依存関係に関連して前に述べreact 、彼らが持っている必要があり、一方、 peerDependencyにreact （彼らはそれを必要とする場合とが反応-DOM）を。

@timneutkens

いいえ、これが常に当てはまるとは限りません。 私は確かにピアの依存関係としてreactとreact-domを持っています。 ただし、たとえばライブラリをnextjsプロジェクトにシンボリックリンクした場合でも、問題は発生します。 次に、ライブラリ内にnode_modulesフォルダが作成されます（少なくとも、そのライブラリフォルダでnpm iまたはnpm linkしたことがある場合）。

このライブラリフォルダーからreactが解決されると、そのnode_modulesフォルダー内のフォルダーに解決され、問題の原因となるreactのデュアルコピーが取得されます。 lib内のnode_modulesフォルダーを削除するか、 npm link以外のものを使用してインストールすると、はい、動作します（ピアの依存関係またはまったく同じreactバージョンを使用している場合）。

したがって、開発中にこれを解決するには、エイリアス反応を実行して、全員に同じバージョンを使用するように強制できるようにする必要があります。 ここに記載されている問題のため、 config.externals ...部分を追加しないと、現在のNextJSバージョンでは効果がありません（少なくとも私にとっては）。

同様の問題が私にも起こっていますが、（潜在的に）material-uiライブラリ（＃10162で概説）が原因で、今のところ一時的な修正はpreserve npm run cleanを追加することdevスクリプト：
https://github.com/zeit/next.js/issues/10162#issuecomment -612501431

@timneutkens本当の問題は、これらの依存関係が独自のdeps（depsとpeer-dep）をどのようにリストするかに関係していることを理解していますが、これをより永続的に修正するために独自のアプリで何ができるか考えていますか？

@ ryan-0特別な設定はありますか？ マテリアルUiがピア部門として反応することをリストしていない場合、驚くでしょうか？ 非常に古いreactバージョンを使用したり、何かをシンボリックリンクしたりしますか？

特別な設定はありません..シンボリックリンクも反応もありません16.13.1 ->問題を公平にする原因となる可能性のある他の部門がいくつかありますが、少なくともその再現によれば、おそらくmaterial-ui / coreに関連しているようです（これも使用します）：
https://github.com/zeit/next.js/issues/10162

@ ryan-0あなたのmaterial-uiフォルダー内にreactを含むnode_modulesフォルダーはありますか？

また、npm重複排除を実行した後に動作を開始しますか？

いいえ、ネストされたノードフォルダがあるようには見えません。そのため、バグがどのように発生しているかについて混乱しています。 そして、 npm dedupeは機能しませんでした:(

不思議なことに、 resolve.aliasしても、プロジェクトルート外のパッケージには影響しないようです。

これが私のnext.config.jsファイルです：

const path = require('path')

module.exports = {
  webpack: config => {
    const { alias } = config.resolve || {}
    alias.react$ = path.resolve('node_modules/react')
    alias['react-dom$'] = path.resolve('node_modules/react-dom')

    config.resolve = {
      ...config.resolve,
      alias,
    }

    return config
  }
}

Lernamonorepoに存在するローカルパッケージでyarn linkを使用しています。 そのnode_modulesはreactコピーは含まれていませんが、monorepoルートには含まれています。 resolve.aliasが使用されている限り、違いが生じるとは思いませんが、残念ながらそうではありません。 モノレポルートからreactのコピーを削除した後、代わりにCannot find module 'react'エラーが発生します。

誰かがこれに対する良い解決策を見つけましたか？

リンクされた次のライブラリがあり、 next-transpile-modulesを使用して「consumer」プロジェクトに追加しています。 ドキュメントに記載されているように、 next.config.json reactエイリアスを追加しましたが、それだけでは不十分でした。 Reactの依存関係が重複しているというエラーがまだ発生しています。

@mweststrateのrelative-depsを使ってみることができます

誰かがこれに対する良い解決策を見つけましたか？

リンクされた次のライブラリがあり、 next-transpile-modulesを使用して「consumer」プロジェクトに追加しています。 ドキュメントに記載されているように、 next.config.json reactエイリアスを追加しましたが、それだけでは不十分でした。 Reactの依存関係が重複しているというエラーがまだ発生しています。

はい、上記の私の投稿を参照してください。サンプルにconfig.externalsパーツを追加する必要があります。そうすると、エイリアスが再び機能し始めます。

@johot私はあなたの解決策を試しましたが、それは私にとってはcannot destructure property 'query' of 'Object(...)(...)' as it is nullです。 この場合には、ヌルとして見オブジェクトがあるuseRouterからnext/router 。

@aleclarsonヒントをありがとう。 次のセットアップで動作しない場合は、試してみます。 現在使用していますか？

next-transpile-modulesとYarnを使用している場合、解決策は非常に簡単です： https ：

npmを使用している場合、私はまだ解決策を探しています：c

さて、私の最終的な解決策は、 yarn linkからyalcに移行することdistフォルダーにコピーしてから、変更をyalcストアにプッシュするgulpタスクがあります。

'consumer'で、 tsconfig.jsonを変更して、次のようなパスを解決しました。

 "paths": {
      "~/*": ["/src/*"],
      "my-library/*": ["./node_modules/my-library/dist/*"]
    },

そしてnext.config.jsに以下を追加しました：

 experimental: {
      jsconfigPaths: true, // enables it for both jsconfig.json and tsconfig.json
    }

したがって、nextはtsconfig.json paths基づいてパスを解決できます。 詳細はこちら。

簡単に言うと、 yalc + next-transpile-modulesを組み合わせると、ローカル開発のセットアップが大幅に改善されました。 重複する依存関係や奇妙なエラーはありません。 直接使用してモジュールを追加する行動yarn addとし、モジュールを結ぶyalcほとんど同じです。

styled-componentsに依存するローカルにリンクされたライブラリを使用している場合は、これを参照してください：

server/index.js ：

const moduleAlias = require('module-alias');
moduleAlias.addAlias('styled-components', path.join(__dirname, '../node_modules/styled-components'));

ただし、 next.config.js以下を追加する必要もあります。

config.resolve.alias['react'] = path.resolve(__dirname, './node_modules', 'react');
config.resolve.alias['react-dom'] = path.resolve(__dirname, './node_modules', 'react-dom');
config.resolve.alias['prop-types'] = path.resolve(__dirname, './node_modules', 'prop-types');
config.resolve.alias['styled-components'] = path.resolve(__dirname, './node_modules', 'styled-components');

それが役に立てば幸い。

テスト済み：

次へ：9.3.5
反応：16.13.1
スタイル付きコンポーネント：5.1.0

皆さん、簡単な修正、react、next、react-domのグローバルバージョンを削除するには、次のようにします。
npm remove -g react next react-dom

皆さん、簡単な修正、react、next、react-domのグローバルバージョンを削除するには、次のようにします。

npm remove -g react next react-dom

うまくいったことをうれしく思いますが、このスレッドの多くの人がこれらの依存関係をグローバルにインストールしているとは思えません。

ウェブだけじゃない！
反応16.9
反応ネイティブ0.62
Androidで実行
多分歴史上最小の再生者？

import React, { Component, useState } from 'react';
import {
  AppRegistry,
} from 'react-native';

function hooker() {
  const [count, setCount] = useState(0)
}

class ClassA extends Component {
  constructor(props) {
    super(props)
    //hooker();  //Invalid hook call Error
  }
  componentDidMount(){
    //hooker();  //Invalid hook call Error
  }
  render() {
    hooker();  //Invalid hook call Error
    return (      
      null   
    );
  }
} 
export default function App(props) {
  //hooker();  //No problem
  return (
    <ClassA/>
  );
};

AppRegistry.registerComponent('default', () => App);

私もこの問題に直面し、 yarn代わりにnpm yarnを使用するように戦い（npmでは機能しませんでした）、 https：//github.com/vercel/next.js/を使用しました

これに対する解決策はありますか？

バージョン9.4.4に完全に固執しました。

以下のプライベートルートのHOCで発生する問題。 withRouterも使用してみましたが、代わりにラップされたコンポーネントで同じエラーがスローされます。

import { useRouter } from 'next/router'

function withPrivateRoute(WrappedComponent) {
const router = useRouter();                    //**** ERROR IS THROWN HERE *******
class WPR extends React.Component {
    componentDidMount(){
        console.log('wrappeed', WrappedComponent);
        // const { router } = this.props;
        const intendedRoute = router.pathname;
        // const isAdmin = !!cookies.get('isAdmin');
        // const isAuthenticated = !!cookies.get('username');
        const isAuthenticated = false;
        const isAdmin = false;
        if (!isAuthenticated) {
            router.push({
                pathname: '/login',
                query: { from: intendedRoute },
            });
        }
        if (
            isAuthenticated &&
            router.pathname.includes('admin') &&
            !isAdmin
        ) {
            router.push('/');
        }
    }

    render() {
        return ({ ...props }) => <WrappedComponent {...props} />;
    }
}
return WPR;
 }

  export default withPrivateRoute;

私は同じ問題を抱えていたので、以前のブランチ（この問題はなかったと思っていました）に戻って最新のコードをファイルごとに追加する必要があり、問題が

import { useToasts, AppearanceTypes } from 'react-toast-notifications';

export const showToast = (message: string, appearance: AppearanceTypes) => {
    const { addToast } = useToasts();
    addToast(message, {
        appearance,
    });
};

私はトーストサービスを使用していましたが、エラーが発生した場合はすべてのリクエストでshowToastポップアップしますが、このエラーが発生すると、このサービスを使用することはないと思います

これは@arcanisによるPRhttps ：//github.com/vercel/next.js/pull/8739に関連していることを確認でき
Rushとpnpmを使用したmonorepoセットアップを使用しているため、前述のPRがマージされた理由がなくなります。 また、 https： //github.com/vercel/next.js/issues/9022#issuecomment -610255555で作成された@timneutkensが適用されないという点も、次の構造になっています。

website
  dependencies: next, react, react-dom, library
library
  devDependencies: react, react-dom (for tests)
  peerDependencies: react, react-dom

library.devDependencies.(react|react-dom)は、 website.dependencies(react|react-dom)とまったく同じファイルを指すシンボリックリンクです。 ただし、 https：//github.com/vercel/next.js/blob/f98e38c9b634b85e6679e7b5f953a9d98074cfc3/packages/next/lib/resolve-request.ts#L16で使用されている[email protected]が現在の

最終的には次のようになりました。

1. コードをlibraryにトランスパイルするための
2. 設定resolve.symlinks = trueのWebPACKのコンフィグ内部でnext.config.js
3. libraryから要求された外部を操作してlibrary/node_modulesから要求されます（サーバー側のビルドでモジュールを正しく解決するため）
4. 行をコメントアウトするhttps://github.com/vercel/next.js/blob/f98e38c9b634b85e6679e7b5f953a9d98074cfc3/packages/next/build/webpack-config.ts#L601

これは意図したとおりに機能しますが、Next.jsがAppleのような重要なWebサイトのいくつかに電力を供給していることを考えると、これらの大きなプロジェクトで共有コードを管理するためによく使用されるモノリポジトリのより良いサポートを期待できますか？

私はこれらをいじってみましたが、HOCを使用するとエラーがスローされることがわかりましたが、コンポーネントをラッパーとして使用すると、正常に機能します。

誰かが興味を持っているなら、私はあなたがこれを再現できるリポジトリを持っています： next-components-hooks-error

HOCテスト-エラーをスローします

components/withPrivateRoute.js ->高階コンポーネント

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';
const withPrivateRoute = WrappedComponent => {

    const router = useRouter();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const user = localStorage.getItem('user');
        console.log(user);

        if (!user) {
            router.push('/login');
        } else {
            setLoading(false);
        }

    }, []);

    return ({ ...props }) => !loading && <WrappedComponent test={test} {...props}/>;
};

export default withPrivateRoute;

pages/hoc.js ->機能しません（HOCを使用したページ）

import React from 'react';
import withPrivateRoute from '../components/withPrivateRoute';

const HocTest = () => <p>Authorization HOC Test!</p>;

export default withPrivateRoute(HocTest);

ラッパーコンポーネントテスト

components/AuthLayout.js ->コンポーネント（ラッパー）

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

const AuthLayout = ({ children }) => {

    const router = useRouter();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const user = localStorage.getItem('user');
        console.log(user);

        if (!user) {
            router.push('/login');
        } else {
            setLoading(false);
        }

    }, []);

    return !loading && (
        <React.Fragment>
            {children}
        </React.Fragment>
    );
};

export default AuthLayout;

pages/wrapper.js ->ラッパーコンポーネントを使用したページ、動作します

import React from 'react';
import AuthLayout from '../components/AuthLayout';

const WrapperTest = () => (
    <AuthLayout>
        <p>Authorization Wrapper Test!</p>
    </AuthLayout>
);

export default WrapperTest;

ねえ@Timerこれに進歩はありますか？

解決策としてhttps://github.com/vercel/next.js/issues/9022#issuecomment-609969178を使用して問題を解決し
私の問題は、ライブラリリポジトリを使用し、アプリリポジトリでyarn linkすること
例
package.json

{
  "dependencies": {
    "next": "9.5.1",
    "myUILibrary": "git+ssh://[email protected]/MyRepo/library-web-ui.git#master",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

そして、 reactインストールされているローカルチェックアウトMyRepo/library-web-uiにyarn link myUILibraryします。

ソリューションを投稿してくれてありがとう@johot

3つのうち5つ🌟（はい！すべての星など！）

Rush + PNPMモノレポで@ wasd171と同じ経験を確認できます。 暫定的に~9.4.4を使用します。

Rush + PNPMとまったく同じ問題が発生しています👍

わかりました、この問題を引き起こす非常に愚かなエラーがありました：

import React, { useState } from 'React';

これは、RのEACT R EACTの代わりに、次のようになります。

import React, { useState } from 'react';

うん。 これは9.5.xでも見られます- 9.4.4へのダウングレードnext-siteでも再現できます

9.5.2ではこのエラーを修正できませんでした。 しかし、9.5.3では、トリックなしですべてが完全に機能します。

私はpnpmを使用していません。

私はあまりにも早く話しました。 9.5.3でも動作していないと思います。

私にとっては9.5.3で確実に機能しています。 🤷私はもう何が起こっているのかわかりません。

9.5.3は私には機能しません-同じエラー。 Rush + NPMを使用しています。 既知の回避策はありますか？ （ところで、それはもう約9.0.6ではないので、タイトルを更新しましょう）

参考までに、それが私の組織がnpmからyarnに移行することを決定した理由の1つ

フック付きのトランスパイルされたモジュールも私には機能しません。

ちなみに、 next-transpile-modulesとnpmを使用しているときにこの問題が発生した場合は、問題と考えられる解決策を説明するFAQセクションを作成しました： https ：

プロジェクトルートにyarnのバージョン解像度を手動で追加することで、これを解決することができました。 したがって、すべての反応依存関係をルートpackage.jsonに移動する代わりに、次の行を追加しました。

  "resolutions": {
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }

参照： https ：

私の場合、ローカルビルドが機能したのに対し、VercelでのビルドはInvalid hook callエラーを報告したことは注目に値します。

Next 10のキャッチオールページを使用して、 _app.jsで同様の問題を実験しました

ねえ、

私の場合、 npm link介してリンクされたモジュールをトランスパイルしました。

Reactのような依存関係は、複数のインスタンスをダウンロードしていたため、通常の依存関係ではなくpeerDependenciesとして含める必要があります。 したがって、無効なフックエラーが発生した場合は、次の手順を試してください。

1. メインプロジェクトの依存関係としてサードパーティモジュールを含めます。
2. npm installを実行して、すべてのモジュールをインストールします。
3. ターミナル/コンソールを開いてモジュールに移動し、 sudo npm linkます。
4. メインプロジェクトに戻り、 npm link @example/projectを実行します。 Visual Studio Codeを使用している場合は、node_modules内のモジュール名の近くに小さな矢印アイコンが表示されます。
5. npm run dev実行します。

繰り返しになりますが、@ example / projectに通常の依存関係ではなく、peerDependencyとしてReactを含める必要があります。

お役に立てば幸いです。

next.jsプロジェクトを含むmonorepoがあります。 storybookインストールした後、無効なフック呼び出しで同じ問題に直面しました。 @aenglの提案に従って問題を解決しました– resolutionsをルートレベルpackage.jsonに追加しました：

"resolutions": {
  "react": "^17.0.1",
  "react-dom": "^17.0.1"
}

ただし、クライアントとパッケージを追加した後、それが良い解決策になるかどうかはわかりません。