@baldurh这确实非常罕见，当使用像Now这样的平台时，仅部署Next.js应用程序所在的文件夹时，这样会更好，因为否则您将需要首先了解所有外部模块。 2个更好的选择是：

• 将所有内容移至单个Next.js应用程序
• 使用lerna或私有npm软件包或类似的软件包

@lfades感谢您的回复。 这些选项都不可用，我们也不会部署到Now或类似的版本。 我们最初使用的是纱线工作区，但后来我们集成了遮光罩，它与纱线工作区的符号链接性质不能很好地配合使用。 Npm软件包意味着我们无法像我们期望的那样快速开发共享模块。 这只是太多的开销。

@baldurh刚好与next-i18next碰到了这一点，因为我们以嵌套NextJs应用为例。 您找到解决方法了吗？

@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依赖性一级。 如果有人要尝试，我只是推送了更改。 我尚未在实际项目中尝试过它，但希望它对我们有用。 也许这可以解决@isaachinman ， @jaredcwhite和@felixmosh的问题？

@Timer我在项目中使用了此功能，但还必须确保没有其他依赖项将react到项目的node_modules文件夹中。 在我们的案例中，它与故事书有关（ yarn why react很有帮助😄）。 无论如何，我们都计划将故事书移到一个单独的项目中，因此我认为这种解决方案适用于我们的情况。

是的。 发布不正确的node_module软件包将导致此问题（依赖于react(-dom|)而不是同级依赖）。

我能够在刚才解决此摄制通过移动react和react-dom依赖性一级。 如果有人要尝试，我只是推送了更改。 我尚未在实际项目中尝试过它，但希望它对我们有用。 也许这可以解决@isaachinman ， @jaredcwhite和@felixmosh的问题？

您能否详细说明在此存储库中所做的更改？

我运行npm ls react或npm ls react-dom我只有列表中的下一个应用程序。

@felixmosh对不起，昨天的推送对我显然失败了。 现在更改肯定存在😅我将react和react-dom从app文件夹移至根文件夹，因此现在您需要在两个文件夹中都执行yarn/npm install app文件夹和根文件夹，然后再运行app 。 希望这足够清楚。

我们将必须对构建系统进行一些更改才能使其在生产中正常工作，因此该解决方案仍然对我们来说有点麻烦😝

感谢您的解释，我将等待Next团队解决它，听起来有点怪异，无法在我的单存储区的根上放置反应部门...

@felixmosh是的，我有点同意你的看法。 但是，如果您使用的是类似纱线工作区的工具，那正是该工具的作用。 如果您在两个或多个项目中具有相同的依赖关系，它将把依赖关系提升到根目录。 很好，因为它可以确保所有项目中的依赖项版本相同。 但是，如果您没有这样的工具，则必须自己进行管理，这确实有点尴尬。 我同意最好的解决方案是Next.js团队看看并为我们所有人解决此问题😇🙏🏻

遇到相同的问题，并将react和react-dom提升一个级别并从根目录运行服务器是当前在9.1.5上可行的唯一解决方法。 链接https://github.com/facebook/react/issues/13991和https://github.com/facebook/react/issues/15315#issuecomment -479802153供参考，因为我在此问题之前找到了那些链接。

嗨，您对此问题有任何更新吗？ 我们有一个monorepo，我们正在遇到这个确切的问题。

遇到同样的问题。
v9.0.5可以很好地与在rootFolder外部导入的组件的钩子配合使用。

从9.0.6到9.1.6-canary.5，也有同样的问题。

该问题仅发生在服务器端。 如果禁用了SSR（例如，通过dynamic加载外部组件），则所有版本> = 9.0.6都将按预期工作。

@nodkz这是

@Timer，此问题移至大约6个版本的“下一个”里程碑，它使我无法更新到最新版本。

我浪费了整整一天的时间在它上面，不知道它的根源是什么，甚至尝试了解决方法（没有用）。

您需要调查任何方向的帮助吗？
您对此有什么直觉吗？
为什么这仅在生产环境中发生？
从9.0.5更改9.0.6原因可能与此相关？

谢谢x

我认为我已经找到问题了！！！
我认为这是两件事的结合：

1. sym-link在node_modules中的使用
2. i18next / react-i18next不在服务器捆绑包中！！
   
   就我而言，当它在生产版本中爆炸时，它抱怨i18next useTranslation钩子...

因此，我研究了服务器捆绑包中根本没有节点模块的原因（服务器捆绑包的最佳做法是将其作为外部组件）。

我看到next的下一个lib有一些例外（为什么？），有趣的是，此regex捕获了所有以next/dist/结尾的lib，就像i18next和react-i18next那样!!

因此，如果您更改此设置：

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

进入

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

服务器捆绑将排除所有不是next且以next/dist结尾的库，它解决了该问题！

对我而言，主要问题是解决请求的新方式： https :

由于我们在项目根目录之外有组件，因此请求解析将引发错误，导致react捆绑在服务器块中。 这就是为什么我们在服务器上收到Invalid hook call错误的原因。

您链接的表达式中的@baldurh context由webpack提供，与编译根目录（您的项目目录）不同。
它始终是发出需求的文件目录。

对。 我已对此进行了修补，以使其目前可用于我们。 我认为我们最终将更改代码的结构，以便在较高目录级别上共享依赖项。 但是，即使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％相同，路径也会不同

更新：

我们设法通过将程序包转换为使用纱线工作区来解决该问题（即使我们的回购仅包含一个程序包）。
我们将代码从./src移至./package/our-package-name/src并设置纱线工作区=> https://classic.yarnpkg.com/en/docs/workspaces/

可以解决此问题，因为这会将常见的依赖关系提升到顶层./node_modules文件夹，而./package/我们的程序包名称/ node_modules基本上保持空白。

因此，现在当我们链接程序包时，下一步将不再引入第二个版本的react（因为它不在我们的程序包node_modules文件夹中），并且一切正常。

我有同样的问题。 ¬'

通常，我们违反了行为准则，因此宣誓就职。

抱歉，我对此错误感到生气。 实际上，我非常喜欢Next.JS。 但是无法使用它，因为这个问题很无聊。

使用外部本地包和next-transpile-modules时，我们将面临此问题。

由于我们要坚持使用最新版本的Next.js，如果找到根本原因，我将尝试向Next.js提交补丁。

安装[email protected]后，我遇到了同样的问题
我的依赖项是[email protected] ， [email protected] ， [email protected] ，当然还有许多其他库（但是在安装next-i18next之前一切正常。） 如果有人有解决方法，那可能很好：+1：

感谢您发布此问题，我在符号链接我们的设计系统（反应组件库）包时也遇到了问题。 我们还使用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...

我们不需要配置的替代解决方法

• Symlink软件包中除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而他们在react上应该有peerDependency react （如果需要，可以使用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版本中没有影响（可能是由于某些更改而已在此处提到的人），如此处＃8739所述？

我遇到了类似的问题，但是（可能）由于material-ui库（如＃10162中所述），我目前的临时解决方法是在preserve添加npm run clean dev脚本，如下所示：
https://github.com/zeit/next.js/issues/10162#issuecomment -612501431

@timneutkens我了解真正的问题在于这些依赖项如何列出自己的dep（deps与peer-dep），但是知道我们可以在自己的应用程序中做什么以更永久地解决此问题吗？

@ ryan-0您是否有任何特殊设置？ 如果材料Ui没有列出作为同伴的副手会感到惊讶吗？ 像您使用的是非常旧的react版本或symlink一样吗？

没有特殊的设置..没有符号链接并做出反应16.13.1 ->我们还有一些其他的问题可能会导致问题解决，但至少根据该repro看来，这似乎与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
  }
}

我将yarn link与Lerna monorepo中存在的本地包一起使用。 它的node_modules不包含副本react ，但monorepo根一样。 只要使用resolve.alias ，我不希望这会有所作为，但是不幸的是事实并非如此。 从monorepo根目录中删除react的副本后，我现在遇到了Cannot find module 'react'错误。

有人找到了一个好的解决方案吗？

我有一个链接的下一个库，我正在使用next-transpile-modules将其添加到“消费者”项目中。 我在他们的文档中提到的next.config.json添加了react别名，但这还不够。 我仍然遇到React重复依赖项的错误。

您可以尝试使用@mweststrate的relative-deps

有人找到了一个好的解决方案吗？

我有一个链接的下一个库，我正在使用next-transpile-modules将其添加到“消费者”项目中。 我在他们的文档中提到的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 。 我有一个gulp任务，监视文件更改并将文件复制到我的dist文件夹，然后将更改推送到yalc存储。

在我的“消费者”中，我修改了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
    }

因此，下一步可以基于tsconfig.json paths解析路径。 更多信息在这里。

长话短说：将yalc + next-transpile-modules大大改善我的本地开发设置。 没有重复的依赖关系和奇怪的错误。 使用yarn add直接添加模块并将模块与yalc行为几乎相同。

如果您使用的是依赖styled-components的本地链接库，请参考以下内容： https: //styled-components.com/docs/faqs#linking -in-an-ssr-scenario

在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 （使用npm无效）并使用https://github.com/vercel/next.js/ Issues / 9022＃issuecomment -616169466

对此是否有解决方案？

刚完全陷在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的PR https://github.com/vercel/next.js/pull/8739有关
我们使用了monorepo设置拉什和PNPM消除所提到的PR被合并的原因。 这也意味着该点，在取得@timneutkens https://github.com/vercel/next.js/issues/9022#issuecomment -610255555并不适用于我们，我们有以下结构：

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]通过保留符号链接来实现默认的Node.js行为。

我们得出以下结论：

1. 设置next-transpile-modules以在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等一些重要网站提供支持，这可以按预期方式工作，但会让人感到不安，是否有可能期望对通常用于在那些大型项目中管理共享代码的monorepos提供更好的支持？

我一直在研究这些内容，发现使用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"
  }
}

而我yarn link myUILibrary到我的本地结帐MyRepo/library-web-ui ，其中也安装了react 。

非常感谢@johot发布您的解决方案

3分之5（（是！所有星星，以及更多！）

我可以在Rush + PNPM monorepo中确认与@ 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。 有已知的解决方法吗？ （btw让我们更新标题，因为它不再是9.0.6了）

仅供参考，这就是我的组织决定从npm迁移到yarn 。 它只是（不幸地）发挥了更好的作用。 此举很烦人，但我们现在很高兴。

带挂钩的已编译模块对我也不起作用。

顺便说一句，对于使用next-transpile-modules和npm时遇到此问题的任何人，我写了一个FAQ部分来解释该问题和潜在的解决方案： https :

我设法通过在项目根目录中手动添加yarn的版本分辨率来解决此问题。 因此，我没有将所有react依赖项移动到根package.json ，而是添加了以下几行：

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

请参阅： https ：

值得注意的是，在我的情况下，本地版本有效，而Vercel上的版本报告了Invalid hook call错误。

我在_app.js尝试了类似的问题，并在接下来的10个页面中使用了全部页面

嘿，

就我而言，我已经编译了也通过npm link链接的模块。

像React这样的依赖项需要包含在peerDependencies而不是常规的依赖项，因为它正在下载多个实例。 因此，如果遇到无效的挂钩错误，请尝试以下步骤：

1. 将第三方模块作为依赖项包含在主项目中。
2. 运行npm install来安装所有模块。
3. 打开终端/控制台并导航到模块，然后运行sudo npm link 。
4. 导航回到您的主项目并运行npm link @example/project 。 如果您使用的是Visual Studio代码，则在node_modules中的模块名称附近应该会看到一个小箭头图标。
5. 运行您的npm run dev 。

同样，您必须在@ example / project中将React作为peerDependency而非常规依赖项包含在内。

希望对您有所帮助！

我有一个带有next.js项目的monorepo。 在安装storybook之后面临无效钩子调用的相同问题。 通过遵循@aengl的建议，问题得到了解决–我将resolutions到根级别package.json ：

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

我不确定，一旦我们添加更多的客户端和软件包，这是否将是一个好的解决方案。