Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

provide can only be used inside setup, with swiper.js

See original GitHub issue

Environment

Nuxt CLI v3.0.0-rc.4 RootDir: /home/projects/github-1o6cga Nuxt project info:

Operating System: Linux
Node Version: v16.14.2
Nuxt Version: 3.0.0-rc.4
Package Manager: npm@7.17.0
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

https://stackblitz.com/edit/github-1o6cga?file=app.vue

Describe the bug

I use swiperJS in nuxt3 rc4 No errors reported in development mode

But when running under the server after build, an warn is reported

[Vue warn]: provide() can only be used inside setup().

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

[Vue warn]: onBeforeUpdate is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

[Vue warn]: onUpdated is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

[Vue warn]: onBeforeUnmount is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

Additional context

No response

Logs

No response

Issue Analytics

State:
Created a year ago
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

danielroecommented, Jul 4, 2022

We can track in https://github.com/nuxt/framework/issues/4084. For now, you will need to add any dependencies that are importing vue into your build.transpile array.

0reactions

Sitronikcommented, Jul 4, 2022

We can track in #4084. For now, you will need to add any dependencies that are importing vue into your build.transpile array.

Thank you, I added my dependency vue-datepicker-next to build.transpile and everything works correctly

Top Results From Across the Web

Getting Started With Swiper

Installation. There are few options on how to include/import Swiper into your project: Install from NPM. We can install Swiper from NPM $...

Vue 3 - inject() can only be used inside setup or functional ...

The error is telling you that useStore is only for use inside of components, since the module isn't a component. From the docs:....

All Swiper.js Instances in Elementor are Now Exposed

Swiper uses the class 'swiper-container' in the slider wrapper element. Starting in Elementor 2.9.0, the Swiper instance will now be available in the...

vue-awesome-swiper - npm

The vue-awesome-swiper project will be deprecated in favor of Swiper Vue component, a TypeScript friendly project which is a recent official ...

Tutorial for Official SwiperJs React Carousel (Swiper Js How ...

After many years of being tied to 3rd party react versions of SwiperJS the official team has now created its own version of...