This blog runs on Gatsby with the Gatsby Starter: Minimal Blog by LekoArts.
I recently upgraded some dependencies and ran into some issues.
The repo switched from @mdx-js/tag
to @mdx-js/react
. During development, everything worked fine. But you couldn’t build static HTML files.
I got errors with mdx-utils
: className.match is not a function
.
mdx-utils
is part of gatsby-mdx.
I found a workaround in this issue: Named capture groups not supported (latest Firefox and < Node 10) #366.
Although it doesn’t exactly match my error, the culprit became clear: The file gatsby-mdx/packages/mdx-utils/index.js
.
It should look like this:
exports.preToCodeBlock = preProps => {
if (
// children is code element
preProps.children &&
// code props
preProps.children.props &&
// if children is actually a <code>
preProps.children.props.mdxType === "code"
) {
// we have a <pre><code> situation
const {
children: codeString,
className = "",
...props
} = preProps.children.props;
const match = className.match(/language-([\0-\uFFFF]*)/);
return {
codeString: codeString.trim(),
className,
language: match != null ? match[1] : "",
...props
};
}
return undefined;
};
I still had an old version in my node-modules
from an earlier version of gatsby-mdx
. You can see the commit here.
It seems like line 17 did cause the issue:
- const [, match] = className.match(/language-([\0-\uFFFF]*)/);
+ const match = className.match(/language-([\0-\uFFFF]*)/);
Please note: I can’t get this working with Netlify as mdx-utils
hasn’t released the fix as a new version yet. Netlify will install node modules for you and will still use the old mdx-utils
and gatsby-mdx
npm packages.
Update 2019-05-31:
I got it working on Netlify.
First, make sure to install mdx-utils version 0.1.0
. The current version 0.1.1
doesn’t work for me.
Then, upgrade the node version on Netlify. You can read more about Netlify builds here.
I set the NODE_VERSION
as a variable in the “Build environment” section of the Netlify settings to 11.15.0
. Apparently the default node version (Node 8) has problems with parsing the regular expression used in mdx-utils
.