Problem with Next 13 #55

Activity

1. arnog commented on Nov 4, 2022

   

   arnog

   on Nov 4, 2022

   More actions

   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 (
       <ClientSideMathField />
     )
   }
2. AdamZajler commented on Nov 27, 2022

   

   AdamZajler

   on Nov 27, 2022

   Author

   More actions

   @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?
3. arnog commented on Nov 27, 2022

   

   arnog

   on Nov 27, 2022

   More actions

   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.