rehype-katex fails with new NextJS TypeScript Project
msukmanowsky opened this issue · 5 comments
Initial checklist
- I read the support docs
- I read the contributing guide
- I agree to follow the code of conduct
- I searched issues and couldn’t find anything (or linked relevant results below)
Affected packages and versions
rehype-katex@6.0.2
Link to runnable example
No response
Steps to reproduce
Apologies if this ends up being a NextJS issue but wanted to file it here first. See this repo for an example.
- Create a NextJS project
npx create-next-app --typescript --use-npm next-rehype-katex-issue - Install dependencies
npm i --save @next/mdx @mdx-js/loader rehype-katex remark-math cd my-next-app && touch next.config.mjs- Add the following config to
next.config.mjs:
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import mdx from "@next/mdx";
const withMDX = mdx({
extension: /\.mdx?$/,
options: {
rehypePlugins: [rehypeKatex],
remarkPlugins: [remarkMath],
},
});
const config = withMDX({
pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
});
export default config;npm run dev
Expected behavior
I should be able to run the NextJS dev server without error. This issue does not happen with earlier versions of rehype-katex (e.g. 4.0.0).
Actual behavior
An error similar to the following occurs (seems to be an issue with ES modules versus CommonJS resolution.
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'url' in '/Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/node_modules/vfile/lib'
<w> while resolving 'url' in /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/node_modules/vfile/lib as file
<w> at resolve esm file url
<w> at file dependencies /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/node_modules/vfile/lib/minurl.js
<w> at file /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/node_modules/vfile/lib/minurl.js
<w> at resolve esm file ./minurl.js
<w> at file dependencies /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/node_modules/vfile/lib/index.js
<w> at file /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/node_modules/vfile/lib/index.js
<w> at resolve esm file ./lib/index.js
<w> at file dependencies /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/node_modules/vfile/index.js
<w> at file /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/node_modules/vfile/index.js
<w> at resolve esm file vfile
<w> at file dependencies /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/node_modules/unified/lib/index.js
<w> at file /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/node_modules/unified/lib/index.js
<w> at resolve esm file ./lib/index.js
<w> at file dependencies /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/node_modules/unified/index.js
<w> at file /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/node_modules/unified/index.js
<w> at resolve esm file unified
<w> at file dependencies /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/index.js
<w> at file /Users/mikesukmanowsky/code/personal/nextjs-math/node_modules/rehype-katex/index.js
<w> at resolve esm file rehype-katex
<w> at file dependencies /Users/mikesukmanowsky/code/personal/nextjs-math/next.config.mjs
<w> at file /Users/mikesukmanowsky/code/personal/nextjs-math/next.config.mjs
<w> at resolve commonjs /Users/mikesukmanowsky/code/personal/nextjs-math/next.config.mjs
Runtime
Node v17
Package manager
npm v7
OS
macOS
Build and bundle tools
Next.js
This is not an issue with remark-math, rehype-katex, ormdx. I'm not sure it's an issue with next either.
Running MDX 2 and Next 12, with the official @mdx-js/loader, it's able to run remark-math and rehype-katex fine.
https://codesandbox.io/s/next-mdx-math-katex-vd1qx?file=/next.config.mjs
next.config.mjs
// ⚠️ Important! Please make sure the dependencies are up to date.
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
const configuration = {
// Support MDX files as pages:
pageExtensions: ["md", "mdx", "tsx", "ts", "jsx", "js"],
// Support loading `.md`, `.mdx`:
webpack(config, options) {
config.module.rules.push({
test: /\.mdx?$/,
use: [
// The default `babel-loader` used by Next:
options.defaultLoaders.babel,
{
loader: "@mdx-js/loader",
/** @type {import('@mdx-js/loader').Options} */
options: {
/* jsxImportSource: …, otherOptions… */
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex]
},
},
],
});
return config;
},
};
export default configuration;This is likely related to using mdx 1 (https://github.com/msukmanowsky/rehype-katex-issue/blob/8967ab668bbb59aae1354991728589eb271222cb/package.json#L11) with remark and rehype plugins which are compatible with mdx 2 (https://codesandbox.io/s/next-mdx-math-katex-vd1qx?file=/package.json)
As for the log you provide, it may be a next issue, there are a number of open issues related to caching strategy https://github.com/vercel/next.js/issues?q=is%3Aissue+is%3Aopen+webpack.cache.PackFileCacheStrategy
It should not however cause the issue you are seeing.
Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.
Hi! Thanks for reaching out! Because we treat issues as our backlog, we close issues that are questions since they don’t represent a task to be completed.
See our support docs for how and where to ask questions.
Thanks,
— bb
Hi, for the record rehype-mathjax doesn't have an error message but seems to fail silently as well. Will try mdx v2.
@eric-burel if @next/mdx is silently swallowing errors it would be something to raise with the maintainers https://github.com/vercel/next.js/issues