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

[xingBri]

Bug Report

Version: 2.0.0-rc.68

The error occur when I npm run dev.
Go wrong in 2.0.0-rc.68, but not happen in 1.3.2.

Error Info:

Building app
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.

[rakannimer]

Hey @xingBri

Could you please provide more information and the whole error that was printed ?

[xingBri]

ok,
Like I said, I try to upgrade docz's version from 1.3.2 to 2.0.0-rc.68,
and the error occur as below, which doesn't happen in 1.3.2.

command: npm run dev

node version: v10.15.3
npm version: 6.4.1
related plugins version:

[rakannimer]

Could you try uninstalling docz-theme-default :

rm -rf .docz && yarn remove docz-theme-default # or npm uninstall docz-theme-default 

[xingBri]

Have tried, but doesn't work.😂
Same error.

[rakannimer]

Then I'm not sure what the problem is based on the information you provided.

If you could try to provide a repo with a repro of the problem that would be great.

[xingBri]

I just created a repo.
repo

npm i

npm run dev

Then the problem show.Please check if can help.

[rakannimer]

Thanks for providing a repro !

I see you're using docz-plugin-css to parse postcss code.

Starting from v2 you don't need this plugin, you can rely on a GatsbyJS plugin to take care of that :

1. Remove docz-plugin-css : yarn remove docz-plugin-css
2. Remove docz-plugin-css from doczrc.js plugins:

- import { css } from 'docz-plugin-css';
...
- plugins: [
-    css({
-      preprocessor: 'postcss',
-      loaderOpts: {
-        /* whatever your preprocessor loader accept */
-      },
-    }),
-  ],

1. Add gatsby-plugin-postcss : yarn add gatsby-plugin-postcss
2. Add a config (gatsby-config.js) to tell Gatsby to use this plugin :

// gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-postcss`],
};

1. Add a postcss config if you don't have one in your project

After doing these steps your provided repo works as expected.

[xingBri]

Thanks!
It works!

But it seems I have to use yarn.

At first, I use npm install, and the same problem occur.
Then I use yarn, it works.

[everdimension]

I'm having the exact same issue. I'm not using any additional docz plugins, though.
Basically, I have this:

{
  "devDependencies": {
    "docz": "^2.0.0-rc.71"
  }
}

I'm running docz as ./node_modules/.bin/docz dev

I have this output:

> ./node_modules/.bin/docz dev

Building app
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.

[rakannimer]

Hey @everdimension,

Could you provide a repro repo ?

Or failing that :

• your complete package.json
• the mdx file you're trying to render
• The JS/TS you're using in your mdx

[everdimension]

@rakannimer
Yep. I concluded that the error happens in the project that was generated by create-react-app.
Here's the reproduction repository: https://github.com/everdimension/docz-repro

I also tried to use docz in a project created from scratch, it worked fine. So I guess there are some conflicts with the libs used by create-react-app.

[chhuang]

Using yarn instead of npm i solved the issue.

[everdimension]

@chhuang Interestingly, it solves the issue for me, too, if I remove node_modules and reinstall them with yarn

But I believe that docz should of course support both npm and yarn.

I guess we should find out what exactly leads to this inconsistency. Perhaps docz depends on some package that has yarn-specific behavior.

The app itself works fine with npm.

[crusoexia]

Same error with [email protected] and npm

[crusoexia]

version ^2.0.0-rc.55 doesn't have this problem with npm.

[kinsomicrote]

@crusoexia did you delete your node_modules directory first? I tried that version and still ran into the same issues, I had to make use of yarn

[crusoexia]

@kinsomicrote for 2.0.0-rc.55, it worked after I remove the entire node_modules and reinstall with npm. For 2.0.0-rc.73, it never worked for whatever way I tried.

[kinsomicrote]

Thanks for sharing, had to revert to version 1.3.2 to get it to work.

[kinsomicrote]

Is it possible that this related to this which happens with gatsby?

https://github.com/gatsbyjs/gatsby/issues/19064

[bkegley]

I ran into this same issue and as @kinsomicrote mentioned it seemed to be related to the Gatsby issue. Removing node_modules, yarn-lock and reinstalling with yarn fixed it for me.

[ForkInSpace]

@chhuang Interestingly, it solves the issue for me, too, if I remove node_modules and reinstall them with yarn

But I believe that docz should of course support both npm and yarn.

I guess we should find out what exactly leads to this inconsistency. Perhaps docz depends on some package that has yarn-specific behavior.

The app itself works fine with npm.

Thanks! this worked for me

[carloscarvallo]

how can I get this working with npm?... It's not possible for me to migrate to yarn right now

[samirergaibi]

Removing node_modules & package.lock and installing it with yarn worked for me aswell. Really weird, does anyone know what would cause it to work with yarn but not npm?

[AndreGeng]

having this problem with docz 2.2.0, is there a work around using npm?...can not switch to yarn currently

[nkicinska]

With npm upgrading react and react-dom to 16.12.0 and reinstalling node_modules fixed the problem for me

[kevinbluer]

Thanks @nkicinska, that worked for me too.

[wis]

damn, so weird that deleting node_modules and switching to yarn only fixes it,
this is the sort of issues I hate, infrastructure/tooling stack issues that are hard to trace the cause of, it could be npm caching or anything else.
and what was the cause? upgrading a package by bumping up a version in package.json and npm iing.

here is the full output:
```
❯ gatsby develop ─╯

ERROR

The above error occurred in the 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
  [gatsby-ionic]/[gatsby]/[react]/cjs/react.development.js:1590:13

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

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

• react-reconciler.development.js:6036 renderWithHooks
  [gatsby-ionic]/[react-reconciler]/cjs/react-reconciler.development.js:6036:18

• react-reconciler.development.js:8570 mountIndeterminateComponent
  [gatsby-ionic]/[react-reconciler]/cjs/react-reconciler.development.js:8570:13

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

• react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl
  [gatsby-ionic]/[react-reconciler]/cjs/react-reconciler.development.js:11563:10

• react-reconciler.development.js:11740 invokeGuardedCallback
  [gatsby-ionic]/[react-reconciler]/cjs/react-reconciler.development.js:11740:31

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

• react-reconciler.development.js:14696 performUnitOfWork
  [gatsby-ionic]/[react-reconciler]/cjs/react-reconciler.development.js:14696:12
  ```
  PS: I'm using only Gatsby, not docz.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kenchoong]

It works if I using yarn but using npm it failed to build