Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot resolve vue extension in node_modules #1186

Open
NicoleKuong opened this issue Jun 1, 2023 · 12 comments
Open

Cannot resolve vue extension in node_modules #1186

NicoleKuong opened this issue Jun 1, 2023 · 12 comments

Comments

@NicoleKuong
Copy link

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
Copy link

kost1k commented Jun 12, 2023

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
Copy link

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
Copy link

I have a similar problem when importing in tests

@DanSnow
Copy link
Owner

DanSnow commented Jun 24, 2023

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

@GuillaumeDgr
Copy link

GuillaumeDgr commented Jun 26, 2023

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
Copy link

yzoz commented Jul 6, 2023

No answer from maintainer...

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

@ItsMeRomian
Copy link
Contributor

If you're using Nuxt3, you can add

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

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

@DanSnow
Copy link
Owner

DanSnow commented Jul 10, 2023

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
Copy link

dmitrisi4 commented Jul 12, 2023

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
Copy link

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

@benincasantonio
Copy link

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

@scottafraser
Copy link

I am having the same issue as @benincasantonio running my unit tests

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants