升级prosemirror.model至1.18.1报Schema is not a constructor错误
问题排查背景
项目中prosemirror-model从1.16.1升级到1.18.1后,页面加载时报错Schema is not a constructor,报错触发点为实例化Schema的代码行:
export const schema = new Schema({ nodes, marks });
官方文档和源码示例均使用构造函数创建Schema实例,未找到非构造函数的实例化方案,需要定位报错原因和修复路径。
完整报错栈如下:
Uncaught TypeError: prosemirror_model__WEBPACK_IMPORTED_MODULE_0__.Schema is not a constructor at Module.../../components/src/20-molecules/rte/config/schema.js (schema.js:122:1) at __webpack_require__ (bootstrap:781:1) at fn (bootstrap:149:1) at Module.../../components/src/20-molecules/rte/index.js (editor.css?e9c4:45:1) at __webpack_require__ (bootstrap:781:1) at fn (bootstrap:149:1) at Module.../../components/src/index.js (index.js:1:1) at __webpack_require__ (bootstrap:781:1) at fn (bootstrap:149:1) at Module../src/containers/edit/edit.js (index.scss?46f0:45:1) at __webpack_require__ (bootstrap:781:1) at fn (bootstrap:149:1) at Module../src/containers/edit/index.js (edit.js:600:1) at __webpack_require__ (bootstrap:781:1) at fn (bootstrap:149:1) at Module../src/App.js (types.js:3:1) at __webpack_require__ (bootstrap:781:1) at fn (bootstrap:149:1) at Module../src/index.js (i18n.js:74:1) at __webpack_require__ (bootstrap:781:1) at fn (bootstrap:149:1) at Object.0 (url.js:251:1) at __webpack_require__ (bootstrap:781:1) at checkDeferredModules (bootstrap:45:1) at Array.webpackJsonpCallback [as push] (bootstrap:32:1) at main.chunk.js:1:57
报错原因与修复方案
这个报错和Schema的实例化写法无关,1.18.1版本没有修改Schema的构造函数逻辑,问题出在模块导入环节,拿到的Schema变量不是预期的构造函数对象,按优先级排查以下几点即可:
- 修正导入语句
1.16.1版本对不规范的导入写法做了兼容,1.18.1版本收紧了导出逻辑,非标准导入会拿错导出对象:- 如果之前用的是默认导入
import Schema from 'prosemirror-model',改成命名导入 - 如果之前用的是整体导入
import * as ProseMirrorModel from 'prosemirror-model',不要直接拿整体对象当构造函数用,取ProseMirrorModel.Schema即可
标准写法参考:
import { Schema } from 'prosemirror-model' // 后续原有new Schema({nodes, marks})逻辑完全不用改 - 如果之前用的是默认导入
- 清理依赖与构建缓存
版本升级后残留的旧版本依赖、webpack持久化缓存会导致打包时混合新旧版本的导出结构,触发类型错误:- 删除项目
node_modules目录、对应包管理器的锁文件(package-lock.json/yarn.lock/pnpm-lock.yaml) - 重新执行依赖安装命令
- 清空
node_modules/.cache下的webpack缓存目录,重启构建流程
- 删除项目
- 校验私有制品库的包完整性
如果项目用的是公司内部私有制品库拉取依赖,大概率是制品库同步npm包时出错,把prosemirror-model的入口文件映射错了,对比官方1.18.1版本包中package.json的main/module/exports字段配置,修正制品库内的包配置即可。 - 排查babel模块转换配置
如果项目babel配置开启了不合理的CommonJS转换,会把ESM命名导出嵌套到default属性下,导致拿到的Schema不是构造函数,可以临时在babel规则中排除prosemirror相关包验证问题。
内容的提问来源于stack exchange,提问作者Bartjo77
相关产品推荐
相关产品推荐

