CODEWITHSUNDEEP
javascriptreactjsnpmnext.js
harsh
harsh

Reputation: 555

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

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;

enter image description here

Upvotes: 0

Views: 357

Answers (1)

Chemi Adel
Chemi Adel

Reputation: 2165

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

Upvotes: 2

Related Questions