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

recaptcha-test@0.1.0 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 @vue-recaptcha@2.0.3 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 ).