Arnaldur Comments - Answer Overflow

Arnaldur

Posts Comments

SSolidJS

•Created by Arnaldur on 5/12/2024 in #support

Comp is not a function when using remarkMath

Feels all the more better to have found it.

11 replies

SSolidJS

•Created by Arnaldur on 5/12/2024 in #support

Comp is not a function when using remarkMath

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.

11 replies

SSolidJS

•Created by Arnaldur on 5/12/2024 in #support

Comp is not a function when using remarkMath

I solved it. Took me like 12 hours to find it but the fix was not complex.

11 replies

SSolidJS

•Created by Arnaldur on 5/12/2024 in #support

Comp is not a function when using remarkMath

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.

11 replies

SSolidJS

•Created by Arnaldur on 5/12/2024 in #support

Comp is not a function when using remarkMath

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.

11 replies

SSolidJS

•Created by Arnaldur on 5/12/2024 in #support

Comp is not a function when using remarkMath

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.

11 replies

SSolidJS

•Created by Arnaldur on 5/12/2024 in #support

Comp is not a function when using remarkMath

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.

11 replies

SSolidJS

•Created by Arnaldur on 5/12/2024 in #support

Comp is not a function when using remarkMath

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.

11 replies

SSolidJS

•Created by Arnaldur on 5/12/2024 in #support

Comp is not a function when using remarkMath

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);
}

11 replies

SSolidJS

•Created by Arnaldur on 5/12/2024 in #support

Comp is not a function when using remarkMath

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

11 replies

Gaming

Programming