PlasmoHQ / plasmo

🧩 The Browser Extension Framework
https://www.plasmo.com
MIT License
10.16k stars 352 forks source link

[EXP] Plasmo +react+swiper #742

Open gdlk888 opened 1 year ago

gdlk888 commented 1 year ago

What is the example you wish to see?

I tried to use react's swiper in plasmo, using the demo from the official website, but the build failed.

Is there any context that might help us understand?

🔴 ERROR | Build failed. To debug, run plasmo dev --verbose. 🔴 ERROR | Failed to resolve 'swiper/css' from './newtab/swiperComp/index.tsx' 🔴 ERROR | Cannot load file './css' from module 'swiper'

// Import Swiper React components import { Swiper, SwiperSlide } from 'swiper/react';

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

// import required modules import { Pagination } from 'swiper/modules'; import { Box } from '@mui/material';

export default () => { const pagination = { clickable: true, renderBullet: function (index, className) { return <span class="${className} nb">${index + 1}</span>; }, // renderBullet: function (index, className) { // console.log('index, className', index, className); // return <Box sx={{ borderRadius: '50%', width: 20, height: 20 }}>{111}; // }, }; return (

console.log(swiper)} onSlideChange={() => console.log('slide change')} direction={'vertical'} modules={[Pagination]} onScroll={(t) => { console.log('t'); }} > Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9

); };

Code of Conduct