In MDX: Renders, but throws warning

[acagastya]

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(R) Core(TM) 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

[acagastya]

Somehow shifting the plugin to the very end of the array fixed the problem. Not sure why.

[huy-nguyen]

@acagastya I have the same problem that you do. I tried your solution but it didn't work for me. Can you reopen the ticket? The problem definitely comes from gatsby-remark-math because the code in the error message is from these lines in remark-math.

[acagastya]

@huy-nguyen do you have the code online somewhere so that I can see what the issue is?

[huy-nguyen]

@acagastya I solved my problem by adding options.strict = "ignore" to gatsby-remark-katex plugin.

[pvdz]

Yeah this is a little weird.

There's only one case where this shows up in github search: https://github.com/Dajamante/blog/blob/879c4a5f83e1cb8bcb91b7dde42beb9a3cfc1c5e/node_modules2/remark-math/index.js

But I think it's a built file. Almost definitely from remark-math.

The thing is, that output is generated by report.warn(`Error persisting state: ${(err && err.message) || err}`) in gatsby/packages/gatsby/src/db/index.js

Why would err (or err.message) contain that function? Very strange ..

Potentially a plugin is somehow executing code when serializing to disk? But it fails and screws up?

[cangSDARM]

I encountered the same problem. Using [email protected] and [email protected]

[cangSDARM]

It will not generate files, but it still reports errors on the console

[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 :)