[gatsby-plugin-utils] A warning message appears when using MDX and remark-katex plugins together

[SeokminHong]

Description

When I use gatsby-plugin-mdx and gatsby-remark-katex plugins together, the following warning message appears when building and developing.

Error persisting state: function mathPlugin (opts) {
  if (opts == null) opts = {}
  blockPlugin.call(this, opts)
  inlinePlugin.call(this, opts)
} could not be cloned.

I've found an issue (#20538) that appears with the same warning message, but I think this error is slightly different from the issue. The message appears since [email protected], and Its changelog says there is only a change for plugin option validation. So I think it is related to #27381, not an MDX's bug, because the PR clones the result of evaluated schemes, and the warning does not appear anymore when I rollback the changes. (SeokminHong@f8e1c7a)

Steps to reproduce

This is minimal project settings to reproduce the bug:

$ gatsby new gatsby-mdx-warning
$ cd gatsby-mdx-warning
$ yarn add gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-remark-katex katex

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [`gatsby-remark-katex`],
      },
    },
  ]
}

Now, try to start development building:

$ gatsby develop
...
You can now view gatsby-starter-default in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 6.132s
warning Error persisting state: function mathPlugin (opts) {
  if (opts == null) opts = {}
  blockPlugin.call(this, opts)
  inlinePlugin.call(this, opts)
} could not be cloned.

Expected result

There would be no warning messages.

Actual result

A warning message appears.

Environment

(WSL2)
  System:
    OS: Linux 4.19 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.13.0 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.9 - /usr/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Firefox: 81.0
  npmPackages:
    gatsby: ^2.26.1 => 2.26.1 
    gatsby-image: ^2.5.0 => 2.5.0 
    gatsby-plugin-manifest: ^2.6.1 => 2.6.1 
    gatsby-plugin-mdx: 1.3.0 => 1.3.0 
    gatsby-plugin-offline: ^3.4.0 => 3.4.0 
    gatsby-plugin-react-helmet: ^3.4.0 => 3.4.0 
    gatsby-plugin-sharp: ^2.8.0 => 2.8.0 
    gatsby-remark-katex: ^3.5.0 => 3.5.0 
    gatsby-source-filesystem: ^2.5.0 => 2.5.0 
    gatsby-transformer-sharp: ^2.6.0 => 2.6.0 
  npmGlobalPackages:
    gatsby-cli: 2.14.0

[clang13]

I am running into the same issue with a different plugin (gatsby-remark-image-attributes). Repro for mine is at https://github.com/clang13/repro-remark-image-attribute.

The failure writing the state stems from trying to serialize the gatsby-plugin-mdx state when its remarkPlugins contains a function. That option gets populated by https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-mdx/loaders/mdx-loader.js#L188-L200. But I don't know enough about the internals to speculate on a possible fix.

[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! 💪💜

[nikoladev]

I also had this problem and solved it by using the remark plugins directly instead of gatsby-remark-katex. Maybe it can help: #20538 (comment)

[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! 💪💜