Problem with Next 13

[AdamZajler]

Hi. I'm trying to run MathView or just any mathlive component as client component in Next.js 13 :| but i just simply get a lot of errors.

Is there any way that somone here, way smarter than me (with is not hard) could provide working example?

[arnog]

There was recently a discussion on this topic at https://gitter.im/cortex-js/community.

I'm copying the relevant bits here:

The first step is to declare the web component as a JSX element in index.d.ts like so:

// index.d.ts

import { DOMAttributes } from "react";
import { MathfieldElementAttributes } from 'mathlive'

type CustomElement<T> = Partial<T & DOMAttributes<T>>;

declare global {
  namespace JSX {
    interface IntrinsicElements {
      ["math-field"]: CustomElement<MathfieldElementAttributes>;
    }
  }
}

Then create a component that wraps the <math-field> web component

// components>MathField.tsx

import { useEffect, useRef } from "react";
import {  MathfieldElement } from "mathlive";

const MathField = () => {
  // `MathfieldElement` works for TS
  const mathFieldRef = useRef<MathfieldElement>(null);

  useEffect(() => {
    mathFieldRef.current?.setOptions({
       // whatever
    });
  }, []);

  return (
    <math-field ref={mathFieldRef} />
  );
};

export default MathField;

and then import the component dynamically like this:

// MyApp.tsx

const ClientSideMathField = dynamic(() => import("components/MathField"), { ssr: false })

const MyApp = () => { // fancy stuff return (

) }

[AdamZajler]

@arnog Sorry for late respond. I tried to implement it 1:1 how you show it here, but still I got errors from Next 13 :|

My general goal is to implement math-live & compute-enginge for displaying and calculating stuff... Is it even possible on Next.13? And meaby CodeSandbox will help here?

[arnog]

Others have been able to do it, so it's certainly possible. I'm confident you will figure it out. Hard to provide more guidance without information about your code or the errors that you ran into, but best of luck.