关于NextJs第三方组件引用问题

问题：

当我打算使用富文本插件时，最开始使用方式是跟react项目常规使用方式一致直接import进来当作组件使用，如下

import { Editor, Toolbar } from '@wangeditor/editor-for-react'

在正常的react项目中是完全可以的，但是我在nextJs中使用时就出现如下错误：ReferenceError: Element is not defined

网上搜了一圈说是用 next/dynamic 解决

import dynamic from 'next/dynamic';

const  { Editor, Toolbar }  = dynamic(import("@wangeditor/editor-for-react"), {
  ssr: false,
  loading: () => <p>Loading ...</p>, 
});

这种调用方式虽然没有报错，但是Editor等组件直接undefined了

最后尝试自定义组件内components/Editor/index.js使用import导入组件使用后再export暴露，

再通过next/dynamic加载自定义组件结合使用，这个时候功能正常了。

const ReactWEditor = dynamic(import("../components/Editor"), {
  ssr: false,
  loading: () => <p>Loading ...</p>, 
});

现在基本功能需求是实现了的，也没有报错。但是想明白这是个什么原理？