引入wangeditor 报错 error in ./node_modules/@wangeditor/editor/dist/index.esm.js

 ERROR  Failed to compile with 1 errors                                                                                                       17:53:12

 error  in ./node_modules/@wangeditor/editor/dist/index.esm.js

Module parse failed: Unexpected token (18:966)
You may need an appropriate loader to handle this file type.
|  * @param {object} options with values that will be used to replace placeholders
|  * @returns {any[]} interpolated
|  */function ry(e,t){const n=/\$/g;let r=[e];if(null==t)return r;for(const e of Object.keys(t))if("_"!==e){let o=t[e];"string"==typeof o&&(o=n[Symbol.replace](o,"$$$$")),r=ny(r,new RegExp(`%\\{${e}\\}`,"g"),o)}return r}var oy=(Xv=ty("apply"),class{constructor(e){Object.defineProperty(this,Xv,{value:iy}),this.locale={strings:{},pluralize:e=>1===e?0:1},Array.isArray(e)?e.forEach(Qv(this,Xv)[Xv],this):Qv(this,Xv)[Xv](e)}translate(e,t){return this.translateArray(e,t).join("")}translateArray(e,t){if(!function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}(this.locale.strings,e))throw new Error(`missing string: ${e}`);const n=this.locale.strings[e];if("object"==typeof n){if(t&&void 0!==t.smart_count){return ry(n[this.locale.pluralize(t.smart_count)],t)}throw new Error("Attempted to use a string with plural forms, but no value was given for %{smart_count}")}return ry(n,t)}});function iy(e){if(null==e||!e.strings)return;const t=this.locale;this.locale={...t,strings:{...t.strings,...e.strings}},this.locale.pluralize=e.pluralize||t.pluralize}var ay=function(){var e={},t=e._fns={};return e.emit=function(e,n,r,o,i,a,u){var s=function(e){var n=t[e]?t[e]:[],r=e.indexOf(":"),o=-1===r?[e]:[e.substring(0,r),e.substring(r+1)],i=Object.keys(t),a=0,u=i.length;for(;a<u;a++){var s=i[a];if("*"===s&&(n=n.concat(t[s])),2===o.length&&o[0]===s){n=n.concat(t[s]);break}}return n}(e);s.length&&function(e,t,n){var r=0,o=t.length;for(;r<o&&t[r];r++)t[r].event=e,t[r].apply(t[r],n)}(e,s,[n,r,o,i,a,u])},e.on=function(e,n){t[e]||(t[e]=[]),t[e].push(n)},e.once=function(t,n){this.on(t,(function r(){n.apply(this,arguments),e.off(t,r)}))},e.off=function(e,t){var n=[];if(e&&t)for(var r=this._fns[e],o=0,i=r?r.length:0;o<i;o++)r[o]!==t&&n.push(r[o]);n.length?this._fns[e]=n:delete this._fns[e]},e};var uy={urlAlphabet:"useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"};let{urlAlphabet:sy}=uy,ly=e=>crypto.getRandomValues(new Uint8Array(e)),cy=(e,t,n)=>{let r=(2<<Math.log(e.length-1)/Math.LN2)-1,o=-~(1.6*r*t/e.length);return()=>{let i="";for(;;){let a=n(o),u=o;for(;u--;)if(i+=e[a[u]&r]||"",i.length===t)return i}}};var fy={nanoid:(e=21)=>{let t="",n=crypto.getRandomValues(new Uint8Array(e));for(;e--;){let r=63&n[e];t+=r<36?r.toString(36):r<62?(r-26).toString(36).toUpperCase():r<63?"_":"-"}return t},customAlphabet:(e,t)=>cy(e,t,ly),customRandom:cy,urlAlphabet:sy,random:ly},dy=function(e){if("number"!=typeof e||isNaN(e))throw new TypeError("Expected a number, got "+typeof e);var t=e<0,n=["B","KB","MB","GB","TB","PB","EB","ZB","YB"];if(t&&(e=-e),e<1)return(t?"-":"")+e+" B";var r=Math.min(Math.floor(Math.log(e)/Math.log(1024)),n.length-1);e=Number(e/Math.pow(1024,r));var o=n[r];return e>=10||e%1==0?(t?"-":"")+e.toFixed(0)+" "+o:(t?"-":"")+e.toFixed(1)+" "+o};function py(e,t){this.text=e=e||"",this.hasWild=~e.indexOf("*"),this.separator=t,this.parts=e.split(t)}py.prototype.match=function(e){var t,n,r=!0,o=this.parts,i=o.length;if("string"==typeof e||e instanceof String)if(this.hasWild||this.text==e){for(n=(e||"").split(this.separator),t=0;r&&t<i;t++)"*"!==o[t]&&(r=t<n.length&&o[t]===n[t]);r=r&&n}else r=!1;else if("function"==typeof e.splice)for(r=[],t=e.length;t--;)this.match(e[t])&&(r[r.length]=e[t]);else if("object"==typeof e)for(var a in r={},e)this.match(a)&&(r[a]=e[a]);return r};var hy=/[\/\+\.]/,gy=function(e,t){function n(t){var n=function(e,t,n){var r=new py(e,n||/[\/\.]/);return void 0!==t?r.match(t):r}(t,e,hy);return n&&n.length>=2}return t?n(t.split(";")[0]):n};var vy=0;function yy(e){return"__private_"+vy+++"_"+e}var my=yy("publish");class by{constructor(){Object.defineProperty(this,my,{value:wy}),this.state={},this.callbacks=[]}getState(){return this.state}setState(e){const t={...this.state},n={...this.state,...e};this.state=n,function(e,t){if(!Object.prototype.hasOwnProperty.call(e,t))throw new TypeError("attempted to use private field on non-instance");return e}(this,my)[my](t,n,e)}subscribe(e){return this.callbacks.push(e),()=>{this.callbacks.splice(this.callbacks.indexOf(e),1)}}}function wy(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];this.callbacks.forEach((e=>{e(...t)}))}by.VERSION="2.0.3";var Ey=function(e){const t=e.lastIndexOf(".");return-1===t||t===e.length-1?{name:e,extension:void 0}:{name:e.slice(0,t),extension:e.slice(t+1)}},Dy={md:"text/markdown",markdown:"text/markdown",mp4:"video/mp4",mp3:"audio/mp3",svg:"image/svg+xml",jpg:"image/jpeg",png:"image/png",gif:"image/gif",heic:"image/heic",heif:"image/heif",yaml:"text/yaml",yml:"text/yaml",csv:"text/csv",tsv:"text/tab-separated-values",tab:"text/tab-separated-values",avi:"video/x-msvideo",mks:"video/x-matroska",mkv:"video/x-matroska",mov:"video/quicktime",doc:"application/msword",docm:"application/vnd.ms-word.document.macroenabled.12",docx:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",dot:"application/msword",dotm:"application/vnd.ms-word.template.macroenabled.12",dotx:"application/vnd.openxmlformats-officedocument.wordprocessingml.template",xla:"application/vnd.ms-excel",xlam:"application/vnd.ms-excel.addin.macroenabled.12",xlc:"application/vnd.ms-excel",xlf:"application/x-xliff+xml",xlm:"application/vnd.ms-excel",xls:"application/vnd.ms-excel",xlsb:"application/vnd.ms-excel.sheet.binary.macroenabled.12",xlsm:"application/vnd.ms-excel.sheet.macroenabled.12",xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",xlt:"application/vnd.ms-excel",xltm:"application/vnd.ms-excel.template.macroenabled.12",xltx:"application/vnd.openxmlformats-officedocument.spreadsheetml.template",xlw:"application/vnd.ms-excel",txt:"text/plain",text:"text/plain",conf:"

 解决办法

找到自己项目中的webpack.base.conf.js文件

 找到下图中的代码下方,插入一块代码就解决了

 

   {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/@wangeditor')
        ]
      },

 最后完整代码,改完记得重启

<think>好的,我需要帮助用户解决在Vue3项目中使用@wangeditor/editor-for-vue时遇到的npm依赖冲突问题。根据用户提供的引用信息,特别是引用[1]和引用[2],问题主要出在版本不兼容上。 首先,引用[1]提到用户的项目中安装了Vue 2.6.12,而@wangeditor/editor-for-vue@1.0.2需要Vue ^2.6.14。这说明用户可能在尝试将Vue2版本的WangEditor与Vue3项目一起使用,导致版本冲突。Vue3和Vue2在核心API上有较大差异,因此依赖包必须明确支持Vue3。 接下来,引用[2]提到@wangeditor/editor-for-vue@1.0.2依赖的@wangeditor/editor版本是5.0.1,但可能存在其他插件如@wangeditor/plugin-formula和@wangeditor/plugin-mention的版本不兼容问题。这说明即使主包升级到Vue3版本,相关插件也需要同步更新,否则仍会导致依赖树解析失败。 用户的目标是让Vue3和@wangeditor/editor-for-vue兼容,因此必须确保所有相关依赖都支持Vue3。根据WangEditor的官方文档,Vue3支持的版本应该在@wangeditor/editor-for-vue的后续版本中,比如5.x或更高。需要检查当前安装的版本是否为Vue3兼容版本,并升级到正确的版本。 可能的解决方案包括:首先确认当前安装的@wangeditor/editor-for-vue版本是否支持Vue3。如果用户错误地安装了Vue2版本的包,需要卸载并安装Vue3兼容版本。此外,更新所有相关插件到与Vue3兼容的版本,确保整个依赖树一致。如果存在残留的旧版本依赖或锁定文件(如package-lock.json),可能需要清除并重新安装。 还需要考虑npm的依赖解析机制。用户可能在安装时使用了错误的参数,或者存在缓存问题。建议用户清理node_modules和package-lock.json,然后使用正确的命令重新安装依赖。如果问题仍然存在,可以尝试使用npm的--force或--legacy-peer-deps选项,但这只是临时解决方案,最好还是升级到兼容版本。 另外,引用[3]提到关于npm的bug,建议删除package-lock.json和node_modules后重新安装。这也适用于当前情况,可能帮助解决依赖树解析问题。同时,确保所有依赖项在package.json中正确指定版本范围,避免版本冲突。 最后,总结解决方案步骤:确认并安装Vue3兼容的WangEditor版本,更新相关插件,清理旧依赖,重新安装,并验证配置。如果用户仍有问题,可能需要检查其他依赖项是否有冲突,或者联系WangEditor维护者获取支持。</think>### Vue3与@wangeditor/editor-for-vue依赖冲突解决方案 #### 核心问题诊断 根据错误日志分析: 1. **版本不匹配** - `@wangeditor/editor-for-vue@1.0.2`要求`vue@^2.6.14`(Vue2版本)[^1] - 你的项目使用`vue@3.x`(Vue3版本)导致依赖冲突 - WangEditor的Vue3适配版本需使用`@wangeditor/editor-for-vue@5.x+` 2. **依赖树解析失败** ```bash npm ERR! Found: @wangeditor/editor@5.0.1 npm ERR! peer @wangeditor/editor@">=5.0.0" from @wangeditor/plugin-formula@1.0.11 ``` 插件版本与核心库版本不兼容[^2] #### 分步解决方案 ```bash # 1. 清理旧版本(关键步骤) rm -rf node_modules package-lock.json # 2. 安装Vue3适配版本 npm install @wangeditor/editor@^5.1.23 \ @wangeditor/editor-for-vue@^5.1.23 \ @wangeditor/plugin-md@^1.1.3 ``` #### 版本兼容验证表 | 依赖包 | Vue3兼容版本 | 最低要求版本 | |----------------------------|-------------|------------| | @wangeditor/editor | >=5.1.0 | 5.1.23 | | @wangeditor/editor-for-vue | >=5.1.0 | 5.1.23 | | @wangeditor/plugin-md | >=1.1.0 | 1.1.3 | #### 配置验证代码 ```typescript // main.ts import { createApp } from 'vue' import App from './App.vue' import WangEditor from '@wangeditor/editor-for-vue' const app = createApp(App) app.use(WangEditor) // 确保TypeScript类型正确注册[^3] app.mount('#app') ``` #### 强制安装方案(应急使用) ```bash # 仅用于临时跳过依赖检查(可能引入不稳定因素) npm install --legacy-peer-deps ``` #### 典型错误场景处理 **场景:仍报`peer vue@"^2.6.14"`错误** 检查`node_modules/@wangeditor/editor-for-vue/package.json`,确认实际安装版本是否为5.x+。若残留旧版本,执行: ```bash npm uninstall @wangeditor/editor-for-vue --save npm cache clean --force ``` #### 版本锁定推荐 在`package.json`中精确指定版本: ```json { "dependencies": { "@wangeditor/editor": "5.1.23", "@wangeditor/editor-for-vue": "5.1.23", "@wangeditor/plugin-md": "1.1.3" } } ``` --- ### 相关问题 1. 如何通过`npm-check-updates`批量升级依赖版本? 2. 在Monorepo项目中如何管理WangEditor的多实例依赖? 3. 如何为WangEditor编写Vue3 Composition API的自定义插件? [^1]: 版本冲突源于Vue2/Vue3的API不兼容 [^2]: 插件系统需要与核心库保持版本同步 [^3]: TypeScript类型定义需匹配实际安装版本
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学不会•

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值