Error building Vue3 app with Vite

[LePashtet]

I just imported this package, don't even use it end get such error

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1960:9 - error TS2451: Cannot redeclare block-scoped variable 'defineProps'.

1960   const defineProps: _defineProps
             ~~~~~~~~~~~

  node_modules/@vue/runtime-dom/node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1959:9
    1959   const defineProps: _defineProps
                 ~~~~~~~~~~~
    'defineProps' was also declared here.

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1961:9 - error TS2451: Cannot redeclare block-scoped variable 'defineEmits'.

1961   const defineEmits: _defineEmits
             ~~~~~~~~~~~

  node_modules/@vue/runtime-dom/node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1960:9
    1960   const defineEmits: _defineEmits
                 ~~~~~~~~~~~
    'defineEmits' was also declared here.

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1962:9 - error TS2451: Cannot redeclare block-scoped variable 'defineExpose'.

1962   const defineExpose: _defineExpose
             ~~~~~~~~~~~~

  node_modules/@vue/runtime-dom/node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1961:9
    1961   const defineExpose: _defineExpose
                 ~~~~~~~~~~~~
    'defineExpose' was also declared here.

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1963:9 - error TS2451: Cannot redeclare block-scoped variable 'withDefaults'.

1963   const withDefaults: _withDefaults
             ~~~~~~~~~~~~

  node_modules/@vue/runtime-dom/node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1962:9
    1962   const withDefaults: _withDefaults
                 ~~~~~~~~~~~~
    'withDefaults' was also declared here.

node_modules/@vue/runtime-dom/node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1959:9 - error TS2451: Cannot redeclare block-scoped variable 'defineProps'.

1959   const defineProps: _defineProps
             ~~~~~~~~~~~

  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1960:9
    1960   const defineProps: _defineProps
                 ~~~~~~~~~~~
    'defineProps' was also declared here.

node_modules/@vue/runtime-dom/node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1960:9 - error TS2451: Cannot redeclare block-scoped variable 'defineEmits'.

1960   const defineEmits: _defineEmits
             ~~~~~~~~~~~

  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1961:9
    1961   const defineEmits: _defineEmits
                 ~~~~~~~~~~~
    'defineEmits' was also declared here.

node_modules/@vue/runtime-dom/node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1961:9 - error TS2451: Cannot redeclare block-scoped variable 'defineExpose'.

1961   const defineExpose: _defineExpose
             ~~~~~~~~~~~~

  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1962:9
    1962   const defineExpose: _defineExpose
                 ~~~~~~~~~~~~
    'defineExpose' was also declared here.

node_modules/@vue/runtime-dom/node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1962:9 - error TS2451: Cannot redeclare block-scoped variable 'withDefaults'.

1962   const withDefaults: _withDefaults
             ~~~~~~~~~~~~

  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1963:9
    1963   const withDefaults: _withDefaults
                 ~~~~~~~~~~~~
    'withDefaults' was also declared here.


Found 8 errors.

"dependencies": {
    "autoprefixer": "^10.3.5",
    "chart.js": "2.9.4",
    "lodash": "^4.17.21",
    "postcss": "^8.3.7",
    "sass": "^1.42.1",
    "tailwind-config-viewer": "^1.6.2",
    "tailwindcss": "^2.2.15",
    "vue": "^3.2.13",
    "vue-chart-3": "^0.5.8",
    "vue-router": "4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-vue": "^7.18.0",
    "prettier": "^2.4.1",
    "typescript": "^4.4.3",
    "vite": "^2.5.10",
    "vue-tsc": "^0.3.0"
  }

[Victor Garcia]

Hi @LePashtet, it seems to be a Typescript issue with Vue 3 package, not vue-chart-3 related.
Have you tried to add skipLibCheck to your tsconfig?
Otherwise open a bug to the vue repo

[Ferenc Tamás]

For anyone else stumbling upon this issue, it's due to a version mismatch as this library depends on @vue/runtime-core and @vue/runtime-dom but does not directly depend on vue itself.

Whereas in an application project, one usually just depends on vue, and it will pull its own versions of @vue/runtime-core and @vue/runtime-dom effectively duplicating these dependencies with different versions and typescript definitions (thus the errors).

This library could simply fix this by directly depending on vue instead, meanwhile anyone affected can add a direct dependency to both @vue/runtime-dom and @vue/runtime-core that match the versions of vue, pinning them if needed.

[Victor Garcia]

@tamasfe I just updated the peer deps in 3.1.1. It seems to not only be related to vite since vue-cli has the error too (#102 ). Tell me if it works :)

[Ferenc Tamás]

Unfortunately I can't check for the same project I mentioned as it changed a lot since then.

But it seems to work with a fresh vite template!