React/NextJS环境下升级Grapesjs至v0.21.1后编辑器崩溃求助

问题详情 #

• 项目环境：React/NextJS
• 现象：升级Grapesjs到v0.21.1后编辑器完全无法运行，回退到v0.20.4可正常工作
• 核心报错：

Object.defineProperty called on non-object
TypeError: Object.defineProperty called on non-object at Function.defineProperty (<anonymous>) at __webpack_require__.r (http://localhost:3000/_next/static/chunks/webpack.js?ts=1704267939900:227:21) at eval (webpack-internal:///./node_modules/grapesjs/dist/grapes.mjs:1:21) at ./node_modules/grapesjs/dist/grapes.mjs (http://localhost:3000/_next/static/chunks/src_components_DeveloperHub_Hub_js.js:11579:1) at options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1704267939900:683:31) at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?ts=1704267939900:37:33) at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1704267939900:338:21) at eval (webpack-internal:///./src/components/DeveloperHub/Hub.js:15:67) at ./src/components/DeveloperHub/Hub.js (http://localhost:3000/_next/static/chunks/src_components_DeveloperHub_Hub_js.js:8422:1) at options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1704267939900:683:31) at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?ts=1704267939900:37:33) at Function.fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1704267939900:338:21)

• 已尝试操作：删除node_modules并重新安装，问题未解决

可行解决方案 #

1. 配置NextJS转译Grapesjs模块 #

Grapesjs v0.21.x默认输出ES模块（grapes.mjs），NextJS的Webpack默认可能不转译第三方ES模块，导致兼容性问题。在next.config.js中添加：

module.exports = {
  transpilePackages: ['grapesjs'],
};

重启开发服务后再测试。

2. 彻底清理依赖缓存 #

仅删除node_modules不够，需要清理包管理器缓存：

• npm用户：npm cache clean --force
• yarn用户：yarn cache clean
  然后重新执行npm install或yarn install

3. 核对初始化代码的API变更 #

v0.21.x可能调整了部分API或配置项，对比v0.20.4的初始化代码，检查是否有废弃的参数或调用方式。比如某些插件的注册方式、编辑器配置项的名称是否发生变化，参考官方更新日志调整代码。

4. 测试中间版本 #

如果v0.21.1直接崩溃，尝试安装v0.21.0缩小问题范围：

npm install grapesjs@0.21.0

确认是否是该版本引入的特定问题，帮助定位具体变更点。

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