Error when Build apps- Vue 3 Typescript

[welldyrosman]

I have problem when build apps,

transforming (331) node_modules\@popperjs\core\lib\dom-utils\getParentNode.jsnode_modules/qrcode-vue3/src/QRCodeVue3.vue:7:23 - error TS2339: Property 'onDownloadClick' does not exist on type 'Vue3Instance<{ imageUrl: string; qrCode: QRCodeStyling; }, Readonly<ExtractPropTypes<{ width: { type: NumberConstructor; default: number; }; imgclass: { type: StringConstructor; default: string; }; ... 14 more ...; downloadOptions: { ...; }; }>>, ... 4 more ..., ComponentOptionsBase<...>> & ... 5 more ... & Readonly...'.

7       <button @click="onDownloadClick" :class="downloadButton">
                        ~~~~~~~~~~~~~~~

[asifaly]

I have the same issue as well...

vite v3.2.5 building for production...
transforming (1719) node_modules/lodash/_basePropertyOf.jsUse of eval is strongly discouraged, as it poses security risks and may cause issues with minification
node_modules/qrcode-vue3/src/QRCodeVue3.vue:7:23 - error TS2339: Property 'onDownloadClick' does not exist on type 'Vue3Instance<{ imageUrl: string; qrCode: QRCodeStyling; }, Readonly<ExtractPropTypes<{ width: { type: NumberConstructor; default: number; }; imgclass: { type: StringConstructor; default: string; }; ... 14 more ...; downloadOptions: { ...; }; }>>, ... 4 more ..., ComponentOptionsBase<...>> & ... 5 more ... & Readonly...'.

7       <button @click="onDownloadClick" :class="downloadButton">
                        ~~~~~~~~~~~~~~~

node_modules/qrcode-vue3/src/constants/cornerDotTypes.ts:1:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.

1 import { CornerDotTypes } from '../types'
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
....


Found 46 errors in 17 files.

Errors  Files
     1  node_modules/qrcode-vue3/src/QRCodeVue3.vue:7
     2  node_modules/qrcode-vue3/src/constants/cornerDotTypes.ts:1
     2  node_modules/qrcode-vue3/src/constants/cornerSquareTypes.ts:1
     2  node_modules/qrcode-vue3/src/constants/dotTypes.ts:1
     2  node_modules/qrcode-vue3/src/constants/errorCorrectionLevels.ts:1
     2  node_modules/qrcode-vue3/src/constants/gradientTypes.ts:1
     2  node_modules/qrcode-vue3/src/constants/modes.ts:1
     2  node_modules/qrcode-vue3/src/constants/qrTypes.ts:1
     5  node_modules/qrcode-vue3/src/core/QRCanvas.ts:7
     5  node_modules/qrcode-vue3/src/core/QRCodeStyling.ts:5
     2  node_modules/qrcode-vue3/src/core/QRCornerDot.ts:3
     2  node_modules/qrcode-vue3/src/core/QRCornerSquare.ts:3
     2  node_modules/qrcode-vue3/src/core/QRDot.ts:3
     8  node_modules/qrcode-vue3/src/core/QROptions.ts:3
     2  node_modules/qrcode-vue3/src/tools/getMode.ts:2
     2  node_modules/qrcode-vue3/src/tools/merge.ts:2
     3  node_modules/qrcode-vue3/src/tools/sanitizeOptions.ts:1
ERROR: "type-check" exited with 2.

[343195246]

+1

[AlaaOthman98]

Have anyone reached a solution for this problem?

[jarvanstack]

+1

[jarvanstack]

have same error, but build target also work
Errors Files
1 node_modules/qrcode-vue3/src/QRCodeVue3.vue:7
2 node_modules/qrcode-vue3/src/constants/cornerDotTypes.ts:1
2 node_modules/qrcode-vue3/src/constants/cornerSquareTypes.ts:1
2 node_modules/qrcode-vue3/src/constants/dotTypes.ts:1
2 node_modules/qrcode-vue3/src/constants/errorCorrectionLevels.ts:1
2 node_modules/qrcode-vue3/src/constants/gradientTypes.ts:1
2 node_modules/qrcode-vue3/src/constants/modes.ts:1
2 node_modules/qrcode-vue3/src/constants/qrTypes.ts:1
5 node_modules/qrcode-vue3/src/core/QRCanvas.ts:7
5 node_modules/qrcode-vue3/src/core/QRCodeStyling.ts:5
2 node_modules/qrcode-vue3/src/core/QRCornerDot.ts:3
2 node_modules/qrcode-vue3/src/core/QRCornerSquare.ts:3
2 node_modules/qrcode-vue3/src/core/QRDot.ts:3
8 node_modules/qrcode-vue3/src/core/QROptions.ts:3
2 node_modules/qrcode-vue3/src/tools/getMode.ts:2
2 node_modules/qrcode-vue3/src/tools/merge.ts:2
3 node_modules/qrcode-vue3/src/tools/sanitizeOptions.ts:1

[lairwaves]

Fix way: #24

[shaynesstark]

Have anyone reached a solution for this problem?

I manually modified the node_module but this is a temporary solution as an npm install will overwrite my changes. I added

  methods: {
    onDownloadClick: () => { return null; }
  },

above the watch and I went through each TS files and added the type import instead of a standard import. Like this:

import type { CornerDotTypes } from '../types'

This allowed me to build for production, but again is a temporary soludion.

[scholtz]

fixed