ERROR Cannot set property crypto of #<Object> which has only a getter

[745740681]

bug 描述

nuxt3 中引入 WangEditor5 使用yarn dev 时报 ERROR Cannot set property crypto of #<Object> which has only a getter 我看了一下 上面的代码中 global.crypto 只要赋值就会报这个错误。我用的环境时 nuxt3 + vue3 + ts 构建的项目。这个错误网上几乎没有答案，是不是我是第一个遇到这个问题的人。 *

你预期的样子是？

使用Nuxt 的 yarn dev 时能够不报错

系统和浏览器及版本号

• 操作系统 Window10
• 浏览器和版本 google 最新版本

wangEditor 版本

"@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^5.1.12",

demo 能否复现该 bug ？

能

• 中文 demo https://www.wangeditor.com/demo/
• English demo https://www.wangeditor.com/demo/?lang=en

在线 demo

请尽量提供在线 demo （推荐以下网站），帮助我们最低成本复现 bug

• https://codesandbox.io/
• https://codepen.io/
• https://stackblitz.com/

最小成本的复现步骤

你用nuxt3框架中加入wangeditor 就可以复现，这个BUG我想应该非常容易出现，只要你用了就有这个问题 （请告诉我们，如何最快的复现该 bug）

• 步骤一
• 步骤二
• 步骤三

[pengchengmi]

1. 我用 next.js / npm run build 的时候，就会报此错误，TypeError: Cannot set property crypto of #<Object> which has only a getter，但是 crypto 模块本身和 wangEditor 没有什么关系。

2. 也会报此错误 TypeError: document.getElementsByTagName is not a function。

框架

1. react
2. Next.js 14
3. 我开起了 readonly；

      <div>
            <Editor
                defaultConfig={editorConfig}
                value={html}
                onCreated={setEditor} // 编译器在创建的时候 用的
                mode="simple"
                onChange={
                    editor => {
                       setHtml(editor.getHtml())
                    }
                }
            />
        </div>

---

问题解决 2024.11.28.11.38 解决方案：

1. 在React + Next.js环境下，Editor 它是一个 客户端组件，并且 在使用过程中，还要去 调用 window等一系列方法，但是 next 下面，页面都是 ssr 服务端渲染的，服务端 没有 window 实例，所以 在 npm run build 的时候 会报错。
2. next.js 有 禁止 ssr渲染的方法
   1. 在 Editor 这个页面是 不动的，但是 组件要作为 页面组件 导出，也就是 export default myEditor;
   2. 然后再 用 这个 Editor 的页面下：
      1. import dynamic from "next/dynamic";; 导入 动态渲染；
      2. const YourEditor = dynamic(() => import("@/components/editor/YourEditorPage"), {ssr:false})
      3. 然后在 npm run build 就可以了。

[yyysss123]

使用ClientOnly 包裹即可