error in ./node_modules/vue-recaptcha/dist/components/ChallengeV2.vue?vue&type=script&setup=true&lang=ts

[0xAF4]

Description

I created new project. Installed
npm i @unhead/vue
npm install vue-recaptcha@next

write
import { createApp } from 'vue'
import { VueRecaptchaPlugin } from 'vue-recaptcha'
import App from './App.vue'

const app = createApp(App)
app.use(VueRecaptchaPlugin, {
v2SiteKey: '6LdJwe0pAAAAAGxNiJVbTdIxQZ0vdsHGBlMOWTzA',
})
app.mount('#app')

in main.js

and when trying to run project by "npm run serve" getting the following errors:

npm run serve

[email protected] serve
vue-cli-service serve

INFO Starting development server...

ERROR Failed to compile with 6 errors 12:51:10

error in ./node_modules/vue-recaptcha/dist/components/ChallengeV2.vue?vue&type=script&setup=true&lang=ts

Module parse failed: The keyword 'interface' is reserved (7:0)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | import { RecaptchaV2State } from '../api'
  |

interface SlotApi {
| /**
| * widget id

error in ./node_modules/vue-recaptcha/dist/components/ChallengeV3.vue?vue&type=script&setup=true&lang=ts

Module parse failed: The keyword 'interface' is reserved (6:0)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | import { useChallengeV3 } from '../composables/challenge-v3'
  |

interface SlotApi {
| /**
| * reCAPTCHA v3 response

error in ./node_modules/vue-recaptcha/dist/components/Checkbox.vue?vue&type=script&setup=true&lang=ts

Module parse failed: Unexpected token (18:15)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | },
  | emits: ["load", "error", "expired", "success", "update:widgetId", "update:modelValue"],

setup(__props: any, { expose: __expose, emit: __emit }) {
| __expose();
|

error in ./node_modules/vue-recaptcha/dist/components/ChallengeV2.vue?vue&type=template&id=14e67f09&ts=true

Module parse failed: Unexpected token (5:27)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/templateLoader.js
• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | const _hoisted_1 = { ref: "root" }
  |

export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
| return (_openBlock(), _createBlock(_resolveDynamicComponent($props.as), { onClick: $setup.onClick }, {
| default: _withCtx(() => [

error in ./node_modules/vue-recaptcha/dist/components/ChallengeV3.vue?vue&type=template&id=14f4968a&ts=true

Module parse failed: Unexpected token (3:27)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/templateLoader.js
• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | import { normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, renderSlot as _renderSlot, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx,
  openBlock as _openBlock, createBlock as _createBlock } from "vue"
  |

export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
| return (_openBlock(), _createBlock(_resolveDynamicComponent($props.as), { onClick: $setup.onClick }, {
| default: _withCtx(() => [

error in ./node_modules/vue-recaptcha/dist/components/Checkbox.vue?vue&type=template&id=06a9d869&ts=true

Module parse failed: Unexpected token (3:27)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/templateLoader.js
• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | import { resolveDynamicComponent as _resolveDynamicComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue"
  |

export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
| return (_openBlock(), _createBlock(_resolveDynamicComponent($props.as), { ref: "root" }, null, 512 /* NEED_PATCH */))
| }

ERROR in ./node_modules/vue-recaptcha/dist/components/ChallengeV2.vue?vue&type=script&setup=true&lang=ts (./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/vue-recaptcha/dist/components/ChallengeV2.vue?vue&type=script&setup=true&lang=ts) 7:0
Module parse failed: The keyword 'interface' is reserved (7:0)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | import { RecaptchaV2State } from '../api'
  |

interface SlotApi {
| /**
| * widget id
@ ./node_modules/vue-recaptcha/dist/components/ChallengeV2.vue?vue&type=script&setup=true&lang=ts 1:0-134 1:0-134 1:135-258 1:135-258
@ ./node_modules/vue-recaptcha/dist/components/ChallengeV2.vue 2:0-73 3:0-68 3:0-68 6:49-55
@ ./node_modules/vue-recaptcha/dist/api.mjs 5:0-70 5:0-70
@ ./node_modules/vue-recaptcha/dist/index.mjs 3:0-26 3:0-26
@ ./src/main.js 2:0-51 5:8-26

ERROR in ./node_modules/vue-recaptcha/dist/components/ChallengeV3.vue?vue&type=script&setup=true&lang=ts (./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/vue-recaptcha/dist/components/ChallengeV3.vue?vue&type=script&setup=true&lang=ts) 6:0
Module parse failed: The keyword 'interface' is reserved (6:0)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | import { useChallengeV3 } from '../composables/challenge-v3'
  |

interface SlotApi {
| /**
| * reCAPTCHA v3 response
@ ./node_modules/vue-recaptcha/dist/components/ChallengeV3.vue?vue&type=script&setup=true&lang=ts 1:0-134 1:0-134 1:135-258 1:135-258
@ ./node_modules/vue-recaptcha/dist/components/ChallengeV3.vue 2:0-73 3:0-68 3:0-68 6:49-55
@ ./node_modules/vue-recaptcha/dist/api.mjs 6:0-70 6:0-70
@ ./node_modules/vue-recaptcha/dist/index.mjs 3:0-26 3:0-26
@ ./src/main.js 2:0-51 5:8-26

ERROR in ./node_modules/vue-recaptcha/dist/components/Checkbox.vue?vue&type=script&setup=true&lang=ts (./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/vue-recaptcha/dist/components/Checkbox.vue?vue&type=script&setup=true&lang=ts) 18:15
Module parse failed: Unexpected token (18:15)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | },
  | emits: ["load", "error", "expired", "success", "update:widgetId", "update:modelValue"],

setup(__props: any, { expose: __expose, emit: __emit }) {
| __expose();
|
@ ./node_modules/vue-recaptcha/dist/components/Checkbox.vue?vue&type=script&setup=true&lang=ts 1:0-131 1:0-131 1:132-252 1:132-252
@ ./node_modules/vue-recaptcha/dist/components/Checkbox.vue 2:0-70 3:0-65 3:0-65 6:49-55
@ ./node_modules/vue-recaptcha/dist/api.mjs 7:0-64 7:0-64
@ ./node_modules/vue-recaptcha/dist/index.mjs 3:0-26 3:0-26
@ ./src/main.js 2:0-51 5:8-26

ERROR in ./node_modules/vue-recaptcha/dist/components/ChallengeV2.vue?vue&type=template&id=14e67f09&ts=true (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/vue-recaptcha/dist/components/ChallengeV2.vue?vue&type=template&id=14e67f09&ts=true) 5:27
Module parse failed: Unexpected token (5:27)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/templateLoader.js
• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | const _hoisted_1 = { ref: "root" }
  |

export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
| return (_openBlock(), _createBlock(_resolveDynamicComponent($props.as), { onClick: $setup.onClick }, {
| default: _withCtx(() => [
@ ./node_modules/vue-recaptcha/dist/components/ChallengeV2.vue?vue&type=template&id=14e67f09&ts=true 1:0-190 1:0-190
@ ./node_modules/vue-recaptcha/dist/components/ChallengeV2.vue 1:0-80 6:68-74 16:79-18:3 17:29-35 16:2-18:4
@ ./node_modules/vue-recaptcha/dist/api.mjs 5:0-70 5:0-70
@ ./node_modules/vue-recaptcha/dist/index.mjs 3:0-26 3:0-26
@ ./src/main.js 2:0-51 5:8-26

ERROR in ./node_modules/vue-recaptcha/dist/components/ChallengeV3.vue?vue&type=template&id=14f4968a&ts=true (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/vue-recaptcha/dist/components/ChallengeV3.vue?vue&type=template&id=14f4968a&ts=true) 3:27
Module parse failed: Unexpected token (3:27)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/templateLoader.js
• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | import { normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, renderSlot as _renderSlot, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx,
  openBlock as _openBlock, createBlock as _createBlock } from "vue"
  |

export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
| return (_openBlock(), _createBlock(_resolveDynamicComponent($props.as), { onClick: $setup.onClick }, {
| default: _withCtx(() => [
@ ./node_modules/vue-recaptcha/dist/components/ChallengeV3.vue?vue&type=template&id=14f4968a&ts=true 1:0-190 1:0-190
@ ./node_modules/vue-recaptcha/dist/components/ChallengeV3.vue 1:0-80 6:68-74 16:79-18:3 17:29-35 16:2-18:4
@ ./node_modules/vue-recaptcha/dist/api.mjs 6:0-70 6:0-70
@ ./node_modules/vue-recaptcha/dist/index.mjs 3:0-26 3:0-26
@ ./src/main.js 2:0-51 5:8-26

ERROR in ./node_modules/vue-recaptcha/dist/components/Checkbox.vue?vue&type=template&id=06a9d869&ts=true (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/vue-recaptcha/dist/components/Checkbox.vue?vue&type=template&id=06a9d869&ts=true) 3:27
Module parse failed: Unexpected token (3:27)
File was processed with these loaders:

• ./node_modules/vue-loader/dist/templateLoader.js
• ./node_modules/vue-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  | import { resolveDynamicComponent as _resolveDynamicComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue"
  |

export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
| return (_openBlock(), _createBlock(_resolveDynamicComponent($props.as), { ref: "root" }, null, 512 /* NEED_PATCH */))
| }
@ ./node_modules/vue-recaptcha/dist/components/Checkbox.vue?vue&type=template&id=06a9d869&ts=true 1:0-187 1:0-187
@ ./node_modules/vue-recaptcha/dist/components/Checkbox.vue 1:0-77 6:68-74 16:76-18:3 17:29-35 16:2-18:4
@ ./node_modules/vue-recaptcha/dist/api.mjs 7:0-64 7:0-64
@ ./node_modules/vue-recaptcha/dist/index.mjs 3:0-26 3:0-26
@ ./src/main.js 2:0-51 5:8-26

webpack compiled with 6 errors

Minimal Reproducible Example

https://github.com/0xAF4/recaptcha-test

System info

1

[AlaDyn172]

@0xAF4, if you want to use checkbox with this package, try to use version 2.0.3 as I am having the same issue when I use the latest one.
Just install it by npm install @[email protected] and then follow the example you find from the source attached in the release ( https://github.com/DanSnow/vue-recaptcha/releases/tag/v2.0.3 ).