Usage on Vue 3, Vite 4, Typescript 4.9

[clabnet]

Hello, my project use Vue 3.2, Vite 4.0.4, Typescript 4.9. Packages.json contain:

    "json-editor-vue": "^0.10.5",
   ...
    "peerDependencies": {
      "vanilla-jsoneditor": "^0.14.5"
  }

This is a simplified version of my component "my-json-editor" :

<script setup lang="ts">
  import JsonEditorVue from 'json-editor-vue'
  interface Props {     source: any   }
  const props = defineProps<Props>()
</script>
<template>
  <div class="ml-5 w-100% h-98%">
        <json-editor-vue v-model="props.source" :readOnly="true" />
  </div>
</template>

When I run vite on development mode it working fine. When I run vite build command I have this blocking error on startup application:

to <a href="https://jmespath.org/tutorial.html" target="_blank" rel="noopener noreferrer">the interactive tutorial</a>.\n</p>\n',createQuery:function(e,t){var n=t.sort,r=t.filter,o=t.projection,i="";if(r&&r.path&&r.relation&&r.value){var a=["0"].concat(r.path),s=qs(e,a),c=GC(r.value),u="string"==typeof s&&null!=c?'"'.concat(r.value,'"'):c;i+="[? "+M8(r.path)+" "+r.relation+" `"+u+"`]"}else i+=Array.isArray(e)?"[*]":"@";n&&n.path&&n.direction&&("desc"===n.direction?i+=" | reverse(sort_by(@, &"+M8(n.path)+"))":i+=" | sort_by(@, &"+M8(n.path)+")");if(o&&o.paths)if("]"!==i[i.length-1]&&(i+=" | [*]"),1===o.paths.length){var l=o.paths[0];i+=0===l.length?"":"."+M8(l)}else o.paths.length>1&&(i+=".{"+o.paths.map((function(e){return E8(e[e.length-1])+": "+M8(e)})).join(", ")+"}");return i},executeQuery:function(e,t){return _8.search(e,t)}};function M8(e){if(0===e.length)return"@";var t=e.map((function(e){return"number"==typeof e?"["+e+"]":"."+E8(String(e))})).join("");return"."===t[0]?t.slice(1):t}function E8(e){return e.match(/^[A-Za-z\d_$]+$/)?e:JSON.stringify(e)}
    ^
20: /*!
21:  * vanilla-picker v2.12.1
error during build:
RollupError: Identifier 'NH' has already been declared
    at error (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/rollup@3.16.0/node_modules/rollup/dist/es/shared/rollup.js:2094:30)
    at Module.error (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/rollup@3.16.0/node_modules/rollup/dist/es/shared/rollup.js:13136:16)
    at Module.tryParse (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/rollup@3.16.0/node_modules/rollup/dist/es/shared/rollup.js:13810:25)
    at Module.setSource (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/rollup@3.16.0/node_modules/rollup/dist/es/shared/rollup.js:13420:39)
    at ModuleLoader.addModuleSource (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/rollup@3.16.0/node_modules/rollup/dist/es/shared/rollup.js:23237:20)
 ELIFECYCLE  Command failed with exit code 1.

When I use rollupOptions on vite.config.ts

   build: {
   ...
      rollupOptions: {
        external: ['vanilla-jsoneditor'],
      },
    },

the build pass, but I have this other error:

Uncaught TypeError: Failed to resolve module specifier "vanilla-jsoneditor". Relative references must start with either "/", "./", or "../".

I'm on loop, any help please ? Thank's

[cloydlau]

Hello, I tried 'vite build' in your repo here and it worked just fine:

[clabnet]

Yes, you see right. But the problem is onto my large webapp, and I cannot publish the complete source.

This is the screen running on dev mode : Here the main files :

1. package.json
2. tsconfig.ts
3. vite.config.ts

I know : this is a problem around environment where the component is running, is there vite, rollup, dev, build, .. and maybe it goes beyond what are the boundaries of this problem, but I hope you can give me some support.

Thank you

[cloydlau]

1. 'vanilla-jsoneditor' is a peer dependency for 'json-editor-vue' but not for end users unless you explicitly want it, so you extenalize it for what purpose?
2. This error does not seem to be related to 'json-editor-vue':
3. I understand you cannot publish the complete source, but I only need a minimal reproduction github or codesandbox link, so that I can look into this, thanks.

[clabnet]

Thanks, I still working for a stackblitz repro sample.

[clabnet]

Hello, sorry for delay. Here Is there the problem described above. I have removed all my source code and maintained all packages used from my web app. When running pnpm dev the json editor is showing. When running pnpm build on console log you can see the blocking error :

error during build:
RollupError: Identifier 'NH' has already been declared
    at error (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/rollup@3.10.0/node_modules/rollup/dist/es/shared/rollup.js:2041:30)
    at Module.error (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/rollup@3.10.0/node_modules/rollup/dist/es/shared/rollup.js:13062:16)
    at Module.tryParse (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/rollup@3.10.0/node_modules/rollup/dist/es/shared/rollup.js:13737:25)
    at Module.setSource (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/rollup@3.10.0/node_modules/rollup/dist/es/shared/rollup.js:13347:39)
    at ModuleLoader.addModuleSource (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/rollup@3.10.0/node_modules/rollup/dist/es/shared/rollup.js:22929:20)

Can be the cohesistency with Lodash package ? I don't know where to hit my head anymore. Thanks in advance.

[cloydlau]

Hello, remove this line exclude: ['**/dist/**'] in your ./vite.config.ts and your problem solved. There is no exclude option according to the documentation of 'unplugin-auto-import'.

[clabnet]

It works. You did a great job, you were very good.

Thank you for your support.

[cloydlau]

I think it deserves a star since this issue is not related to 'json-editor-vue', thanks.

[clabnet]

Surely. I do.