Gatsby: Cannot read property 'gatsbyRemarkPlugins' of undefined

[elrumordelaluz]

Description

I see some commits in the last days related on mdx and in some way, upgrading @mdx-js/mdx and @mdx-js/react from 1.6.10 into 1.6.13 and gatsby-plugin-mdx from 1.2.26 into 1.2.27 broke my _Application_ logging a:

TypeError: Cannot read property 'gatsbyRemarkPlugins' of undefined

Since I am using createMDXNode from gatsby-plugin-mdx/utils/create-mdx-node, probably the problem is in my implementation, but downgrading to the previous (patch) versions, everything works well.

I am using it like the code below:

exports.onCreateNode = async ({ node, actions, createNodeId }) => {
  const { createNodeField, createNode, createParentChildLink } = actions
  // …

  const mdxNodeDesc = await createMDXNode({
    id: createNodeId(`${node.id} >>> Desc Mdx`),
    node,
    content: node.description,
  })

  // …
}

Hope it helps debugging in case is a bug related to the _dependencies_.

Otherwise, I will be very grateful in case someone could advice something to that _internal_ method and a _safe_ way to create MDX nodes from an internal node creation in gatsby-node.js.

Thanks in advance,

Steps to reproduce

It's a bit complicated my specific case, but I'll try to create a minimal reproduction.

Expected result

To not broke the gatsby-node script

Actual result

TypeError: Cannot read property 'gatsbyRemarkPlugins' of undefined

  - gen-mdx.js:216 findImportsExports
    [my-website]/[gatsby-plugin-mdx]/utils/gen-mdx.js:216:36

  - create-mdx-node.js:11 createMdxNode
    [my-website]/[gatsby-plugin-mdx]/utils/create-mdx-node.js:11:13

  - gatsby-node.js:28 Object.exports.onCreateNode
    /my-website/gatsby-node.js:28:31

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 84.0.4147.89
    Edge: 81.0.416.53
    Firefox: 78.0.2
    Safari: 13.1.2
  npmPackages:
    gatsby: 2.24.7 => 2.24.7
    gatsby-plugin-create-client-paths: 2.3.10 => 2.3.10
    gatsby-plugin-mdx: 1.2.27 => 1.2.27
    gatsby-plugin-postcss: 2.3.11 => 2.3.11
    gatsby-plugin-react-helmet: 3.3.10 => 3.3.10

[johno]

Any luck on a minimal repro @elrumordelaluz? Would love to get a fix in, but I haven't been able to reproduce this myself.

[elrumordelaluz]

Sure @johno. I will come back in some minutes. Sorry for the delay in creating it.

[elrumordelaluz]

So, here is a repository where I am tried to create a reduced reproduction of the _Issue_. As I already comment before, I am aware that maybe I have to improve something in my implementation, avoiding using an internal method like gatsby-plugin-mdx/utils/create-mdx-node. Or maybe is absolutely valid, please let me know.

However, in this reduced example I was able to obtain the same errors doing the same steps as in my _Application_, which uses a custom plugin sourcing from a graphql endpoint. For this reason I forked the using-gatsby-source-graphql example as a starting point.

So,

Steps to reproduce

Clone the repository, install packages and launch gatsby

$ git clone https://github.com/elrumordelaluz/gatsby-mdx-reproduction
$ cd gatsby-mdx-reproduction
$ yarn
$ yarn start

Navigate to http://localhost:8000/ and should show some content below the posts links. Something like:

Navigate to GraphiQL running the following _Query_:

{
  allFile {
    edges {
      node {
        name
        childMdx {
          id
          type
          body
        }
      }
    }
  }
}

🎉 And everything should work as expected.

but…

Since we are using the following versions of mdx related _dependencies_

{
  ...
  "@mdx-js/mdx": "1.6.10",
  "@mdx-js/react": "1.6.10",
  "gatsby-plugin-mdx": "1.2.16",
  ...
}

Update dependencies

yarn add @mdx-js/mdx @mdx-js/react gatsby-plugin-mdx

Undesired result

After updated those _packages_, launching again gatsby develop will output some errors like:

TypeError: Cannot read property 'gatsbyRemarkPlugins' of undefined

  - gen-mdx.js:216 findImportsExports
    [using-gatsby-source-graphql]/[gatsby-plugin-mdx]/utils/gen-mdx.js:216:36

  - create-mdx-node.js:11 createMdxNode
    [using-gatsby-source-graphql]/[gatsby-plugin-mdx]/utils/create-mdx-node.js:11:13

  - gatsby-node.js:78 Object.exports.onCreateNode
    /Users/lio/Downloads/using-gatsby-source-graphql/gatsby-node.js:78:31

  - api-runner-node.js:347 runAPI
    [using-gatsby-source-graphql]/[gatsby]/dist/utils/api-runner-node.js:347:37

  - api-runner-node.js:466 Promise.catch.decorateEvent.pluginName
    [using-gatsby-source-graphql]/[gatsby]/dist/utils/api-runner-node.js:466:15

  - From previous event:

  - api-runner-node.js:466 Promise.catch.decorateEvent.pluginName
    [using-gatsby-source-graphql]/[gatsby]/dist/utils/api-runner-node.js:466:7

  - From previous event:

  - api-runner-node.js:465
    [using-gatsby-source-graphql]/[gatsby]/dist/utils/api-runner-node.js:465:12

  - timers.js:458 processImmediate
    internal/timers.js:458:21

  - From previous event:

  - api-runner-node.js:459
    [using-gatsby-source-graphql]/[gatsby]/dist/utils/api-runner-node.js:459:11

  - From previous event:

  - api-runner-node.js:366 module.exports
    [using-gatsby-source-graphql]/[gatsby]/dist/utils/api-runner-node.js:366:12

  - public.js:755
    [using-gatsby-source-graphql]/[gatsby]/dist/redux/actions/public.js:755:10

  - index.js:11
    [using-gatsby-source-graphql]/[redux-thunk]/lib/index.js:11:18

  - redux.js:483
    [using-gatsby-source-graphql]/[redux]/lib/redux.js:483:12

  - api-runner-node.js:100 doubleBoundActionCreators.<computed>
    [using-gatsby-source-graphql]/[gatsby]/dist/utils/api-runner-node.js:100:20

  - create-remote-file-node.js:304 processRemoteNode
    [using-gatsby-source-graphql]/[gatsby-source-filesystem]/create-remote-file-node.js:304:9

  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5

  - create-remote-file-node.js:124 async Worker.pushToQueue [as fn]
    [using-gatsby-source-graphql]/[gatsby-source-filesystem]/create-remote-file-node.js:124:18

Hope this reproduction helps debug in case of a verified bug, or at least for me for learning not to do such a thing using internal _methods_ :)

[johno]

Thank you for providing a minimal repro @elrumordelaluz. I've confirmed the error cloning it down locally and updating gatsby-plugin-mdx. We'll look into it in the next couple days.

[laurieontech]

Thanks for opening the issue! A recent PR changed the function signature of createMDXNode. We'll work on a way forward for that so that it doesn't introduce this breaking change.

I'm going to open a specific PR to track this issue and close this one. Thanks so much for flagging it!