未捕获错误：在没有提供程序的情况下调用 useRecaptcha()。在 Vue3 中导入脚本设置标签内的复选框

Question

我想在我的作品集网站上使用 ReCAPTCHA，以防止向

EmailJS

发送垃圾电子邮件联系信息，但当我按照文档操作时，它显示错误

Uncaught Error: useRecaptcha() is called without provider.

我尝试了使用

@unhead/vue

和不使用

@unhead/vue

使用

@unhead/vue

main.js

import { createApp } from 'vue'
import { createHead } from '@unhead/vue'
import { VueRecaptchaPlugin } from 'vue-recaptcha'
import './style.css'
import App from './App.vue'


const app = createApp(App)
const head = createHead()
app.use(head)
app.use(VueRecaptchaPlugin, {
  v2SiteKey: import.meta.env.VITE_RECAPTCHA_SITE_KEY,
})
app.mount('#app')

应用程序.vue

<script setup>

import Navbar from './components/Navbar.vue'
import Projects from './components/Projects.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue';

import { useRecaptchaProvider } from 'vue-recaptcha'
useRecaptchaProvider()

</script>

<template>
  <Navbar/>
  <div id="about">
    <About/>
  </div>
  <div id="work-experience">
    Work Experience
  </div>
  <div id="projects">
    <Projects/>
  </div>
  <div id="contact">
    <Contact/>
  </div>
</template>

...

联系.vue

<script setup>

import { Checkbox } from 'vue-recaptcha';

</script>

<template>
  <div class="container">
    <div class="contact">
      <h2>Reach me</h2>
      <div class="social">

      </div>
    </div>
    <form ref="form" @submit.prevent="sendEmail">
      <div class="form">
        <input type="text" name="from_name" placeholder="Name">
        <input type="email" name="from_email" placeholder="Email">
        <input type="text" name="company_name" placeholder="Company">
        <textarea name="message" placeholder="Message"></textarea>
        <Checkbox/>
        <button type="submit">Send</button>
      </div>
    </form>
  </div>
</template>

警告

[Vue warn]: injection "Symbol(vue-recaptcha-context)" not found. 
  at <Checkbox> 
  at <Contact> 
  at <App>

[Vue warn]: [vue-recaptcha]: You may forget to `use` vue-recaptcha plugin 
  at <Checkbox> 
  at <Contact> 
  at <App>

[Vue warn]: Unhandled error during execution of setup function 
  at <Checkbox> 
  at <Contact> 
  at <App>

错误

Uncaught Error: useRecaptcha() is called without provider.
    at useRecaptchaContext (context.mjs?v=40414563:8:11)
    at useAssertV2SiteKey (context.mjs?v=40414563:17:15)
    at useChallengeV2 (challenge-v2.mjs?v=40414563:12:19)
    at useComponentV2 (component-v2.mjs?v=40414563:5:83)
    at setup (Checkbox.vue:46:18)
    at callWithErrorHandling (runtime-core.esm-bundler.js:173:22)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7265:29)
    at setupComponent (runtime-core.esm-bundler.js:7220:11)
    at mountComponent (runtime-core.esm-bundler.js:5542:13)
    at processComponent (runtime-core.esm-bundler.js:5517:17)

不使用

@unhead/vue

与使用相同，但不创建头并将导入更改为

vue-recaptcha/head

另外，我得到与使用

@unhead/vue

相同的警告和错误

Answer 1

我也有同样的问题。我查看了 json 包，发现版本是 3.0.0 alpha。我认为他们对您可以安装的版本做了一些错误。如果您有相同的情况，请尝试卸载 alpha 版本并安装版本“2.0.3”。希望有帮助。

Answer 2

我在版本 3.0.0-alpha.2 上遇到了这个问题，更新到 3.0.0-alpha.6 为我解决了这个问题。