Npm run build error: MV2&3, Vue, TS

[marcellmanfrin]

npm init @samrum/vite-plugin-web-extension@latest vite-web-extension

√ Manifest version: » Manifest V2 & V3
√ Framework: » Vue
√ Add TypeScript? ...  Yes

npn install

npm WARN deprecated @volar/html2pug@0.29.8: WARNING: This project has been renamed to @johnsoncodehk/html2pug. Install using @johnsoncodehk/html2pug instead.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated vscode-pug-languageservice@0.29.8: WARNING: This project has been renamed to @volar/pug-language-service. Install using @volar/pug-language-service instead.
npm WARN deprecated vscode-typescript-languageservice@0.29.8: WARNING: This project has been renamed to @volar/typescript-language-service. Install using @volar/typescript-language-service instead.
npm WARN deprecated vscode-vue-languageservice@0.29.8: WARNING: This project has been renamed to @volar/vue-language-service. Install using @volar/vue-language-service instead.
npm WARN deprecated core-js@3.21.0: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 680 packages, and audited 681 packages in 2m

73 packages are looking for funding
  run `npm fund` for details

10 vulnerabilities (9 moderate, 1 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

npm run build

> vite-web-extension@1.0.0 build
> vue-tsc --noEmit && vite build

src/components/PageContent.vue:2:14 - error TS2304: Cannot find name 'imageUrl'.

2   <img :src="imageUrl" height="45" alt="" />
               ~~~~~~~~

src/entries/contentScript/primary/App.vue:3:16 - error TS2304: Cannot find name 'logoImageUrl'.

3     <img :src="logoImageUrl" height="50" alt="" />
                 ~~~~~~~~~~~~

src/components/PageContent.vue:6:33 - error TS2304: Cannot find name 'increment'.

6   <button type="button" @click="increment">Clicks: {{ count }}</button>
                                  ~~~~~~~~~

src/components/PageContent.vue:6:55 - error TS2304: Cannot find name 'count'.

6   <button type="button" @click="increment">Clicks: {{ count }}</button>
                                                        ~~~~~

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1846:33 - error TS2344: Type 'HostElement' does not satisfy the constraint 'RendererElement'.
1846     transition: TransitionHooks<HostElement> | null;
                                     ~~~~~~~~~~~

  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1828:57
    1828 export declare interface VNode<HostNode = RendererNode, HostElement = RendererElement, ExtraProps = {
                                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    This type parameter might need an `extends RendererElement` constraint.

Found 5 errors in 3 files.

Errors  Files
     3  src/components/PageContent.vue:2
     1  src/entries/contentScript/primary/App.vue:3
     1  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1846

[samrum]

Thanks. Seems like vue-tsc needs to be updated in the templates and the tsconfig needs to be tweaked.

If you want to get it working with what you have:

1. npm install -D vue-tsc@latest
2. Add "skipLibCheck": true, to tsconfig.json

I'll update the templates as part of the next release.

[samrum]

This should now be fixed with the latest versions of create-vite-plugin-web-extension and vite-plugin-web-extension