MathpixLoader Error

[GolliAch]

import { MathpixLoader, MathpixMarkdown } from 'mathpix-markdown-it';

export default function A() {
  return (
    <div>
      <MathpixLoader>
        <MathpixMarkdown text="$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$" />
      </MathpixLoader>
    </div>
  );
}

On our NextJs the MathpixLoader gets stuck on "Loading" 80% of the time.
and on the console we see this error:

Error load MathJax => Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

[GolliAch]

For more context:

"mathpix-markdown-it": "^1.3.3",
"next": "14.1.4",
"react": "^18.2.0"

And the error only happens after next build && next start -p 80 and doesn't happen on next dev

[uniquarkD]

It's still happening on the version 2. Have you figured it out @GolliAch ?

[chillhaze]

@uniquarkD , @GolliAch

this approach helped to handle the loader issue in Next.js. consider to use dynamic import and cache the component to prevent unexpected fallback flashes

'use client'
import Spinner from '@/components/icons/spinner-blue'
import dynamic from 'next/dynamic'
import { ComponentType, FC } from 'react'

interface IMathpixRendererProps {
  text: string
}

// cache the dynamic component to avoid recreating it on every render
// this prevents unexpected fallback flashes
let CachedMathpixRenderer: ComponentType<IMathpixRendererProps> | null = null

const getMathpixRenderer = (
  loaderFallback: React.ReactNode,
): ComponentType<IMathpixRendererProps> => {
  if (!CachedMathpixRenderer) {
    CachedMathpixRenderer = dynamic<IMathpixRendererProps>(
      async () => {
        const mathpix = await import('mathpix-markdown-it')

        return function InnerRenderer({ text }) {
          return (
            <mathpix.MathpixLoader notScrolling={true}>
              <mathpix.MathpixMarkdown text={text} />
            </mathpix.MathpixLoader>
          )
        }
      },
      {
        ssr: false,
        loading: () => <>{loaderFallback}</>,
      },
    )
  }

  return CachedMathpixRenderer
}

interface ISafeMathpixRendererProps extends IMathpixRendererProps {
  loaderFallback?: React.ReactNode
}

const defaultFallback = (
  <div className="w-full py-10 flex items-center justify-center">
    <Spinner />
  </div>
)

const SafeMathpixRenderer: FC<ISafeMathpixRendererProps> = ({
  text,
  loaderFallback = defaultFallback,
}) => {
  // get cached renderer or create one if needed
  const MathpixRenderer = getMathpixRenderer(loaderFallback)

  return <MathpixRenderer text={text} />
}

export default SafeMathpixRenderer