In MDX: Renders, but throws warning

Description

When using gatsby-remark-katex in gatsbyRemarkPlugin of gatsby-plugin-mdx, output is rendered, but the console bombarded with this message:

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

Steps to reproduce

1. Set up a Gatsby site with MDX, add gatsby-remark-katex
2. Add gatsby-remark-katex to gatsbyRemarkPlugins of the mdx plugin.
3. Run the site in development mode and check the console.

Expected result

No warning should be generated if there is no issue.

What should happen?

No warning should be generated if there is no issue.

Actual result

Console is filled with this message:

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

Environment

System: OS: macOS 10.15.2 CPU: (8) x64 Intel® Core™ i5-8279U CPU @ 2.40GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.13.1 - /var/folders/sq/6y3f5vw514s6t14bm9hrbxzw0000gn/T/yarn–1578702400432-0.9155964409393913/node Yarn: 1.21.1 - /var/folders/sq/6y3f5vw514s6t14bm9hrbxzw0000gn/T/yarn–1578702400432-0.9155964409393913/yarn npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Firefox: 72.0.1 Safari: 13.0.4 npmPackages: gatsby: ^2.18.4 => 2.18.21 gatsby-image: ^2.2.34 => 2.2.38 gatsby-plugin-manifest: ^2.2.30 => 2.2.37 gatsby-plugin-mdx: ^1.0.67 => 1.0.67 gatsby-plugin-offline: ^3.0.24 => 3.0.31 gatsby-plugin-react-helmet: ^3.1.16 => 3.1.21 gatsby-plugin-sharp: ^2.3.4 => 2.3.13 gatsby-remark-abbr: ^2.0.0 => 2.0.0 gatsby-remark-embed-spotify: ^2.1.1 => 2.1.1 gatsby-remark-footnotes: ^0.0.7 => 0.0.7 gatsby-remark-katex: ^3.1.20 => 3.1.23 gatsby-remark-mermaid: ^1.2.0 => 1.2.0 gatsby-remark-prismjs: ^3.3.29 => 3.3.30 gatsby-remark-responsive-iframe: ^2.2.30 => 2.2.31 gatsby-source-filesystem: ^2.1.39 => 2.1.46 gatsby-transformer-remark: ^2.6.45 => 2.6.48 gatsby-transformer-sharp: ^2.3.6 => 2.3.12

[nikoladev]

@cangSDARM This solution worked for me. So instead of using gatsby-remark-katex you should use remark-math and remark-html-katex. This also means that you have to put them in remarkPlugins instead of in gatsbyRemarkPlugins.

Note: Make sure to install version 3 of remark-math. Version 4 of remark-math requires version 13 of remark but gatsby-plugin-mdx currently depends on version 10 of remark. If gatsby-plugin-mdx ever updates its depedencies to use version 13 or later of remark I assume you can then also update remark-math.

Anyway, here’s the versions that I’m using at the moment:

// package.json
    "@mdx-js/mdx": "v2.0.0-next.8",
    "@mdx-js/react": "v2.0.0-next.8",
    "gatsby": "2.25.2",
    "gatsby-plugin-mdx": "1.3.1",
    "remark-html-katex": "3.0.0",
    "remark-math": "3.0.1",

And my config file:

// gatsby-config.js
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        defaultLayouts: {
          default: require.resolve(`./src/components/mdxLayout.js`),
        },
        remarkPlugins: [
          require('remark-math'),
          require('remark-html-katex'),
        ],
      },
    },

Hope it helps!

[cangSDARM]

@nikoladev Thanks! I will try it. I hope this time will not take too long 😃