Comp is not a function when using remarkMath
I have been migrating a static site from solid-start 0.3 and it's mostly working.
It has a remarkFrontmatter plugin that I use to grab the frontmatter of posts.
To get the post data I use
import.meta.glob
from vite and all is working again.
When putting math into a mdx file, I get the error Comp is not a function
.
These are the packages I'm using
Note that @vinxi/plugin-mdx
reports this peer dependency issue.
But the older version works worse than the new version. Doesn't even work without any math.
This migration has been a little hard but that's no biggie. I've faced and resolved many issues performing it but I have no idea where to start on this one.
Thank you for all your support <34 Replies
https://github.com/arnfaldur/arnaldur-be/tree/develop
This is the repo and branch that the issue occurs on.
And if you run the code, this page has a math expression, triggering the error.
http://localhost:3000/writing/about/solving-robozzle-pt1
GitHub
GitHub - arnfaldur/arnaldur-be at develop
Contribute to arnfaldur/arnaldur-be development by creating an account on GitHub.
I have made some progress.
The output of the
rehype-katex
module creates some standard html elements like <semantics>...</semantics>
. These all get turned into:
From this simple markdown file
and when this stuff is being rendered by
solid-js
, it calls this function https://github.com/solidjs/solid/blob/a72d393a07b22f9b7496e5eb93712188ccce0d28/packages/solid/src/server/rendering.ts#L79
because the JSX is expanded into this:
so it's treating the basic html tags as JSX components and trying to render them. But they are just strings, causing the error.GitHub
solid/packages/solid/src/server/rendering.ts at a72d393a07b22f9b749...
A declarative, efficient, and flexible JavaScript library for building user interfaces. - solidjs/solid
I seem to have fixed something so now
mdx-js/[email protected]
works. I was using mdx-js/[email protected]
. vinxi-mdx complained about incompatiblilty with version 3 but I couldn't get 2 to work. Now 2 works but the issue with rehype-katex
is unchanged.
I have gathered that solid-mdx
just creates a bunch of JSX components, one for every HTML element. The reason it fails with katex is that it uses mathML HTML elements and those aren't considered in solid-mdx
.
Previously, I used solid-jsx
as it seemed better maintained and more featureful. That package doesn't work for the same reason as the math elements don't work. That is, solid-jsx doesn't generate those JSX elements at all and that's why it doesn't work.
The problem to me looks very much like those components should be able to be strings. They are sent directly into the createComponent
function as Comp
and it assumes that Comp
is a function. That obviously doesn't work but I'm curious how it did. I used these same packages some time ago with the old solid-start and that worked fine.
I solved it. Took me like 12 hours to find it but the fix was not complex.
This was my previous app.config.ts
config.
Here are the fields I changed, before changing them:
This is what they look like now:
I tried many permutations of using "solid-jsx"
as different import sources and such, and I did remove the jsx: true
property. But I apparently never did all at once so I didn't stumble upon this solution before 10 hours of debugging later.
Feels all the more better to have found it.