#Cannot find package 'react' imported from /Users/vayne/wmqj/animal-friends/node_modules/.pnpm/swiper

15 messages · Page 1 of 1 (latest)

chilly vortex
# 
---
import GrassHeroSwiper from "@components/GrassHereSwiper"
---
<GrassHeroSwiper client:visible />

import {Swiper, SwiperSlide} from "swiper/react"

// import Swiper core and required modules
import {Navigation, Pagination} from "swiper"
// Import Swiper styles
import "swiper/css"
import "swiper/css/navigation"
import "swiper/css/pagination"
import "swiper/css/scrollbar"

import grass_hero_1 from "@assets/grass-heros/grass-hero-1.png"

export default () => {
  return (
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination]}
      slidesPerView={1}
      onSlideChange={() => console.log("slide change")}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>
        <img
          src={grass_hero_1.src}
          width={grass_hero_1.width}
          height={grass_hero_1.height}
          alt=""
        />
      </SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  )
}
gritty ore
#

This is saying react isn't installed, do you have react in your dependencies?

gritty ore
chilly vortex
#

i dont use react direct, error from swiper

#

vite: {
ssr: {
noExternal: ["react"],
},
},

#

like this ?

#

error still exist

# 
// import Swiper core and required modules
import {A11y, Navigation, Pagination, Scrollbar} from "swiper"

import {Swiper, SwiperSlide} from "swiper/react"

// Import Swiper styles
import "swiper/css"
import "swiper/css/navigation"
import "swiper/css/pagination"
import "swiper/css/scrollbar"

export default () => {
  return (
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log("slide change")}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  )
}
#

"pnpm": {
"overrides": {
"react": "npm:@preact/compat@latest",
"react-dom": "npm:@preact/compat@latest"
}
},
"devDependencies": {
"i18next-fs-backend": "^2.1.1",
"postcss-px-to-viewport": "^1.1.1"
}

gritty ore
#

Strange, maybe try aliasing react with preact using the resolve.alias vite option

# 
 export default defineConfig({
  vite: {
    resolve:{
      alias:{
        { find: 'react-dom', replacement: 'preact/compat' },
        { find: 'react', replacement: 'preact/compat' },
      }
    }
  }
})
gritty ore
#

Just wondering if this did this work @chilly vortex ?

chilly vortex
#

it is not work , i find a way and i create a pull request in github

gritty ore
#

Interesting to see this work, were you using pnpm as your package manager?