Cannot resolve vue extension in node_modules

[NicoleKuong]

Hi,

I am using Nuxt 3 and vite for my project. I got an error during the build stage as Vite does not omit vue extension in node_modules:

ERROR [nuxt] [request error] [unhandled] [500] Unknown file extension ".vue" for all the components files like ChallengeV2, ChallengeV3, Checkbox

Has anyone encountered this before and knows how to resolve it?

Thanks

[kost1k]

nuxt: ^3.5.2
vue-recaptcha: 3.0.0-alpha.5

Faced a similar problem, only I don't have errors at the build stage, but I get 500 already on the site.

Unknown file extension ".vue" for /var/task/node_modules/vue-recaptcha/dist/components/ChallengeV2.vue

Found a similar problem on stackoverflow.
Also found a discussion in the Vite repository.

No answer anywhere(

It seems that the problem is solved only by fixing the imports inside the library, you cannot influence this from the vite config.

[GuillaumeDgr]

Hi, I have the same problem when running 'yarn generate' for my project.
Any news about solving this issue pls ?

Many thanks in advance!

[RomanGovor]

I have a similar problem when importing in tests

[DanSnow]

Hey @NicoleKuong @kost1k @GuillaumeDgr @RomanGovor, could you please provide a reproducible example?

[GuillaumeDgr]

Hi, no pb, pls find below my configuration and integration of vue-recaptcha:

• package.json

"devDependencies": {
   ...,
   "nuxt": "^3.4.2",
   ...,
},
"dependencies": {
    ...,
    "vue-recaptcha": "^3.0.0-alpha.5"
    ...,
}

• nuxt.config.js

modules: [
    ...
    "vue-recaptcha/nuxt",
    ...
],
runtimeConfig: {
    public: {
      recaptcha: {
        v2SiteKey: "*****",
        v3SiteKey: "*****", // I'm using only V2 but I try to add/delete (according to some SO comments) this line without no effect
      },
    },
 },

• page.vue

<template>
...
 <div ref="root" class="hidden invisible" />
 ...
 </template>
 
 <script setup lang="ts">
 import { useRecaptchaProvider } from "vue-recaptcha";
 import { useChallengeV2 } from "vue-recaptcha";

 useRecaptchaProvider();
 
 const { root, widgetID, execute, onVerify, onExpired, onError, reset } =
 useChallengeV2({
  options: {
    size: "invisible",
  },
 });
 
 onVerify(async (response) => {
    ...
    POST request
    ...
 });
 
 onExpired(() => {
    ...
     reset();
 });

• Node version:
  v19.1.0

Then, running yarn generate produce above error message. Recaptcha seems to be working but some files are not generated due to this error by Nuxt.

ERROR  Unknown file extension ".vue" for /Users/UserName/Desktop/FolderName/node_modules/vue-recaptcha/dist/components/ChallengeV2.vue

Many thanks for your help!

[yzoz]

No answer from maintainer...

You can move vue-recaptcha to your project and remove all unnecessary things from api.cjs

[ItsMeRomian]

If you're using Nuxt3, you can add

  build: {
    transpile: ["vue-recaptcha"],
  },

To your nuxt.config.ts. This fixed it for me.

[DanSnow]

Thank you, @ItsMeRomian. I tested it using the reproducible example provided by @GuillaumeDgr and confirmed that it resolves the issue. I have released a new version that includes this fix directly in vue-recaptcha. And thanks to @GuillaumeDgr for providing the reproducible example.

[dmitrisi4]

Same bug when running ssr in laravel + vue 3 stack
On stack Laravel InertiaJS Vue 3 Vite
I added format: 'cjs' in my vite.config,js
ssr: {
noExternal: ['@inertiajs/server'],
format: 'cjs'
},
Helped solve a similar problem

[GuillaumeDgr]

The solution provided by @ItsMeRomian works for me! Many thanks for your help!

[benincasantonio]

Hi, I'm experiencing the same error when running a unit test with version 3.0.0-alpha.6 (SPA built with Vue 3 + Vite). I've tried the solution provided by @dmitrisi4 but it does not work for me.

TypeError: Unknown file extension ".vue" for /project_path/node_modules/vue-recaptcha/dist/components/ChallengeV2.vue