无法渲染组件

[crypto-jianyong]

用Vue 3+Vite本地开发的时候，报错：
node_modules/jsoneditor/dist/jsoneditor.min.js?v=8e2051fe' does not provide an export named 'default' (at json-editor.vue:2:8)
好奇怪你们是怎么成功启动的

[guyue88]

@crypto-jianyong 代码可以贴一下嘛

[crypto-jianyong]

@guyue88

<script setup lang="ts">
import { ref } from 'vue'
import JsonEditorVue from 'json-editor-vue3'

const json = ref({})
</script>

<template>
  <json-editor-vue v-model="json" class="editor" />
</template>

<style lang="scss">
.editor {
  position: relative;
  height: 80vh;
}
</style>

[guyue88]

@crypto-jianyong 能不能给个简单的完整按理？这样不好定位问题

[crypto-jianyong]

@guyue88 其实就是很基本的引用，不过jsoneditor.min.js确实没有export default，按理说应该不能直接 import JsonEditor from "jsoneditor"; 不知道你那边为什么可以

[guyue88]

@crypto-jianyong 这个其实是vite不兼容commonjs的问题。解决方案如下：

vite.config.js

import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
export default defineConfig({
  plugins: [vue(),viteCommonjs()],
})

解决了麻烦给点个赞！

[crypto-jianyong]

@guyue88 非常感谢帮忙解决。
Vite的 官方文档 有提到：Pre-bundle them to improve page loading speed and convert CommonJS / UMD modules to ESM.
所以不需要这个plugin，不过得直接在项目源代码里 import 'jsoneditor' 才会转换。

[guyue88]

@crypto-jianyong ok，可以解决就行