unable to make a package run in nextjs which is working in reactjs

Question

Link I am using JSME React npm package for using JSME editor to run on my app. this package is working perfectly fine in reactjs. But not working in nextjs project. can anyone point out where I am doing wrong. Whenever i install in a next js problem and run the app i am getting JSME initialization error: HTML id jsme11798 not found Error in console and the editor is not visible.

import React, { useEffect } from "react";
import { Jsme } from "jsme-react";

function Editor() {
  return (
    <div>
      <Jsme height="300px" width="400px" options="oldlook,star" />
    </div>
  );
}

export default Editor;

Chemi Adel · Accepted Answer · 2021-11-14 11:46:04Z

2

Most of the editors need to run on browser, try to import Editor component on client side only. Documentaion

In your page file:

import dynamic from 'next/dynamic'

const Editor= dynamic(
  () => import('../components/Editor'), //Editor component path
  { ssr: false }
)

edited Nov 14, 2021 at 11:46

answered Nov 14, 2021 at 10:35

Chemi Adel

2,1651 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

unable to make a package run in nextjs which is working in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related