Failed We've encountered an error: Minified React error #31

[odyslam]

Description

I get the following error every time I run gatsby develop.

Gatsby clean hasn't solved it.

I don't get any other info, so it's really hard to understand why. There are some dependency issues, so it could be that. (I didn't use to have this issue).

success open and validate gatsby-configs - 0.081s
success load plugins - 1.531s
success onPreInit - 0.052s
success initialize cache - 0.008s
success copy gatsby files - 0.116s
success onPreBootstrap - 0.018s
success createSchemaCustomization - 0.005s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.525s
success building schema - 0.384s
failed We've encountered an error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bdata%7D&args[]= for the full message or use the non-minified dev
environment for full errors and additional helpful warnings.

Describe the issue that you're seeing.

Steps to reproduce

run gatsby develop

Environment

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 15.11.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.14.0 - /usr/local/bin/npm
  Languages:
    Python: 3.9.2 - /usr/local/bin/python
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 88.0.1
    Safari: 14.1
  npmPackages:
    gatsby: ^3.2.1 => 3.6.2
    gatsby-plugin-feed: ^3.3.0 => 3.6.0
    gatsby-plugin-google-analytics: ^3.3.0 => 3.6.0
    gatsby-plugin-image: ^1.3.0 => 1.6.0
    gatsby-plugin-manifest: ^3.3.0 => 3.6.0
    gatsby-plugin-mdx: ^2.3.0 => 2.6.0
    gatsby-plugin-mdx-frontmatter: ^0.0.4 => 0.0.4
    gatsby-plugin-page-creator: ^3.3.0 => 3.6.0
    gatsby-plugin-postcss: ^4.3.0 => 4.6.0
    gatsby-plugin-react-helmet: ^4.3.0 => 4.6.0
    gatsby-plugin-sharp: ^3.4.1 => 3.6.0
    gatsby-plugin-sitemap: ^3.3.0 => 3.3.0
    gatsby-remark-images: ^5.1.0 => 5.3.0
    gatsby-remark-prismjs: ^5.0.0 => 5.3.0
    gatsby-source-filesystem: ^3.3.0 => 3.6.0
    gatsby-transformer-remark: ^4.1.0 => 4.3.0
    gatsby-transformer-sharp: ^3.3.0 => 3.6.0
  npmGlobalPackages:
    gatsby-cli: 3.6.0

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[odyslam]

Just a quick update that might be related. This is the output of npm update:

npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN   graphql@"^15.4.0" from [email protected]
npm WARN   node_modules/gatsby
npm WARN     gatsby@"^3.2.1" from the root project
npm WARN     16 more (gatsby-plugin-feed, gatsby-plugin-google-analytics, ...)
npm WARN   1 more (eslint-plugin-graphql)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^14.4.1" from [email protected]
npm WARN node_modules/express-graphql
npm WARN   express-graphql@"^0.9.0" from [email protected]
npm WARN   node_modules/gatsby
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react-graph-vis/node_modules/uuid
npm WARN   uuid@"^2.0.1" from [email protected]
npm WARN   node_modules/react-graph-vis
npm WARN     react-graph-vis@"^1.0.7" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer uuid@"^7.0.0 || ^8.0.0" from [email protected]
npm WARN node_modules/react-graph-vis/node_modules/vis-data
npm WARN   vis-data@"^7.1.2" from [email protected]
npm WARN   node_modules/react-graph-vis
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/react-graph-vis/node_modules/uuid
npm ERR!   uuid@"^2.0.1" from [email protected]
npm ERR!   node_modules/react-graph-vis
npm ERR!     react-graph-vis@"^1.0.7" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer uuid@"^3.4.0 || ^7.0.0 || ^8.0.0" from [email protected]
npm ERR! node_modules/react-graph-vis/node_modules/vis-network
npm ERR!   vis-network@"^9.0.0" from [email protected]
npm ERR!   node_modules/react-graph-vis
npm ERR!     react-graph-vis@"^1.0.7" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/odys/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/odys/.npm/_logs/2021-06-04T09_36_37_826Z-debug.log

[odyslam]

The complete source code for the site that I am building can be found on https://github.com/OdysLam/odyslam.com-v2/tree/main/gatsby @LekoArts

Thanks for the quick answer!

[odyslam]

I tried commenting out nearly all my code but the issue won't go away :/

[odyslam]

Hey @LekoArts

I managed to single out the problem to this query:

  // const result = await graphql(`
  //   query {
  //     allMdx {
  //       nodes {
  //         fileAbsolutePath
  //         slug
  //         body
  //         frontmatter {
  //           date
  //           title
  //           tags
  //           category
  //           author
  //         }
  //         timeToRead
  //         id
  //         wordCount {
  //           paragraphs
  //           sentences
  //           words
  //         }
  //       }
  //     }
  //   }
  // `);

Any idea what's the problem? ofc the query is not quoted when the problem comes up.

Best,

[odyslam]

For some reason, graphql completely fails.

What is happening basically is that the server is rendered, but without any graphql-related functionality. When I visit the graphql dashboard, the data model is empty. It's like nothing is loaded into graphql 😅

[odyslam]

I think indeed the gatsby-mdx-plugin is the culprit here. Now, I have this issue:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

unknown: Unexpected token (9:61)

  7 | export default function MDXContent(_ref) {
  8 |   var components = _ref.components,
> 9 |       props = _objectWithoutPropertiesLoose(_ref, _excluded);
    |                                                              ^/Users/odys/Github/odyslam.com/new/odyslam.com/src/pages/about.mdx: unknown: Unexpected token (9:61)

  7 | export default function MDXContent(_ref) {
  8 |   var components = _ref.components,
> 9 |       props = _objectWithoutPropertiesLoose(_ref, _excluded);
    |                                                              ^

File: src/pages/about.mdx:9:61

failed Building development bundle - 18.324s
ERROR in ./src/pages/about.mdx
Module build failed (from ./node_modules/gatsby-plugin-mdx/loaders/mdx-loader.js):
SyntaxError: unknown: Unexpected token (9:61)

  7 | export default function MDXContent(_ref) {
  8 |   var components = _ref.components,
> 9 |       props = _objectWithoutPropertiesLoose(_ref, _excluded);
    |                                                              ^/Users/odys/Github/odyslam.com/new/odyslam.com/src/pages/about.mdx: unknown: Unexpected token (9:61)

  7 | export default function MDXContent(_ref) {
  8 |   var components = _ref.components,
> 9 |       props = _objectWithoutPropertiesLoose(_ref, _excluded);
    |                                                              ^
    at Object._raise (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/error.js:134:45)
    at Object.raiseWithData (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/error.js:129:17)
    at Object.raise (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/error.js:78:17)
    at Object.unexpected (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/util.js:179:16)
    at Object.parseExprAtom (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/expression.js:1202:20)
    at Object.parseExprAtom (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/plugins/jsx/index.js:565:22)
    at Object.parseExprSubscripts (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/expression.js:613:23)
    at Object.parseUpdate (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/expression.js:593:21)
    at Object.parseMaybeUnary (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/expression.js:560:23)
    at Object.parseExprOps (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/expression.js:364:23)
    at Object.parseMaybeConditional (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/expression.js:329:23)
    at Object.parseMaybeAssign (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/expression.js:284:21)
    at Object.parseExpressionBase (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/expression.js:208:23)
    at callback (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/expression.js:201:39)
    at Object.allowInAnd (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/expression.js:2658:16)
    at Object.parseExpression (/Users/odys/Github/odyslam.com/new/odyslam.com/node_modules/@babel/parser/src/parser/expression.js:201:17)
 @ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 21:11-23:5
 @ ./.cache/app.js 17:0-52 30:0-86 32:27-40 30:0-86

The weird thing is that my setup would work 1 month ago, so something happened in the interim.

I have tried using the plugin with version 2.4.0 (released about 2 months ago), but no luck 🤷‍♂️

[odyslam]

I managed to solve the problem, by changing nearly all packages to an older version.

The thing is that the solution was a combination of changing the packages and a fix in the code. I gave MDXProvider a {children} object instead of {mdx.body}. The thing is that in my old code, that part was correct ( I assume that trying to solve this problem, I changed it by mistake).

TBH, after spending so many hours, I have no idea what was it. It has to do for sure with the MDX plugin, other than that. I have literally no idea.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜