[Vue warn]: Failed to resolve component: FullPage

[momo-mao]

At first, I created a new project with "npx nuxi init nuxt-app"，then installed “nuxt-fullpage” and added “@fullpage/nuxt-fullpage” to the modules section of nuxt.config.js
At last，I started the project，all the best，except，I got a warning：

[Vue warn]: Failed to resolve component: FullPage
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[nitro] [dev] [unhandledRejection] TypeError: Invalid value used as weak map key

Environment

• node: v14.17.2
• nuxt: 3.0.0-rc.4
• @fullpage/nuxt-fullpage: 0.2.3

[JonathanSchndr]

Hey @momo-mao
Thanks for your report. Currently TypeScript is not yet supported, so you can ignore this error. Regarding the Vue warn: This is not yet finalized, a workaround is currently https://github.com/nuxt/framework/discussions/1449#discussioncomment-1538660 - But since it is only a warn, there should be no errors.

[momo-mao]

I think I can't ignore this error, because when I used "useFetch", unfortunately, I got a "500 error" in my page，after removed “full-page” it's ok

[alvarotrigo]

Currently TypeScript is not yet supported, so you can ignore this error.

Can this be of any help for it?
https://github.com/alvarotrigo/react-fullpage/tree/master/types

[karol-be]

@JonathanSchndr Even though it's a warning as @momo-mao mentioned it prevents Nuxt from rendering.

    "nuxt": "3.0.0-rc.4"
....
    "node_modules/@fullpage/nuxt-fullpage": {
      "version": "0.2.3",
      "dependencies": {
        "@nuxt/kit": "^3.0.0-rc.3",
        "vue-fullpage.js": "^0.2.3"
      }
...
    "node_modules/fullpage.js": {
      "version": "4.0.9",
    },

It seems the FullPage component is not recognized.
When I've tried manually registering the FullPage in Nuxt and importing it in component I'm getting a window is not defined which I guess is expected as it happens during the server render.

Update: I've forked the project and it seem to run fine despite the [Vue warn]: Failed to resolve component: FullPage.
My project still fails to compile though.

[JonathanSchndr]

@JonathanSchndr Even though it's a warning as @momo-mao mentioned it prevents Nuxt from rendering.

    "nuxt": "3.0.0-rc.4"

....

    "node_modules/@fullpage/nuxt-fullpage": {

      "version": "0.2.3",

      "dependencies": {

        "@nuxt/kit": "^3.0.0-rc.3",

        "vue-fullpage.js": "^0.2.3"

      }

...

    "node_modules/fullpage.js": {

      "version": "4.0.9",

    },

It seems the FullPage component is not recognized.

When I've tried manually registering the FullPage in Nuxt and importing it in component I'm getting a window is not defined which I guess is expected as it happens during the server render.

Update: I've forked the project and it seem to run fine despite the [Vue warn]: Failed to resolve component: FullPage.

My project still fails to compile though.

Thank you for your detailed information. It is important that it is only executed on the client. I’ll look at the warning again in detail!

[momo-mao]

@JonathanSchndr You can refer to how I solved this problem.
I removed modules: ["@fullpage/nuxt-fullpage"] in nuxt.config.ts and created fullpage.client.ts in plugins:

import fullpage from "fullpage.js/dist/fullpage.extensions.min.js";
import "fullpage.js/dist/fullpage.min.css";
export default defineNuxtPlugin(() => {
  return {
    provide: {
      fullpage,
    },
  };
});

Next, I copy FullPage.vue from vue-fullpage.js to components，then modify the initialization method:

init() {
  const { $fullpage } = useNuxtApp();
  this.api = new $fullpage(this.$refs.fullpage, this.options);
}

Basically my problem is solved, but I'm still looking forward to the official solution.

[JonathanSchndr]

@JonathanSchndr You can refer to how I solved this problem. I removed modules: ["@fullpage/nuxt-fullpage"] in nuxt.config.ts and created fullpage.client.ts in plugins:

import fullpage from "fullpage.js/dist/fullpage.extensions.min.js";
import "fullpage.js/dist/fullpage.min.css";
export default defineNuxtPlugin(() => {
  return {
    provide: {
      fullpage,
    },
  };
});

Next, I copy FullPage.vue from vue-fullpage.js to components，then modify the initialization method:

init() {
  const { $fullpage } = useNuxtApp();
  this.api = new $fullpage(this.$refs.fullpage, this.options);
}

Basically my problem is solved, but I'm still looking forward to the official solution.

Hey @momo-mao, this is a completely correct way. You load FullPage via the official plugin interface. There is nothing against this use! The Nuxt module should make this easier of course, but your current "workaround" is definitely correct!

[pauloli99]

@JonathanSchndr You can refer to how I solved this problem. I removed modules: ["@fullpage/nuxt-fullpage"] in nuxt.config.ts and created fullpage.client.ts in plugins:

import fullpage from "fullpage.js/dist/fullpage.extensions.min.js";
import "fullpage.js/dist/fullpage.min.css";
export default defineNuxtPlugin(() => {
  return {
    provide: {
      fullpage,
    },
  };
});

Next, I copy FullPage.vue from vue-fullpage.js to components，then modify the initialization method:

init() {
  const { $fullpage } = useNuxtApp();
  this.api = new $fullpage(this.$refs.fullpage, this.options);
}

Basically my problem is solved, but I'm still looking forward to the official solution.

thank you so much! the solution is great!

[majinboo]

@JonathanSchndr You can refer to how I solved this problem. I removed modules: ["@fullpage/nuxt-fullpage"] in nuxt.config.ts and created fullpage.client.ts in plugins:

import fullpage from "fullpage.js/dist/fullpage.extensions.min.js";
import "fullpage.js/dist/fullpage.min.css";
export default defineNuxtPlugin(() => {
  return {
    provide: {
      fullpage,
    },
  };
});

Next, I copy FullPage.vue from vue-fullpage.js to components，then modify the initialization method:

init() {
  const { $fullpage } = useNuxtApp();
  this.api = new $fullpage(this.$refs.fullpage, this.options);
}

Basically my problem is solved, but I'm still looking forward to the official solution.

Thanks so much for the tip, I was running into the same issue.
I had problems getting your solution to work though at first. After adding the constants to the FullPage.vue and removing the import of extentions in FullPage.vue it worked perfectly.

I ran into another problem though:
When I upgrade to nuxt3 rc6 it keeps working on localhost, but as soon as I upload it to Vercel it seems like fullpage does not get loaded anymore.

nuxt rc5 contains breaking changes:

This release contains slight breaking changes. Please check the linked pull requests for notes.

auto-import: Unwrap auto imports in SFC templates (nuxt/framework#5573)
nuxt: Support universal global middleware (nuxt/framework#5038)
nuxt: Remove legacy app context (nuxt/framework#5630)

Any idea where and how to fix this?

[JonathanSchndr]

@majinboo - I would have to investigate the error in detail first. Since plugins integration is used as a workaround here, this has nothing directly to do with the Nuxt module for now. I hope Nuxt 3 will leave beta soon and we can build on a stable version. Until then, it will always be possible that strange errors happen.

[majinboo]

@majinboo - I would have to investigate the error in detail first. Since plugins integration is used as a workaround here, this has nothing directly to do with the Nuxt module for now. I hope Nuxt 3 will leave beta soon and we can build on a stable version. Until then, it will always be possible that strange errors happen.

Hey Jonathan, totally understand that. Just wanted to leave it here for information purposes. The fullpage module doesn't seem to work with Nuxt RC6 either. Let's hope they finalize Nuxt 3 soon :)

[lin-97]

@momo-mao Do you have a complete code example?

[JonathanSchndr]

@momo-mao Do you have a complete code example?
Fore sure: https://github.com/alvarotrigo/nuxt-fullpage/tree/main/playground

Issues closed, initial topic is fixed.