swiper 分页器（pagination）不显示问题

在一个 react 项目中使用 swiper 实现 tab 切换效果，需要用到分页器，初始化 swiper 传入了 pagination 参数但是并没有生效，分页一直不显示，审查 swiper-container 元素发现是一个空的元素，分页并没有渲染。我使用的版本是8.4.6。

代码复现

js：

import { Swiper } from 'swiper';
import 'swiper/css';

useEffect(() => {
  swiperRef.current = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet(index: number, className: string) {
        return `${tabDataArray[index].title}`;
      },
    },
    loop: true,
    autoplay: true,
  });
}, []);

html：

  

  

    
 1111
    
 2222
  

解决方法：

将 import { Swiper } from ‘swiper’ 修改为 import { Swiper } from ‘swiper/swiper-bundle.esm.js’

参考issue：https://github.com/nolimits4web/swiper/issues/3768