S
SolidJS•8mo ago
Arnaldur

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 
  "devDependencies": {
    "typescript": "^5.4.5",
    "vite": "^5.2.11"
  },
  "dependencies": {
    "@mdx-js/mdx": "^3.0.1",
    "@solidjs/meta": "^0.29.3",
    "@solidjs/router": "^0.13.3",
    "@solidjs/start": "1.0.0-rc.1",
    "@vinxi/plugin-mdx": "^3.7.1",
    "rehype-autolink-headings": "^7.1.0",
    "rehype-katex": "^7.0.0",
    "rehype-mdx-import-media": "^1.2.0",
    "rehype-slug": "^6.0.0",
    "remark-frontmatter": "^5.0.0",
    "remark-gfm": "^4.0.0",
    "remark-math": "^6.0.0",
    "remark-mdx-frontmatter": "^4.0.0",
    "solid-js": "^1.8.17",
    "solid-mdx": "^0.0.7",
    "undici": "^6.16.1",
    "vinxi": "^0.3.11"
  },
  "devDependencies": {
    "typescript": "^5.4.5",
    "vite": "^5.2.11"
  },
  "dependencies": {
    "@mdx-js/mdx": "^3.0.1",
    "@solidjs/meta": "^0.29.3",
    "@solidjs/router": "^0.13.3",
    "@solidjs/start": "1.0.0-rc.1",
    "@vinxi/plugin-mdx": "^3.7.1",
    "rehype-autolink-headings": "^7.1.0",
    "rehype-katex": "^7.0.0",
    "rehype-mdx-import-media": "^1.2.0",
    "rehype-slug": "^6.0.0",
    "remark-frontmatter": "^5.0.0",
    "remark-gfm": "^4.0.0",
    "remark-math": "^6.0.0",
    "remark-mdx-frontmatter": "^4.0.0",
    "solid-js": "^1.8.17",
    "solid-mdx": "^0.0.7",
    "undici": "^6.16.1",
    "vinxi": "^0.3.11"
  },
Note that @vinxi/plugin-mdx reports this peer dependency issue. 
└─┬ @vinxi/plugin-mdx 3.7.1
  └── ✕ unmet peer @mdx-js/mdx@<3: found 3.0.1
└─┬ @vinxi/plugin-mdx 3.7.1
  └── ✕ unmet peer @mdx-js/mdx@<3: found 3.0.1
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 <3
4 Replies
Arnaldur
ArnaldurOP•8mo ago
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.
Arnaldur
ArnaldurOP•8mo ago
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: 
/*@jsxRuntime automatic*/
/*@jsxImportSource solid-js*/
import {useMDXComponents as _provideComponents} from "solid-mdx";
export const frontmatter = {
  "title": "Large Language Model Reasoning",
  "date": "2024-05-16T02:43:19+02:00",
  "topic": ["llm"]
};

function _createMdxContent(props) {
  const _components = {
    annotation: "annotation",
    math: "math",
    mi: "mi",
    mrow: "mrow",
    p: "p",
    semantics: "semantics",
    span: "span",
    ..._provideComponents(),
    ...props.components
  };
  return <_components.p><_components.span class="katex"><_components.span class="katex-mathml"><_components.math xmlns="http://www.w3.org/1998/Math/MathML"><_components.semantics><_components.mrow><_components.mi>{"a"}</_components.mi><_components.mi>{"s"}</_components.mi><_components.mi>{"d"}</_components.mi><_components.mi>{"f"}</_components.mi></_components.mrow><_components.annotation encoding="application/x-tex">{"asdf"}</_components.annotation></_components.semantics></_components.math></_components.span><_components.span class="katex-html" aria-hidden="true"><_components.span class="base"><_components.span class="strut" style={{
    height: "0.8889em",
    "vertical-align": "-0.1944em"
  }} /><_components.span class="mord mathnormal">{"a"}</_components.span><_components.span class="mord mathnormal">{"s"}</_components.span><_components.span class="mord mathnormal" style={{
    "margin-right": "0.10764em"
  }}>{"df"}</_components.span></_components.span></_components.span></_components.span></_components.p>;
}
export default function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
}
/*@jsxRuntime automatic*/
/*@jsxImportSource solid-js*/
import {useMDXComponents as _provideComponents} from "solid-mdx";
export const frontmatter = {
  "title": "Large Language Model Reasoning",
  "date": "2024-05-16T02:43:19+02:00",
  "topic": ["llm"]
};

function _createMdxContent(props) {
  const _components = {
    annotation: "annotation",
    math: "math",
    mi: "mi",
    mrow: "mrow",
    p: "p",
    semantics: "semantics",
    span: "span",
    ..._provideComponents(),
    ...props.components
  };
  return <_components.p><_components.span class="katex"><_components.span class="katex-mathml"><_components.math xmlns="http://www.w3.org/1998/Math/MathML"><_components.semantics><_components.mrow><_components.mi>{"a"}</_components.mi><_components.mi>{"s"}</_components.mi><_components.mi>{"d"}</_components.mi><_components.mi>{"f"}</_components.mi></_components.mrow><_components.annotation encoding="application/x-tex">{"asdf"}</_components.annotation></_components.semantics></_components.math></_components.span><_components.span class="katex-html" aria-hidden="true"><_components.span class="base"><_components.span class="strut" style={{
    height: "0.8889em",
    "vertical-align": "-0.1944em"
  }} /><_components.span class="mord mathnormal">{"a"}</_components.span><_components.span class="mord mathnormal">{"s"}</_components.span><_components.span class="mord mathnormal" style={{
    "margin-right": "0.10764em"
  }}>{"df"}</_components.span></_components.span></_components.span></_components.span></_components.p>;
}
export default function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
}
Arnaldur
ArnaldurOP•8mo ago
From this simple markdown file 
---
title: "Large Language Model Reasoning"
date: "2024-05-16T02:43:19+02:00"
topic:
  - "llm"
---

$$asdf$$
---
title: "Large Language Model Reasoning"
date: "2024-05-16T02:43:19+02:00"
topic:
  - "llm"
---

$$asdf$$
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: 
    function _createMdxContent(props) {
        const _components = {
            annotation: "annotation",
            math: "math",
            mi: "mi",
            mrow: "mrow",
            p: "p",
            semantics: "semantics",
            span: "span",
            ...__vite_ssr_import_2__.useMDXComponents(),
            ...props.components
        };
        return __vite_ssr_import_1__.createComponent(_components.p, {
            get children() {
                return __vite_ssr_import_1__.createComponent(_components.span, {
                    "class": "katex",
                    get children() {
                        return [__vite_ssr_import_1__.createComponent(_components.span, {
                            "class": "katex-mathml",
                            get children() {
                                return __vite_ssr_import_1__.createComponent(_components.math, {
                                    xmlns: "http://www.w3.org/1998/Math/MathML",
                                    get children() {
                                        return __vite_ssr_import_1__.createComponent(_components.semantics, {
                                            get children() {
                                                return [__vite_ssr_import_1__.createComponent(_components.mrow, {
...
    function _createMdxContent(props) {
        const _components = {
            annotation: "annotation",
            math: "math",
            mi: "mi",
            mrow: "mrow",
            p: "p",
            semantics: "semantics",
            span: "span",
            ...__vite_ssr_import_2__.useMDXComponents(),
            ...props.components
        };
        return __vite_ssr_import_1__.createComponent(_components.p, {
            get children() {
                return __vite_ssr_import_1__.createComponent(_components.span, {
                    "class": "katex",
                    get children() {
                        return [__vite_ssr_import_1__.createComponent(_components.span, {
                            "class": "katex-mathml",
                            get children() {
                                return __vite_ssr_import_1__.createComponent(_components.math, {
                                    xmlns: "http://www.w3.org/1998/Math/MathML",
                                    get children() {
                                        return __vite_ssr_import_1__.createComponent(_components.semantics, {
                                            get children() {
                                                return [__vite_ssr_import_1__.createComponent(_components.mrow, {
...
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
Arnaldur
ArnaldurOP•8mo ago
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. 
export default defineConfig({
  extensions: ["tsx", "mdx", "md"],
  server: {
    preset: "aws-amplify",
  },
  vite: {
    plugins: [
      mdx.withImports({})({
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
        remarkPlugins: [
          remarkGfm,
          remarkFrontmatter,
          remarkMdxFrontmatter,
          remarkMath,
        ],
        rehypePlugins: [
          rehypeMdxImportMedia,
          rehypeKatex,
          rehypeSlug,
          [
            rehypeAutolinkHeadings,
            { properties: { class: "autolink-heading" }, behavior: "wrap" },
          ],
        ],
        stylePropertyNameCase: "css",
        elementAttributeNameCase: "html",
        enforce: "pre",
      }),
    ],
  },
});
export default defineConfig({
  extensions: ["tsx", "mdx", "md"],
  server: {
    preset: "aws-amplify",
  },
  vite: {
    plugins: [
      mdx.withImports({})({
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
        remarkPlugins: [
          remarkGfm,
          remarkFrontmatter,
          remarkMdxFrontmatter,
          remarkMath,
        ],
        rehypePlugins: [
          rehypeMdxImportMedia,
          rehypeKatex,
          rehypeSlug,
          [
            rehypeAutolinkHeadings,
            { properties: { class: "autolink-heading" }, behavior: "wrap" },
          ],
        ],
        stylePropertyNameCase: "css",
        elementAttributeNameCase: "html",
        enforce: "pre",
      }),
    ],
  },
});
Here are the fields I changed, before changing them: 
export default defineConfig({
  extensions: ["tsx", "mdx", "md"],
  vite: {
    plugins: [
      mdx.withImports({})({
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
      }),
    ],
  },
});
export default defineConfig({
  extensions: ["tsx", "mdx", "md"],
  vite: {
    plugins: [
      mdx.withImports({})({
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
      }),
    ],
  },
});
This is what they look like now: 
export default defineConfig({
  extensions: ["mdx", "md"],
  vite: {
    plugins: [
      mdx.withImports({})({
        jsxImportSource: "solid-jsx",
      }),
    ],
  },
});
export default defineConfig({
  extensions: ["mdx", "md"],
  vite: {
    plugins: [
      mdx.withImports({})({
        jsxImportSource: "solid-jsx",
      }),
    ],
  },
});
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.
Want results from more Discord servers?
Add your server