Vue3引入Checkbox时出现useRecaptcha()无提供者错误求助

问题描述 #

为个人作品集网站集成ReCAPTCHA防止EmailJS收到垃圾邮件，按照文档配置后出现错误：Uncaught Error: useRecaptcha() is called without provider.，尝试使用@unhead/vue和改用vue-recaptcha/head两种配置方式，均出现相同警告与错误。

相关代码 #

使用@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')

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>

Contact.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)

解决方案 #

1. 移除不必要的useRecaptchaProvider调用 #

已经通过app.use(VueRecaptchaPlugin)全局注册了ReCAPTCHA插件，它会自动在应用中注入上下文，手动调用useRecaptchaProvider会干扰全局上下文传递，导致组件无法获取正确的配置。

修改后的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>

2. 确认环境变量正确加载 #

检查项目根目录的.env文件是否正确配置：

VITE_RECAPTCHA_SITE_KEY=你的ReCAPTCHA站点密钥

注意：修改环境变量后需要重启开发服务器才能生效，可在main.js中添加打印语句确认值是否正确获取：

console.log('ReCAPTCHA Site Key:', import.meta.env.VITE_RECAPTCHA_SITE_KEY)

3. 修正ReCAPTCHA组件导入路径（针对v2版本） #

若使用的是ReCAPTCHA v2的Checkbox组件，需要从vue-recaptcha/v2导入，而非根路径：

修改后的Contact.vue：

<script setup>
// 修正导入路径
import { Checkbox } from 'vue-recaptcha/v2';
</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>

4. 不使用@unhead/vue时的额外配置 #

如果不需要@unhead/vue，需在main.js中导入vue-recaptcha/head来自动加载ReCAPTCHA的官方脚本：

import { createApp } from 'vue'
import { VueRecaptchaPlugin } from 'vue-recaptcha'
import 'vue-recaptcha/head' // 添加这一行
import './style.css'
import App from './App.vue'

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

内容的提问来源于stack exchange，提问作者Paweenwat Maneechai