在React正常运行的jsme-react包在Next.js中报错无法运行如何解决

该报错的核心原因是Next.js默认启用服务端渲染（SSR），而jsme-react依赖浏览器端DOM API完成初始化逻辑，服务端渲染阶段不存在浏览器DOM环境，导致组件初始化时无法找到对应ID的DOM节点，触发错误。

修复方案 #

使用Next.js内置的dynamic方法动态导入jsme-react组件，同时关闭该组件的服务端渲染能力即可，修改后代码如下：

import dynamic from 'next/dynamic';

// 动态导入Jsme组件，禁用服务端渲染
const Jsme = dynamic(() => import('jsme-react').then(mod => mod.Jsme), {
  ssr: false
});

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

export default Editor;

如果你的项目使用的是Next.js 13+的App Router模式，需要在组件顶部额外添加'use client'指令，标记为客户端组件：

'use client';
import dynamic from 'next/dynamic';

const Jsme = dynamic(() => import('jsme-react').then(mod => mod.Jsme), {
  ssr: false
});

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

export default Editor;

修改完成后重启项目，即可正常加载JSME编辑器。

内容的提问来源于stack exchange，提问作者harsh