@baldurh Это действительно очень редко, при использовании таких платформ, как Now, развертывается только папка, в которой находится приложение Next.js, так лучше, потому что в противном случае вам сначала нужно было бы узнать обо всех внешних модулях. 2 лучших альтернативы:

• Переместите все в одно приложение Next.js
• Используйте lerna или частные пакеты npm или аналогичные

@lfades спасибо за ответ. Ни один из этих вариантов нам недоступен, и мы не выполняем развертывание в Now или что-либо подобное. Изначально мы использовали рабочие области yarn, но затем мы интегрировали bazel, и это не очень хорошо сочетается с характером символических ссылок рабочих областей yarn. Пакеты Npm означают, что мы не можем разрабатывать общие модули так быстро, как нам хотелось бы. Это слишком много накладных расходов.

@baldurh Просто столкнулся с этим с next-i18next, поскольку у нас есть вложенные приложения NextJs в качестве примеров. Вы нашли обходной путь?

@isaachinman У нас нет. Нам еще не удалось перейти на 9.x по другим причинам, поэтому я не рассматривал это. Кто-нибудь знает, где может быть код, влияющий на это? Я бы хотел лучше разобраться в проблеме.

У меня еще не было времени вникать в это, но если кому-то понадобится репро: clone next-i18next , cd в examples/simple и обновить версию NextJs до> = 9.0.6.

Сейчас он на 9.0.3, так что технически это критическое изменение в патче.

Недавно у меня возникла аналогичная ошибка, и мне пришлось перейти на 9.0.5 (и React 16.8.x). Я как бы сузил проблему, которую я видел, до использования Next для многомерных выражений, но у меня нет никаких конкретных подробностей, кроме этого.

Я столкнулся с той же проблемой с довольно большим проектом, основанным на Next и next-i18next.

Я видел, что эта ошибка может быть вызвана 3 причинами:

1. Несоответствующие версии react и react-dom - не применяются к моему приложению
2. Импортированы 2 версии react-dom - не применяются к моему приложению
3. Неправильное использование хуков React - я не использую хуки, но некоторые библиотеки есть, и похоже, что это работает для всех остальных.

Странно то, что это происходит только на продакшене.

@timneutkens @Timer извините за то, что внесли свой вклад. Как вы думаете, можно ли это исправить? Нам всем нужно найти обходные пути? На данный момент это довольно серьезный блокировщик для нас. Благодарю.

Похоже, вы использовали псевдоним react но не react-dom . Вы можете это попробовать?

@Timer Спасибо. Я пробовал, но безрезультатно

Я только что смог решить эту проблему в репро , переместив зависимости react и react-dom один уровень вверх. Я просто внес изменения, если кто-то хочет попробовать. Я не пробовал это в нашем реальном проекте, но надеюсь, что он сработает для нас. Возможно, это поможет решить проблему и для @jaredcwhite и @felixmosh ?

@Timer У меня это работает в нашем проекте, но я также должен был убедиться, что у меня нет других зависимостей, которые устанавливают react в папку node_modules наших проектов. В нашем случае это было связано со сборником рассказов ( yarn why react помогли 😄). Мы все равно планировали переместить сборник рассказов в отдельный проект, поэтому я думаю, что это решение сработает в нашем случае.

О да. Неправильно опубликованные пакеты node_module вызовут это (с зависимостями от react(-dom|) вместо одноранговых зависимостей).

Я только что смог решить эту проблему в репро , переместив зависимости react и react-dom один уровень вверх. Я просто внес изменения, если кто-то хочет попробовать. Я не пробовал это в нашем реальном проекте, но надеюсь, что он сработает для нас. Возможно, это поможет решить проблему и для @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 для справки, поскольку я нашел эти ссылки до этой проблемы.

Привет, есть новости по этой проблеме? У нас есть монорепозиторий, и мы сталкиваемся именно с этой проблемой.

Встречаюсь с той же проблемой.
v9.0.5 отлично работает с хуками для компонентов, импортированных вне rootFolder.

Начиная с 9.0.6 по 9.1.6-canary.5 такие же проблемы.

Проблема возникает только на стороне сервера. Если SSR отключен (например, загрузка внешнего компонента через динамический ), то все работает, как ожидалось, для версий> = 9.0.6.

@nodkz - это проблема с разрешением

@Timer эта проблема перешла на "следующую" веху примерно для 6 версий, это не позволяет мне обновиться до последней версии.

Я потратил на это целый день проживания, не знаю, в чем проблема, даже попробовал обходной путь (который не сработал).

Вам нужна помощь в расследовании какого-либо направления?
У вас есть какие-нибудь предчувствия по этому поводу?
Почему это происходит только при производственной сборке?
Что было изменено с 9.0.5 на 9.0.6 что может быть связано с этим?

Спасибо

Я думаю, что нашел проблему !!!
Я думаю, что это комбинация двух вещей:

1. использование символьной ссылки для node_modules
2. i18next / react-i18next не были внешними в серверных пакетах !!
   
   В моем случае, когда он взрывается при производственной сборке, он жалуется на i18next useTranslation hook ...

Итак, я исследовал причину, по которой внутри серверных пакетов вообще есть модули узлов (лучшая практика для серверных пакетов - сделать их внешними).

Я видел, что next имеет некоторые исключения для следующей библиотеки (почему?), Забавно то, что это регулярное выражение захватывает все библиотеки, заканчивающиеся на next/dist/ , как i18next & react-i18next !!

Итак, если вы измените это:

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

в

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

Пакет сервера исключит все библиотеки, которые не являются next и заканчиваются на next/dist , и это решило проблему!

Для меня главная проблема - это новый способ решения запросов: https://github.com/zeit/next.js/blob/canary/packages/next/build/webpack-config.ts#L446

Поскольку у нас есть компоненты вне корня проекта, разрешение запроса вызовет ошибку, в результате чего 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
• Добавлены пакеты как внешние в конфигурацию моего веб-пакета
• Добавлены псевдонимы разрешения для этих пакетов в моей следующей конфигурации
• Перекомпилировал модуль библиотеки компонентов с помощью 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
  ]
}

Я вижу точно такие же проблемы, ни один из способов пока не помог.

Мой пакет работает, если я его опубликую и установлю (и использую resolve.alias в моем next.config.js).

Но запуск dev-сборки с пакетом, связанным через 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 и настроили yarn workspaces => https://classic.yarnpkg.com/en/docs/workspaces/

Это позволяет обойти проблему, так как общие зависимости будут перемещены на верхний уровень ./node_modules папка, а ./package/our-package-name/node_modules останутся в основном пустыми.

Итак, теперь, когда мы связываем наш пакет, следующий больше не будет задействовать вторую версию реакции (поскольку ее нет в нашей папке 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...

Наш альтернативный обходной путь, не требующий настройки

• Свяжите все символы, кроме 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 (и response-dom, если он им нужен).

@timneutkens

Нет, это не всегда так. У меня точно есть react и react-dom как одноранговые зависимости. Проблема все еще возникает, если вы, например, символически связываете свою библиотеку с проектом nextjs. Затем происходит то, что у вас будет папка node_modules внутри вашей библиотеки (по крайней мере, если вы когда-либо запускали npm i или npm link в этой папке библиотеки).

Когда реакция будет разрешена из этой папки библиотеки, она перейдет в ту, что находится в этой папке node_modules и вы получите двойные копии реакции, вызывающей проблему. Если я удалю папку node_modules внутри своей библиотеки или установлю ее с использованием чего-то другого, кроме npm link тогда да, конечно, это работает (если вы используете зависимости от одноранговых узлов или точно такую ​​же версию реакции).

Итак, чтобы решить эту проблему во время разработки, вы хотите иметь возможность реагировать на псевдоним, чтобы заставить всех использовать одну и ту же версию. Из-за проблем, упомянутых здесь, это не влияет на текущую версию NextJS без добавления части config.externals ... (по крайней мере, для меня), вероятно, как здесь упоминалось, из-за некоторых изменений, как указано здесь # 8739?

Похожая проблема возникает со мной, но (потенциально) из-за библиотеки material-ui (как указано в # 10162) моим временным исправлением на данный момент было просто добавить npm run clean в мои preserve и dev скрипты, как описано здесь:
https://github.com/zeit/next.js/issues/10162#issuecomment -612501431

@timneutkens Я понимаю, что реальная проблема

@ ryan-0 Есть ли у вас какие-то особые настройки? Был бы удивлен, если материал, который не указан в списке пользовательского интерфейса, отреагировал бы как равноправный заместитель? Например, вы используете очень старую версию реакции или какую-нибудь символическую ссылку?

без специальной настройки ... без символической ссылки и реакции 16.13.1 -> у нас есть некоторые другие проблемы, которые могут вызывать справедливость проблемы, но, по крайней мере, в соответствии с этим воспроизведением, похоже, что это может быть связано с material-ui / core (которые мы также используем):
https://github.com/zeit/next.js/issues/10162

@ ryan-0 есть ли папка node_modules с реакцией внутри вашей папки material-ui?

Также начинает работать после запуска npm dedupe?

нет, не похоже, что есть вложенная папка узлов, поэтому я не понимаю, как происходит ошибка. и никакие 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. Его node_modules не содержит копию react , но корень monorepo делает. Я бы не ожидал, что это будет иметь значение, пока используется resolve.alias , но, к сожалению, это не так. После удаления копии react из корня monorepo я теперь получаю ошибку Cannot find module 'react' .

Кто-то нашел для этого хорошее решение?

У меня есть связанная следующая библиотека, которую я использую next-transpile-modules чтобы добавить ее в мой «потребительский» проект. Я добавил псевдоним react в свой next.config.json как указано в их документах, но этого было недостаточно. Я все еще получаю сообщение об ошибке дублированных зависимостей для React.

Вы можете попробовать использовать relative-deps от @mweststrate

Кто-то нашел для этого хорошее решение?

У меня есть связанная следующая библиотека, которую я использую next-transpile-modules чтобы добавить ее в мой «потребительский» проект. Я добавил псевдоним react в свой next.config.json как указано в их документах, но этого было недостаточно. Я все еще получаю сообщение об ошибке дублированных зависимостей для React.

Да, смотрите мой пост выше, вам нужно добавить часть config.externals в мой образец, тогда псевдоним снова начнет работать

@johot Я пробовал ваше решение, но оно не сработало для меня. Я начал получать некоторые странные ошибки, но в основном это: cannot destructure property 'query' of 'Object(...)(...)' as it is null после попытки вашего решения. В этом случае объект, рассматриваемый как null, - это useRouter из next/router .

@aleclarson Спасибо за подсказку. Я попробую, если не смогу заставить его работать при следующей настройке. Вы им пользуетесь сейчас?

Если вы используете next-transpile-modules и Yarn, решение довольно простое: https://github.com/martpie/next-transpile-modules#i -have-Trouble-with-duplicated-dependencies-or-the -invalid-hook-call-error-in-реагировать

Если вы используете 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-scene

В 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 , но теперь с этой ошибкой я не думаю, что буду использовать эту службу

Могу подтвердить, что это связано с PR https://github.com/vercel/next.js/pull/8739 от @arcanis
Мы используем установку monorepo с Rush и 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) . Однако похоже, что [email protected], который используется в https://github.com/vercel/next.js/blob/f98e38c9b634b85e6679e7b5f953a9d98074cfc3/packages/next/lib/resolve-request.ts#L16 , не соответствует текущему поведение Node.js по умолчанию, сохранив символические ссылки.

В итоге мы получили следующее:

1. Настройка модулей next-transpile для транспиляции нашего кода в 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, можно ли ожидать лучшей поддержки монорепозиториев, которые часто используются для управления общим кодом в этих больших проектах?

Я играл с ними и обнаружил, что когда я использую HOC, он выдает ошибку, но если я использую компонент в качестве оболочки, он работает нормально.

Если кому-то интересно, у меня есть репо, где вы можете воспроизвести это: next-components-hooks-error

HOC Test - выдает ошибку

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 за публикацию вашего решения

5 🌟 из 3 (да! Все звезды и не только!)

Я могу подтвердить тот же опыт, что и @ wasd171 в ~9.4.4 .

У меня такая же проблема с Rush + PNPM 👍

хорошо, у меня была очень глупая ошибка, вызывающая эту проблему:

import React, { useState } from 'React';

Она должна быть г 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 . Просто (к сожалению) играет намного лучше. Этот ход раздражает, но сейчас мы вполне довольны.

Транспортированные модули с крючками у меня тоже не работают.

Кстати, всем, кто сталкивается с этой проблемой при использовании next-transpile-modules и npm , я написал раздел часто задаваемых вопросов, в котором объясняется проблема и возможные решения: https://www.npmjs.com/package/ next-transpile-modules # i -have-problem- with-duplicated-dependencies-or-the-invalid-hook-call-error-in-react

Мне удалось решить эту проблему, вручную добавив разрешение версии для пряжи в корень проекта. Поэтому вместо перемещения всех зависимостей реакции в корень package.json я добавил следующие строки:

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

См .: https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

Стоит отметить, что в моем случае локальные сборки работали, тогда как сборки на Vercel сообщали об ошибке Invalid hook call .

Я экспериментировал с аналогичной проблемой в _app.js со всей страницей в Next 10

Привет,

В моем случае у меня были транспилированные модули, которые также были связаны через npm link .

Зависимости, такие как React, должны быть включены как peerDependencies вместо обычных зависимостей, потому что он загружал несколько экземпляров. Итак, если у вас возникла ошибка неверных хуков, попробуйте следующие шаги:

1. Включите сторонний модуль в качестве зависимости в свой основной проект.
2. Запустите npm install чтобы установить все ваши модули.
3. Откройте свой терминал / консоль и перейдите к модулю, затем запустите sudo npm link .
4. Вернитесь к своему основному проекту и запустите npm link @example/project . Вы должны увидеть маленький значок стрелки рядом с именем вашего модуля внутри node_modules, если вы используете Visual Studio Code.
5. Запустите npm run dev .

Опять же, вы должны включить React как peerDependency вместо обычной зависимости в свой @ example / project.

Надеюсь, это поможет!

У меня есть монорепозиторий с проектом next.js внутри. Столкнулся с той же проблемой с неверным вызовом ловушки после установки storybook . Проблема была решена, следуя предложению @aengl - я добавил resolutions на корневой уровень package.json :

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

Я не уверен, что это будет хорошим решением, когда мы добавим больше клиентов и пакетов.