Not working with Vue 3 & TypeScript

[antogno]

Before you start, please make sure to:

• [X] Read the doc
• [X] Have tried the latest version
• [X] Search to see if your issue already exists
• [x] Look for / ask questions on Stack Overflow
• [X] Reproduce the bug in incognito/private mode to avoid interference from browser extensions

Link to minimal reproduction

None

Steps to reproduce

1. Install JSON Editor Vue in a Vue 3 & TypeScript app:

   npm i json-editor-vue vanilla-jsoneditor

2. Try importing it as so:

   <script setup lang="ts">
       import JsonEditorVue from  'json-editor-vue';
   </script>

What is expected?

I expected this to work:

<template>
    <JsonEditorVue v-model="modelValue" />
</template>

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

    interface Props {
        modelValue: any;
    }

    const props = defineProps<Props>();

    const modelValue = ref(props.modelValue);
</script>

What is actually happening?

Instead I got this error:

Could not find a declaration file for module 'json-editor-vue'. '/workspace/node_modules/json-editor-vue/dist/json-editor-vue.umd.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/json-editor-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'json-editor-vue';`ts(7016)

System Info

System:
    OS: Linux 5.15 Alpine Linux
    CPU: (4) x64 12th Gen Intel(R) Core(TM) i5-12400
    Memory: 1.73 GB / 5.80 GB
    Container: Yes
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.20.1 - /usr/bin/node
    npm: 7.24.2 - /workspace/node_modules/.bin/npm
  npmPackages:
    @fortawesome/fontawesome-free: ^6.4.0 => 6.4.0 
    @fortawesome/fontawesome-svg-core: ^6.4.0 => 6.4.0 
    @fortawesome/free-brands-svg-icons: ^6.4.0 => 6.4.0 
    @fortawesome/free-regular-svg-icons: ^6.4.0 => 6.4.0 
    @fortawesome/free-solid-svg-icons: ^6.4.0 => 6.4.2 
    @fortawesome/vue-fontawesome: ^3.0.3 => 3.0.3 
    @fullcalendar/core: ^6.1.8 => 6.1.8 
    @fullcalendar/daygrid: ^6.1.8 => 6.1.8 
    @fullcalendar/interaction: ^6.1.8 => 6.1.8 
    @fullcalendar/vue3: ^6.1.8 => 6.1.8 
    @h-hg/docsify-image-caption: ^0.1.2 => 0.1.2 
    @jamescoyle/vue-icon: ^0.1.2 => 0.1.2 
    @markbattistella/docsify-sidebarfooter: ^4.0.0 => 4.0.0 
    @mdi/font: ^7.0.96 => 7.2.96 
    @mdi/js: ^7.2.96 => 7.2.96 
    @rodrigogs/mysql-events: ^0.6.0 => 0.6.0 
    @shopify/draggable: ^1.0.0-beta.12 => 1.0.0-beta.12 
    @ttskch/select2-bootstrap4-theme: ^1.5.2 => 1.5.2 
    @types/leaflet.fullscreen: ^1.6.1 => 1.6.1 
    @types/lodash: ^4.14.197 => 4.14.197 
    @vitejs/plugin-vue: ^4.2.3 => 4.2.3 
    @vue-leaflet/vue-leaflet: ^0.9.0 => 0.9.0 
    @vue/test-utils: ^2.4.0 => 2.4.0 
    @vueuse/core: ^10.1.0 => 10.1.2 
    accounting-js: ^1.1.1 => 1.1.1 
    animate.css: ^4.1.1 => 4.1.1 
    apexcharts: ^3.35.3 => 3.41.0 
    autobahn-browser: ^20.9.2 => 20.9.2 
    axios: ^0.21.1 => 0.19.2 
    bootbox: ^5.5.2 => 5.5.3 
    bootstrap: ^4.6.2 => 4.6.2 
    bootstrap-fileinput: ^5.1.5 => 5.5.2 
    bootstrap-slider: ^11.0.2 => 11.0.2 
    bootstrap4-datetimepicker: ^5.2.3 => 5.2.3 
    clipboard: ^2.0.6 => 2.0.11 
    cross-env: ^7.0 => 7.0.3 
    cssmin: ^0.4.3 => 0.4.3 
    currency.js: ^2.0.4 => 2.0.4 
    cz-conventional-changelog: ^3.3.0 => 3.3.0 
    datatables.net-bs4: ^1.10.23 => 1.13.4 
    datatables.net-buttons-bs4: ^1.6.5 => 1.7.1 
    datatables.net-colreorder-bs4: ^1.5.3 => 1.6.2 
    datatables.net-fixedcolumns-bs4: ^3.3.2 => 3.3.3 
    datatables.net-fixedheader-bs4: ^3.1.8 => 3.3.2 
    datatables.net-responsive-bs4: ^2.2.7 => 2.4.1 
    datatables.net-rowgroup-bs4: ^1.1.2 => 1.3.1 
    datatables.net-rowreorder-bs4: ^1.2.7 => 1.3.3 
    daterangepicker: ^3.1.0 => 3.1.0 
    dayjs: ^1.8.36 => 1.11.8 
    docsify: ^4.13.0 => 4.13.0 
    docsify-copy-code: ^2.1.1 => 2.1.1 
    docsify-drawio: ^1.0.6 => 1.0.7 
    docsify-plugin-flexible-alerts: ^1.1.1 => 1.1.1 
    docsify-updated: ^1.0.5 => 1.0.5 
    domurl: ^2.3.4 => 2.3.4 
    easytimer.js: ^4.3.4 => 4.5.4 
    echarts: ^5.1.2 => 5.4.2 
    emails-input: ^1.0.0 => 1.0.0 
    excellentexport: ^3.9.6 => 3.9.6 
    express: ^4.17.1 => 4.18.2 
    faker: ^5.5.3 => 5.5.3 
    fullcalendar: ^5.9.0 => 5.11.5 
    gasparesganga-jquery-loading-overlay: ^2.1.7 => 2.1.7 
    glyphicons-only-bootstrap: ^1.0.1 => 1.0.1 
    heatmap.js: ^2.0.5 => 2.0.5 
    html-to-image: ^1.9.0 => 1.11.11 
    html2canvas: ^1.4.1 => 1.4.1 
    jquery: ^3.6.0 => 3.7.0 
    jquery-confirm: ^3.3.4 => 3.3.4 
    jquery-sortablejs: ^1.0.1 => 1.0.1 
    jquery.json-viewer: ^1.4.0 => 1.5.0 
    jquery.redirect: ^1.1.4 => 1.2.0 
    jsbarcode: ^3.11.5 => 3.11.5 
    jsdom: ^22.1.0 => 22.1.0 
    json-editor-vue: ^0.10.15 => 0.10.15 
    jspdf: ^2.5.1 => 2.5.1 
    jspdf-autotable: ^3.5.31 => 3.5.31 
    jszip: ^3.6.0 => 3.10.1 
    laravel-mix: ^6.0.49 => 6.0.49 
    laravel-mix-eslint: ^0.2.0 => 0.2.0 
    latest-version: ^5.1.0 => 5.1.0 
    leaflet: ^1.9.3 => 1.9.4 
    leaflet-extra-markers: ^1.2.1 => 1.2.2 
    leaflet-heatmap: ^1.0.0 => 1.0.0 
    leaflet-layervisibility: * => 0.1.0post1 
    leaflet-rotatedmarker: ^0.2.0 => 0.2.0 
    leaflet.fullscreen: ^2.4.0 => 2.4.0 
    leaflet.heat: ^0.2.0 => 0.2.0 
    leaflet.marker.slideto: ^0.2.0 => 0.2.0 
    lodash: ^4.17.19 => 4.17.21 
    lodash-es: ^4.17.21 => 4.17.21 
    mburger-css: ^1.3.3 => 1.3.3 
    mmenu-js: ^8.5.24 => 8.5.24 
    moment: ^2.29.4 => 2.29.4 
    moment-with-locales-es6: ^1.0.1 => 1.0.1 
    nodemon: ^2.0.12 => 2.0.22 
    noty: ^3.2.0-beta-deprecated => 3.2.0-beta-deprecated 
    npm: ^7.11.1 => 7.24.2 
    pdfmake: ^0.1.71 => 0.1.72 
    pm2: ^5.1.2 => 5.3.0 
    prettier: ^3.0.3 => 3.0.3 
    primeflex: ^3.3.0 => 3.3.1 
    primeicons: ^6.0.1 => 6.0.1 
    primevue: ^3.27.0 => 3.29.2 
    prismjs: ^1.29.0 => 1.29.0 
    pusher-js: ^7.0.3 => 7.6.0 
    redom: ^3.27.1 => 3.29.1 
    resolve-url-loader: ^2.3.1 => 2.3.2 
    sass: ^1.20.1 => 1.63.2 
    sass-loader: ^8.0.0 => 8.0.2 
    screenfull: ^5.1.0 => 5.2.0 
    select2: ^4.0.13 => 4.0.13 
    select2-bootstrap4-theme: ^1.0.0 => 1.0.0 
    smartwizard: ^5.1.1 => v5.1.1 
    socket.io: ^4.2.0 => 4.6.2 
    socket.io-client: ^4.2.0 => 2.4.0 
    sortablejs: ^1.13.0 => 1.15.0 
    sql-events-listener: ^1.0.0 => 1.0.0 
    tf-vue-leaflet-heatmap: ^1.0.0 => 1.0.0 
    ts-loader: ^9.4.4 => 9.4.4 
    tui-calendar: ^1.13.0 => 1.15.3 
    tui-dom: ^3.0.0 => 3.0.0 
    typescript: ^5.2.2 => 5.2.2 
    uglify-js: ^3.13.4 => 3.17.4 
    uglify-js-es6: ^2.8.9 => 2.8.9 
    url-template: ^3.1.0 => 3.1.0 
    vanilla-jsoneditor: ^0.18.3 => 0.18.3 
    viewerjs: ^1.9.2 => 1.11.3 
    vitest: ^0.33.0 => 0.33.0 
    vue: ^3.2.47 => 3.3.4 
    vue-axios: ^3.5.2 => 3.5.2 
    vue-cli: ^2.9.6 => 2.9.6 
    vue-loader: ^16.8.3 => 16.8.3 
    vue-sse: ^2.5.2 => 2.5.2 
    vue2-leaflet-hotline: ^1.0.1 => 1.0.1 
    vue3-apexcharts: ^1.4.1 => 1.4.1 
    vuetify: ^3.2.4 => 3.3.3

Package Manager

npm

Any additional comments?

I managed to make it work by adding the following code in the shims-vue.d.ts file in the root folder of my app:

declare module 'json-editor-vue' {
    import { Component } from 'json-editor-vue/dist/src/Component';
    export default Component;
}

Am I missing something? Shouldn't it have worked without having to do all that?

[cloydlau]

Can I get your star if the just-released v0.10.16 solves your issue? tks.

[antogno]

It works now, thank you!

[husayt]

It doesn't still work for me with Typescript and Vitepress.

I get Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in C:\code\sx.design.portal\node_modules\vanilla-jsoneditor\package.json when trying to build

[cloydlau]

@husayt Doesn't seem to be the same problem. Please open a new issue with a valid minimal reproduction.

[husayt]

@cloydlau after spending whole day trying to solve it I have switched to vue3-ts-jsoneditor. It doesn't have this problem. Thanks

[cloydlau]

@husayt It actually doesn't prove anything, you had error using json-editor-vue is probablly due to your own code or the way you're using it. That's why a reproduction is required, you would understand this if you have read https://antfu.me/posts/why-reproductions-are-required which was written by Vue & Vite core team member. I replied to your message you leaved under this unrelated issue for your own convenience within an hour, yet you'd rather spend a whole day trying than opening a new one. Even if there's a real problem with json-editor-vue, there's no way to find out.

[husayt]

@cloydlau i appreciate why reproduction is needed, and I didn't blame you to get so defensive.

it is just after spending more than allocated time on this I ran out of time and had no physical opportunity to provide you with reproduction.

i tried opening a new issue, but one can't do it unless he answers all the questions and provide repro, which I couldn't do.

But at least I wanted to leave some information about the problem I experienced so that others would know.

[cloydlau]

@husayt This issue of svelte-jsoneditor which I opened 17 days ago is a confirmed bug and remains unsolved for now. The vue3-ts-jsoneditor you're using right now based on svelte-jsoneditor too. I mean, open source software is served "as-is", me or author of svelte-jsoneditor don't get paid to do this. If you think opening an issue or providing a reproduction is costing your time, we too. The fact is that more than half issues of json-editor-vue or I believe, most open source software, are turned out to be invalid, I've spent time investigating them and even helped a few with correcting their own codes. Sending PRs or at least providing valid efficient trackable issues is reciprocal. So please forgive my defensiveness.

[husayt]

@cloydlau I just checked my issue against v0.11.0 and, happy to say, that it is fixed in that version. Seems like switch peerdependency resolves this.

Thanks for this