当前位置：首页 > news >正文

vue3+ts+vite环境中使用json-editor-vue3，记录遇到的奇奇怪怪问题！！！

news 来源：原创 2025/5/17 22:23:32

文章目录

前言
一、json-editor-vue3是什么？
二、使用步骤
- 1.安装插件
- 2.引入组件
- 3.使用组件
三、解决问题
四、优化
五、总结
六、补充注意

前言

vue3+ts+vite环境中使用json-editor-vue3
仅仅简单记录下最近使用这个插件的一些注意事项，这个插件很容易使用的。
json-editor-vue3文档

一、json-editor-vue3是什么？

它是一个基于 jsoneditor 开发的vue3 json editor，支持全屏编辑，有完善的事件回调，可以在失去焦点时，对编辑器内容做校验。

二、使用步骤

1.安装插件

npm install json-editor-vue3
或
pnpm install json-editor-vue3
或
yarn add json-editor-vue3

2.引入组件

局部引入

import JsonEditorVue from 'json-editor-vue3'

全局引入

import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue3'

Vue.use(JsonEditorVue)

3.使用组件

      <json-editor-vue
        class="json-editor"
        v-model="data"
        :language="'zh-CN'"
        @update:modelValue="changeValue"
        @validationError="editError"
      />

三、解决问题

是不是感觉很简单，但是这里会有问题的

问题 Uncaught (in promise) SyntaxError: The requested module '/xx/xxx/xxx/node_modules/.pnpm/jsoneditor@9.10.5/node_modules/jsoneditor/dist/jsoneditor.min.js?v=44816bbd' does not provide an export named 'default'

这个问题其实很常见，官方文档也针对说明了，其实就是底层ES6模块和CommonJs模块导致的导出方式差异的问题。
在这里插入图片描述

安装@originjs/vite-plugin-commonjs插件

npm install @originjs/vite-plugin-commonjs
或
pnpm install @originjs/vite-plugin-commonjs
或
yarn add @originjs/vite-plugin-commonjs

在vite.config.ts/vite.config.js文件中引入，并且使用

import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

// 使用
plugins: [viteCommonjs()]

现在重新启动，就能正常使用啦
效果如下：
在这里插入图片描述

四、优化

1，认知@originjs/vite-plugin-commonjs

@originjs/vite-plugin-commonjs 是一个用于 Vite 项目的插件，它可以帮助你将 CommonJS 模块转换为 ES6 模块，这在某些情况下很有用，比如当你使用一些只支持 CommonJS 模块的库时。

2，viteCommonjs的源码
我们可以在node_module中找到@originjs打开可以看到以下代码
在这里插入图片描述

这里呢其实是viteCommonjs有两个属性，一个是include属性，一个是exclude属性
通俗的理解就是，那些插件需要转成ES6模块，除了那些插件其他的都转成ES6模块。
这两个属性我其实在文档上都没找到说明，还是看源码找到的。
为什么需要加这个属性，因为如果不加这个属性，那么意味着vite会将所有的CommonJs规范转成ES6规范，但是我们很多插件本来就是ES6规范，这些并不需要转啊，虽然大部分情况下转下也没关系，但这增加了打包任务啊，所以其实这里可以加一个include属性，将我们需要的转下即可。

但这里还需要注意下，我开始是这么写的viteCommonjs({ include: ['json-editor-vue3'] })，因为是json-editor-vue3插件吗，但我们看看以下结果。

在这里插入图片描述

还是不可以的，还是抛出跟最初一样的错误。。。
相信很多小伙伴可能跟我开始一样，感觉很奇怪，是不是写法不对，是不是应该这么写viteCommonjs({ include:['node_modules/json-editor-vue3'] })，但这样依然不行的哈
我们不妨仔细看看json-editor-vue3的底层或者看看官方文档说的这句话

在这里插入图片描述

我想都明白了吧，其实最开始压根就不是json-editor-vue3这个插件不支持ES6规范，而是这个插件的底层依赖jsoneditor不支持，我们再看看报错抛出的信息
SyntaxError: The requested module 'xx/xxx/xxx/node_modules/.pnpm/jsoneditor@9.10.5/node_modules/jsoneditor/dist/jsoneditor.min.js?v=6aeac420' does not provide an export named 'default'
其实说的都是jsoneditor这个插件不支持，所以应该这么写才对
viteCommonjs({ include: ['jsoneditor'] })

@originjs/vite-plugin-commonjs（npm链接）
@originjs/vite-plugin-commonjs（git链接）

五、总结

以上是我在实际使用json-editor-vue3的过程，最后说下为什么比较强大呢，因为它是由一个错误回掉的validationError,这样我们是可以知道这个输入json内容和不合规的，并且怎么提示。
在这里插入图片描述

温馨提示，如果发现这个viteCommonjs()这么写或者viteCommonjs({ include: ['jsoneditor'] })这么写，都会抛出那个错误，那么请通过rm -rf node_modules/ 删除包，重新安装下，再试一次！！！

六、补充注意

该内容是后期追加

用pnpm管理包的小伙伴们注意下了，我发现了一个很奇怪的现象，我最开始用pnpm版本9.1.1的，发现不管这个viteCommonjs里面怎么写，只要重新启动命令就会抛出上诉那个错误，这个时候只有下载node包，重新安装启动才行，并且只有第一次运行不会抛错，后期重新运行启动项目都会依然抛错。
查了很多方案，看了源码，甚至想找到转换后的源码放在哪里，是不是每次启动都会转一次，导致抛错。但是都没找到。
后面想着是不是环境版本太高，就考虑node和pnpm版本降一降，我发现pnpm降到5.1.1的时候，卸载包重装后，这里不管怎么写都是生效的，viteCommonjs({ include: ['jsoneditor'] })或者viteCommonjs({ include: ['json-editor-vue3'] })都能运行成功了，并且我不管在怎么重新启动运行项目，都不会抛错了。，但我想着5.1.1会不会太低了。
为此我最后改到了pnpm版本8.1.1，依然卸载包重装，发现viteCommonjs({ include: ['json-editor-vue3'] })这个写法不行，viteCommonjs({ include: ['jsoneditor'] })这个写法才可以，此时我不管在怎么重新启动运行项目，都不会抛错了。
最终我的pnpm版本定在了8.1.1
提示，以上不管怎么调整viteCommonjs配置，只要你加了，测试和线上环境都不会抛出这个错误，因为打包最终都是读取转换后的文件，而项目运行的时候vite配置更改，都会重新读取，重新的过程可能会发生很奇妙的事情。

有些遇到的问题我也感觉很奇奇怪怪，vite的配置问题，跟我pnpm版本有多少关系呢？我真不知道，我理解的是pnpm只是一个安装包管理包的工具，反正菜鸡一个，确实想不明白，就记录一下吧，希望各位不会遇到这些奇奇怪怪的问题。。。