Error: Can't resolve 'swiper/vue' and Can't resolve 'swiper/css'

[iusx]

Check that this is really a bug

• I confirm

Reproduction link

https://github.com/earthrule/nuxt-swiper-error

Bug description

Hello, the technology stack for this problem is to use swiper in nuxt.js,Before that, I completely followed the steps in the https://swiperjs.com/vue documentation, installed via npm i swiper, and then used:

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
  };
</script>

to write a demo component, but after starting the project through npm run dev, two errors occurred:

Loading...
ERROR in ./components/Tutorial.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options !./components/Tutorial.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'swiper/css' in 'D:\team\jiangxue.official-website\components'
ERROR in ./components/Tutorial.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options !./components/Tutorial.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'swiper/vue' in 'D:\team\jiangxue.official-website\components'

I searched in swiper according to these two bugs respectively, according to the workaround in #4315:

"compilerOptions": {
    ...
    "paths": {
      "swiper_angular": ["node_modules/swiper/angular"]
    }
  }

But it didn't help, then I followed #4871 to use Swiper 6, but still got the above error and couldn't run.

After that, I followed the method of #5064 (comment) to modify, good news is: the error disappeared, but the bad news is that he Another bunch of errors came up and didn't display properly.

On this basis, I changed the demo provided by swiper, but the error still occurred

I hope you can help me understand how to solve it if I have encountered a similar problem, thank you very much

Expected Behavior

No response

Actual Behavior

No response

Swiper version

8.2.4

Platform/Target and Browser Versions

Windows; Node v16.15.1; Chromium 102.0.5005.124

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[iusx]

This question, after asking my friend @XiaoLi-sach and operation, has found the problem, maybe swiper 6, 7, 8 are based on Vue3 caused by `Error: Can't resolve 'swiper /vue' error, so a more conservative suggestion is to use the vue-2 version of https://github.com/surmon-china/vue-awesome-swiper to solve it.

Very sorry, I shouldn't use vue2 to test swiper 8\6\7 support for him.

[thetrav]

FWIW I'm using vue3 and observed the same behavior when following the instructions listed above.

I was using storybook, storybook still defaults to webpack 4, swiper has some magic export in package.json that requires webpack 5

storybook isn't willing to update such a major dependency in a minor release, so they have an optional step to get you to webpack 5 which will resolve the problem

[iusx]

Thank you

[DenyskoD]

using webpack 4 you can import like this
import { Swiper, SwiperSlide } from 'swiper/swiper-vue.mjs';
import 'swiper/swiper.css';

[iusx]

Thank you

[amjad-awan]

"swiper": "^11.1.4",
this is error Module not found: Can't resolve 'swiper/react'
i am importing like this import { Swiper, SwiperSlide } from "swiper/react";

[huhhell]

did u find a solution?