Gatsby: Неоднозначная ошибка StoreStateProvider для всех команд gatsby

У меня такая же проблема после обновления с 2.17.10 до 2.18.4.

Спасибо за сообщение!

Не могли бы вы также попробовать обновить gatsby-cli? Если это не поможет, было бы очень полезно, если бы вы могли предоставить нам репозиторий для воспроизведения.

Спасибо! :фиолетовое сердце:

На самом деле у меня нет глобального интерфейса командной строки. Проект полагается на команды npm run <command> которые, в свою очередь, выполняют gatsby <command> , используя локально установленную версию Gatsby.

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

Сегодня у меня была аналогичная проблема, у меня сработало обновление response, react-dom и gatsby, удаление node_modules и package-lock.json. Наконец, я снова запускаю npm install, и все работает нормально

Обновление react и react-dom , а также Gatsby, похоже, работает. Разве Гэтсби не должен перечислить правильные версии React, с которыми он совместим?

Вчера я потратил полдня, чтобы узнать, что в моем случае gatsby build /velop работает нормально, когда deps установлены с yarn.

Похоже, это связано с проблемой совместимости между React и Gatsby. Если вы устанавливаете зависимости с нуля (без файла блокировки), ваш менеджер пакетов (yarn или npm) просто получит последнюю (разрешенную ограничениями в package.json) версию.

В моем случае версия реакции была заблокирована в моем package-lock.json , поэтому она не была обновлена ​​вместе с Gatsby даже при новой установке.

У меня такая же проблема. Я безуспешно обновлял gatsby, gatsby-cli, react и react-dom. Есть ли окончательное решение?

РЕДАКТИРОВАТЬ: Я удалил gatsby и gatsby-cli и переустановил их по отдельности, и, похоже, это исправило. Странная проблема.

Я ударил по этой проблеме. Это потому, что установлено две версии react. Запустите npm ls react чтобы увидеть их. У меня есть версия response, указанная в моем package.json, и похоже, что gatsby / gatsby-cli 2.18.5 имеет другую версию реакции.

Я узнал о проблеме через эту страницу .

Все еще пытаюсь решить проблему ...

Я исправил проблему! Я использовал npm для удаления, а затем (пере) установку react , react-dom и gatsby . Я сделал это именно в таком порядке (я не верю, что порядок имеет значение, но, к вашему сведению, если это так).

npm ls react показывает две версии, но они одинаковы и помечены как "дедуплицированные":

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

Пока я разблокирован, у меня все еще есть проблемы:
1) Две версии реакции все еще существуют? (Я не уверен), даже если сейчас они той же версии
2) Будут ли будущие обновления Gatsby снова вызывать эту проблему?

У меня нет ответов, но я выражаю свои опасения команде Гэтсби, которую следует рассмотреть.

Я почти уверен, что npm ls всего лишь инструмент, который поможет вам понять дерево зависимостей вашего проекта. Вероятно, установлена ​​только одна копия react. Вы можете зайти в папку node_modules чтобы убедиться ...

У меня была такая же проблема после обновления Гэтсби. Я перешел на свою предыдущую версию «gatsby»: «^ 2.13.73», которая является несколькими версиями назад, но она устранила проблему.

Я исправил проблему! Я использовал npm для удаления, а затем (пере) установку react , react-dom и gatsby . Я сделал это именно в таком порядке (я не верю, что порядок имеет значение, но, к вашему сведению, если это так).

npm ls react показывает две версии, но они одинаковы и помечены как "дедуплицированные":

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

Это сработало для меня. Благодаря!

Я исправил проблему! Я использовал npm для удаления, а затем (пере) установку react , react-dom и gatsby . Я сделал это именно в таком порядке (я не верю, что порядок имеет значение, но, к вашему сведению, если это так).

npm ls react показывает две версии, но они одинаковы и помечены как "дедуплицированные":

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

То же самое, что и выше, это решение исправило и меня.

Я успешно решил проблему, обновив response и react-dom до 16.12.0, а затем обновив gatsby до 2.18.7.

Важно: убедитесь, что вы запустили «gatsby clean» после обновления react, react-dom и gatsby.

Обновление gatsby до 2.18.7, предложенное @clarmso, помогло мне (реакция на 16.12.0).

Также есть такая же проблема. Обновлены реакции и гэтсби, но по-прежнему возникают те же проблемы. Также пытался очистить после обновления, проблема не устранена.

"гэтсби": "^ 2.18.11"
"реагировать": "^ 16.12.0"
"react-dom": "^ 16.12.0"

Также есть такая же проблема. Обновлены реакции и гэтсби, но по-прежнему возникают те же проблемы. Также пытался очистить после обновления, проблема не устранена.

"гэтсби": "^ 2.18.11"
"реагировать": "^ 16.12.0"
"react-dom": "^ 16.12.0"

Мне то же. Пока вчера не заработало нормально

Я исправил проблему! Я использовал npm для удаления, а затем (пере) установку react , react-dom и gatsby . Я сделал это именно в таком порядке (я не верю, что порядок имеет значение, но, к вашему сведению, если это так).

npm ls react показывает две версии, но они одинаковы и помечены как "дедуплицированные":

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

Это сработало и для меня. Над этим работают для постоянного исправления?

Из-за этих обновлений я теперь получаю более странные предупреждения о StoreStateProvider и случайных вещах в Contentful, возвращающихся как null, даже если они есть.

Не уверен, что происходит, но пока мне придется оставить это на ветке

Также есть такая же проблема. Обновлены реакции и гэтсби, но по-прежнему возникают те же проблемы. Также пытался очистить после обновления, проблема не устранена.

"гэтсби": "^ 2.18.11"
"реагировать": "^ 16.12.0"
"react-dom": "^ 16.12.0"

Удалены папка node_modules и файл package-lock.json. Запускаем npm install и снова все в порядке.

Мой опыт был комбинацией вышеупомянутых комментариев. Поскольку я удалил папку node_modules и у меня были плагины gatsby, npm не работал. Установка пряжи окончательно исправила это.

Я исправил эту проблему, переустановив react , react-dom и gatsby . (https://github.com/gatsbyjs/gatsby/issues/19827#issuecomment-559898690)

до

react v16.11.0
react-dom v16.11.0
gatsby v2.17.11

после

react v16.12.0
react-dom v16.12.0
gatsby v2.18.12

Я исправил проблему! Я использовал npm для удаления, а затем (пере) установку react , react-dom и gatsby . Я сделал это именно в таком порядке (я не верю, что порядок имеет значение, но, к вашему сведению, если это так).

npm ls react показывает две версии, но они одинаковы и помечены как "дедуплицированные":

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

Спасибо, у меня сработало 🍾

Лично мне нужно удалить папку node_modules и package-lock.json
Затем я обновляю react , react-dom и gatsby :

"react": "^16.12.0",
"react-dom": "^16.12.0",
"gatsby": "^2.18.17",

Не забудьте обновить gatsby-cli до последней версии и запустить gatsby clean
После этого gatsby develop работает как шарм!

Я обнаружил, что проблема возникает только при использовании регистратора gatsby по умолчанию. Конкретный регистратор, который будет использоваться, контролируется через процесс env GATSBY_LOGGER . Проблема не воспроизводится, если регистратор по умолчанию изменяется, например, с помощью регистратора json.

export GATSBY_LOGGER=["json"]
npm i && npm run start 

При переключении на yurnalist / json gatsby logger исправил ошибку для меня

export GATSBY_LOGGER=["yurnalist"]

Я столкнулся с этой проблемой сегодня, когда запускал gatsby develop в старом проекте (последний раз запуск gatsby develop был осенью)

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

Могу подтвердить, что это сработало:

1. gatsby clean - начал с этого, чтобы посмотреть, решилась ли проблема
2. удаление node_modules
3. npm install

На данный момент это не было решено, поэтому я последовал совету:

1. npm uninstall react react-dom gatsby
2. npm install react react-dom gatsby

Это сработало отлично.

удален package-lock.json
удален node_modules
побежал npm я

работал у меня: D

Я исправил проблему! Я использовал npm для удаления, а затем (пере) установку react , react-dom и gatsby . Я сделал это именно в таком порядке (я не верю, что порядок имеет значение, но, к вашему сведению, если это так).

npm ls react показывает две версии, но они одинаковы и помечены как "дедуплицированные":

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

Спасибо за решение! Это было для меня главным препятствием. Сначала это не сработало, но я также переустановил gatsby-cli . После этого все работает нормально.

Описание

После обновления Gatsby с 2.17.7 до 2.18.4 выполнение любой команды gatsby вызывает ошибку. Однако контекста буквально нет.

> gatsby clean

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.

> gatsby build

The above error occurred in the <StoreStateProvider> component:

...

Окружающая обстановка

К сожалению, я не могу запустить gatsby info --clipboard , так как он вылетает с той же ошибкой StateStoreProvider что и другие команды. Я снова вернул свою версию Gatsby и выполнил эту команду. Обратите внимание, что версия Gatsby в выводе ниже неверна .

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.16 - C:\Python27\python.EXE
  Browsers:
    Edge: 44.18362.267.0
  npmPackages:
    gatsby: ^2.17.7 => 2.17.7
    gatsby-source-apiserver: ^2.1.4 => 2.1.4

Столкнулся с такой же проблемой! Решение, которое мне помогает, - установить пряжу и добавить поле разрешения в ваш package.json
https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

Ошибка возникла в результате внутреннего использования gatsby-cli react с ink для визуализации нового интерфейса. Причиной этого было несоответствие управления версиями между версией проекта react версией, необходимой для gatsby .

Насколько мне известно, установка gatsby-cli глобально (что мы рекомендуем) должна предотвратить эти проблемы. Тем не менее, закрываем это, поскольку в gatsby нет ничего, что нужно исправить в связи с этим.

Большое спасибо вам всем! 💜

Вчера я потратил полдня, чтобы узнать, что в моем случае gatsby build /velop работает нормально, когда deps установлены с yarn.

По сути, использование пряжи решило и мою проблему.

Просто запуск npm update решил проблему для меня

Насколько я знаю, глобальная установка gatsby-cli (что мы рекомендуем) должна предотвратить эти проблемы. Тем не менее, закрываем это, поскольку в gatsby нет ничего, что нужно исправить в связи с этим.

У меня это не сработало. Переключение регистратора на yurnalist или json как упомянуто выше, сделало. Я также удалил папки public , .cache и node_modules .

Вывод версии gatsby:

gatsby -v
Gatsby CLI version: 2.8.27
Gatsby version: 2.18.25

Вот мои зависимости, если интересно:

    "dependencies": {
        "@emotion/core": "^10.0.27",
        "@emotion/styled": "^10.0.27",
        "gatsby": "^2.18.25",
        "gatsby-image": "^2.2.39",
        "gatsby-plugin-emotion": "^4.1.21",
        "gatsby-plugin-google-analytics": "^2.1.33",
        "gatsby-plugin-manifest": "^2.2.37",
        "gatsby-plugin-netlify": "^2.1.31",
        "gatsby-plugin-offline": "^3.0.32",
        "gatsby-plugin-react-helmet": "^3.1.21",
        "gatsby-plugin-sharp": "^2.3.13",
        "gatsby-plugin-web-font-loader": "^1.0.4",
        "gatsby-remark-images": "^3.1.42",
        "gatsby-remark-prismjs": "^3.3.30",
        "gatsby-remark-reading-time": "^1.1.0",
        "gatsby-source-filesystem": "^2.1.46",
        "gatsby-transformer-remark": "^2.6.48",
        "gatsby-transformer-sharp": "^2.3.13",
        "prism-themes": "^1.3.0",
        "prismjs": "^1.19.0",
        "prop-types": "^15.7.2",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-helmet": "^5.2.1",
        "typeface-karla": "0.0.72"
    },

Вот ошибка, которую я получаю:

gatsby develop

 ERROR 

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.


 ERROR 

Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.


 ERROR 

UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.



  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could   happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

  - react.development.js:1590 resolveDispatcher
    [project]/[gatsby]/[react]/cjs/react.development.js:1590:13

  - react.development.js:1618 useState
    [project]/[gatsby]/[react]/cjs/react.development.js:1618:20

  - context.js:17 StoreStateProvider
    [project]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/context.js:17:41

  - react-reconciler.development.js:6036 renderWithHooks
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:6036:18

  - react-reconciler.development.js:8570 mountIndeterminateComponent
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:8570:13

  - react-reconciler.development.js:9938 beginWork$1
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:9938:16

  - react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:11563:10

  - react-reconciler.development.js:11740 invokeGuardedCallback
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:11740:31

  - react-reconciler.development.js:15778 beginWork$$1
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:15778:7

  - react-reconciler.development.js:14696 performUnitOfWork
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:14696:12

Отчаявшимся разработчикам, ищущим проблемы, которых вообще не должно быть, просто:

-удаление папки node_modules
-удалить package.lock.json
-запустить npm i

После получения кейса для репродукции:

Похоже, это происходит из-за того, что npm устанавливает определенную пользователем версию react в node_modules , тогда как gatsby-cli версия response будет установлена ​​в node_modules/gatsby/node_modules .

Поскольку ink похоже, устанавливается в node_modules его импорт react будет использовать другой импорт, чем импорт gatsby-cli , что приводит к случаю:

1. У вас может быть несколько копий React в одном приложении.
   См. Https://fb.me/react-invalid-hook-call для получения советов по отладке и устранению этой проблемы.

И https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react объясняет это довольно хорошо, но только предложение (использовать yarn resolutions не сработает, потому что это проблема с тем, как npm кажется, решает структуру node_modules а не пряжу)

Единственное решение (очень хакерское), которое приходит мне в голову прямо сейчас, - это переопределить разрешение модуля Node.js и жестко указать react на одно, определенное gatsby-cli . Это может быть нормально (так реализован PnP, по крайней мере, в yarn v1)

Еще несколько мыслей - другой вариант - использовать createRequireFromPath из gatsby-core-utils (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-core-utils/README .md # createrequirefrompath) и используйте его в gatsby-cli для загрузки той же версии реакции, что и ink (это значительно менее взломано и с меньшей вероятностью потенциальных проблем, которые могут возникнуть из-за перегрузки разрешения модуля Node.js) .

Единственная проблема с этим будет, если мы будем использовать сторонние компоненты ink ( ink-spinner - это только тот, который мы используем прямо сейчас), и они будут установлены в другом каталоге, чем ink .

Мы могли бы обойти эти потенциальные проблемы, поставив ink-spinner внутри gatsby-cli и убедившись, что не используете сторонние компоненты в качестве пакетов (и продавайте их все)

--- отредактировал:
нужно быть осторожным с указанным выше - ink требует node >= 16.8.0 поэтому нам нужно убедиться, что мы не используем функции из react >= 16.8.1 далее в gatsby-cli - поэтому требуются дополнительные исследования, но это многообещающе

Обновление: маршрут createRequireFromPath не будет работать, потому что npm просто не может "правильно" разрешить node_modules иерархию с учетом dependencies и peerDependencies предоставляется ink и gatsby-cli .

«Быстрое» изменение заключается в снижении требований к версии react (https://github.com/gatsbyjs/gatsby/pull/21522) для уменьшения количества сценариев, в которых может возникнуть эта проблема.

Но это не решает полностью. Для этого мы, скорее всего, объединим подходящую версию react в gatsby-cli для обходного пути npm неспособности правильно создать node_modules иерархию (или переопределить разрешение модуля Node.js, но это взлом, который может иметь непредвиденные последствия, поэтому я бы хотел избежать этого, если есть другие решения)

Еще одно обновление - мы внесли некоторые обновления в gatsby чтобы ограничить затронутые им проекты - оно было опубликовано в [email protected] - но оно все равно может потребовать от вас сброса / удаления package-lock.json .

Если это все еще не решает проблему - вероятно, у вас react / react-dom закреплено в package.json а версия ниже [email protected] - у нас пока нет исправления для этого, но мы рассматриваем его как следующий шаг - возможное обходное решение заключается в использовании yarn вместо npm на данный момент (не проверено).

Если кого-то интересуют технические детали, пожалуйста, проверьте комментарий к первоначальному запросу на вытягивание, который я пытался исправить - https://github.com/gatsbyjs/gatsby/pull/21508#issuecomment -586753917, и прямо сейчас я планирую использовать какой-нибудь сборщик (вероятно, microbundle ), чтобы объединить react в gatsby-cli чтобы он не пытался использовать react из node_modules и просто получил бы это включены непосредственно в gatsby-cli )

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

Моя установка:

Win10, Yarn установлен через .msi, Gatsby через yarn global . Использование yarn для всех проектов Gatsby.

Проблема:

Любой gatsby {command} приведет к ошибке StoreStateProvider , но npx gatsby {command} работает.

Решение:

1. Удалите .cache и /node_modules если они существуют.
2. Подтвердите, что react и react-dom обновлены, "^16.13.0" на момент написания этой статьи.
3. Запустите yarn global remove gatsby gatsby-cli чтобы удалить неработающий интерфейс командной строки.
4. Запустите yarn global add gatsby gatsby-cli чтобы переустановить интерфейс командной строки.
5. Запустите gatsby -v или другой gatsby {command} и он должен работать.

Вывод:

> gatsby -v
Gatsby CLI version: 2.9.0
Gatsby version: 2.19.23

Привет!

Этот вопрос утих. Жуткая тишина. 👻

У нас много проблем, поэтому в настоящее время мы закрываем их после 30 дней бездействия. Прошло как минимум 20 дней с момента последнего обновления здесь.
Если мы пропустили эту проблему или вы хотите оставить ее открытой, ответьте здесь. Вы также можете добавить ярлык «не устаревший», чтобы проблема оставалась открытой!
В качестве дружеского напоминания: лучший способ увидеть эту или любую другую исправленную проблему - это открыть запрос на слияние. Посетите gatsby.dev/contribute для получения дополнительной информации об открытии PR, проблемах с

Спасибо, что стали частью сообщества Гэтсби! 💪💜

Несмотря на то, что здесь мало активности, я не думаю, что он устарел

У меня была такая же проблема, я удалил свой json.lock и запустил команду yarn, чтобы обновить зависимости. и все вернулось к нормальной работе.

Я столкнулся с той же проблемой, которую решил, удалив папку «node_modules» и файл «package-lock.json», а затем команду «npm install».

Привет!

Этот вопрос утих. Жуткая тишина. 👻

У нас много проблем, поэтому в настоящее время мы закрываем их после 30 дней бездействия. Прошло как минимум 20 дней с момента последнего обновления здесь.
Если мы пропустили эту проблему или вы хотите оставить ее открытой, ответьте здесь. Вы также можете добавить ярлык «не устаревший», чтобы проблема оставалась открытой!
В качестве дружеского напоминания: лучший способ увидеть эту или любую другую исправленную проблему - это открыть запрос на слияние. Посетите gatsby.dev/contribute для получения дополнительной информации об открытии PR, проблемах с

Спасибо, что стали частью сообщества Гэтсби! 💪💜

Привет снова!

Прошло 30 дней с тех пор, как что-то случилось по этой проблеме, поэтому наш дружелюбный соседский робот (это я!) Собирается закрыть ее.
Имейте в виду, что я всего лишь робот, поэтому, если я закрыл эту проблему по ошибке, я буду HUMAN_EMOTION_SORRY . Пожалуйста, не стесняйтесь повторно открыть эту проблему или создать новую, если вам что-то еще нужно.
В качестве дружеского напоминания: лучший способ увидеть эту или любую другую исправленную проблему - это открыть запрос на слияние. Посетите gatsby.dev/contribute для получения дополнительной информации об открытии PR, проблемах с

Еще раз спасибо за то, что вы являетесь частью сообщества Гэтсби! 💪💜

: Little_frowning_face: Я все еще использую yurnalist качестве регистратора по умолчанию. Я никогда не видел здесь обновления, чтобы это было исправлено.

Отчаявшимся разработчикам, ищущим проблемы, которых вообще не должно быть, просто:

-удаление папки node_modules
-удалить package.lock.json
-запустить npm i

Это сработало для меня ...

У меня сработало удаление и повторная установка gatsby (v 2.23.11).

используйте установку пряжи, которая должна работать

Итак, что я сделал (прочитав все до сих пор), я изменил версию в файле package.json Gatsby 2.18.7 и запустил npm i Это сработало

Все еще сталкиваюсь с этой проблемой.

$: gatsby -v
Gatsby CLI version: 2.12.66
Gatsby version: 2.23.12

Действия по воспроизведению:

1. используйте gatsby new для создания нового проекта
2. установить sass с помощью npm i --save node-sass gatsby-plugin-sass
3. запустить gatsby develop

Результат

$ gatsby develop

 ERROR

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.


 ERROR

Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.


 ERROR

UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.



  Error: Invalid hook call. Hooks can only be called inside of the body of a fun  ction component. This could happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as Reac  t DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See https://fb.me/react-invalid-hook-call for tips about how to debug and fix   this problem.

  - react.development.js:1465 resolveDispatcher
    [bug]/[gatsby]/[react]/cjs/react.development.js:1465:13

  - react.development.js:1496 useState
    [bug]/[gatsby]/[react]/cjs/react.development.js:1496:20

  - context.js:21 StoreStateProvider
    [bug]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/context.js:21:49

  - react-reconciler.development.js:6036 renderWithHooks
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:6036:18

  - react-reconciler.development.js:8570 mountIndeterminateComponent
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:8570:13

  - react-reconciler.development.js:9938 beginWork$1
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:9938:16

  - react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:11563:10

  - react-reconciler.development.js:11740 invokeGuardedCallback
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:11740:31

  - react-reconciler.development.js:15778 beginWork$$1
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:15778:7

  - react-reconciler.development.js:14696 performUnitOfWork
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:14696:12

Это было исправлено путем выполнения инструкций, выполнив следующие действия, как описано выше ☝️

Итак, что я сделал (прочитав все до сих пор), я изменил версию в файле package.json Gatsby 2.18.7 и запустил
npm i Это сработало

Удаление папок .cache и node_modules и package-lock.json, а затем переустановка сработали для меня.

Я обновил пряжу, и у меня это сработало.

Удаление node_modules , кеша npm и файлов package-lock.json является непрактичным решением для того, что было бы критическим изменением каждый раз, когда добавляется плагин или какая-либо зависимость.

Основная проблема в моем случае заключалась в том, что новый проект, подготовленный с использованием gatsby new [path] [starter] неявно использует yarn для начальной загрузки зависимостей, если yarn установлен и доступен ( which yarn возвращает непустая строка). Последующие попытки установить плагины / зависимости с использованием npm завершатся неудачно с загадочными ошибками, как указано выше, потому что npm и yarn являются взаимоисключающими решениями для управления пакетами.

Было бы предпочтительнее, чтобы gatsby cli по умолчанию не использовал yarn без запроса параметра командной строки. Решением для меня было удалить yarn и повторно инициализировать проект, чтобы npm можно было использовать исключительно.

https://github.com/gatsbyjs/gatsby/pull/26887 (объединено вчера и выпущено сегодня), который удаляет react из зависимостей gatsby-cli и вместо этого связывает его при публикации пакетов - что это означает, что это не должно приводить к появлению странных множественных копий react в node_modules которые вызывают всевозможные проблемы.

@ duchess-toffee. https://github.com/gatsbyjs/gatsby/pull/26856 может показаться вам интересным (еще не объединено / выпущено) - хотя он не будет автоматически возвращаться с yarn на npm качестве диспетчера пакетов по умолчанию - вы сможете запустить gatsby options set pm npm

У меня возникла проблема, по-видимому, связанная с этой проблемой # 26998

Решено с использованием настраиваемой конфигурации веб-пакета для решения react :

`` `js
// файл: gatsby-node.js
const path = require ('путь')

module.exports = {
onCreateWebpackConfig: ({действия}) => {
actions.setWebpackConfig ({
разрешить: {
псевдоним: {
'реагировать': path.resolve (path.join (__ dirname, 'node_modules', 'react'))
}
}
})
}
}
`` ''

json // file: package.json { "dependencies": { "@mdx-js/mdx": "^1.6.18", "@mdx-js/react": "^1.6.18", "gatsby": "^2.24.64", "gatsby-plugin-layout": "^1.3.11", "gatsby-plugin-mdx": "^1.2.40", "gatsby-plugin-sass": "^2.3.12", "gatsby-source-filesystem": "^2.3.30", "gatsby-telemetry": "^1.3.35", "node-sass": "^4.14.1", "react": "^16.13.1", "react-dom": "^16.13.1", "react-ionicons-v5": "^1.2.0", "three": "^0.120.1" } }

Теперь все идет гладко.