typescript - Swiper.js works locally but breaks after deployment to Vercel (Angular) - Stack Overflow

admin管理员组

文章数量:1345436

I’ve implemented Swiper.js in an Angular (using v18) component to display a certifications carousel. While it renders perfectly during local development using npm start, the styling completely breaks after deploying to Vercel. The slides become stacked vertically, navigation buttons disappear, and the container loses its dimensions. I imported Swiper with npm. I deployed to Vercel via the website and not the cli.

I've checked if Swiper initializes in any way in the console (it does). I've swapped my import 'swiper/scss' lines with import 'swiper/css' . I manually imported Sass via npm. Didn't help either.

My github repo:

Component's ts code:

import { Component, inject, OnInit } from '@angular/core';
import { InfoService } from '../services/info.service';
import { Education, Certification } from '../model/education.model';
import { CardComponent } from "./card/cardponent";
import { Swiper } from 'swiper';
import { Navigation } from 'swiper/modules';
import { SwiperOptions } from 'swiper/types';
import 'swiper/scss';
import 'swiper/scss/navigation';
import { ErrorSuccessCardComponent } from "../error-success-card/error-success-cardponent";

@Component({
  selector: 'app-education',
  standalone: true,
  imports: [CardComponent, ErrorSuccessCardComponent],
  templateUrl: './educationponent.html',
  styleUrl: './educationponent.scss'
})
export class EducationComponent implements OnInit {
  // TS for the Education component

  checker: boolean = false;
  errorMessage: string = "";
  
  // variables to hold relevant info, checked by corresponding models
  education?: Education[];
  certifications?: Certification[];

  // inject the InfoService
  private infoService = inject(InfoService);


  // On creation of component
  ngOnInit()
  {
    // education and certifications should be loaded and non-undefined, and Swiper.js loaded
    // Otherwise error is thrown
      try {
        this.education = this.infoService.education;
        this.certifications = this.infoService.certifications;  
        this.checker = true;

        // postpone the following
        setTimeout(() => {

          /// Use Swiper.js to make Certifications and Education more intuitive ///
          // const eduSwiperOptions: SwiperOptions = {
          //   modules: [Navigation],
          //   direction: 'horizontal',
          //   navigation: {
          //     prevEl: ".education-prev",
          //     nextEl: ".education-next"
          //   }
          // };
    
          // const eduSwiper = new Swiper(".education-swiper", eduSwiperOptions);
    
          // Instantiate SwiperOptions' options to use for the certSwiper instance
          const certSwiperOptions: SwiperOptions = {
            modules: [Navigation],
            direction: 'horizontal',
            spaceBetween: 20,
            navigation: {
              prevEl: ".swiper-button-prev",
              nextEl: ".swiper-button-next"
            },
            breakpoints: {
              480: {
                slidesPerView: 2,
              },
              1100: {
                slidesPerView: 3,
              }
            }
          };
    
          // Create new Swiper instance
          const certSwiper = new Swiper(".cert-swiper", certSwiperOptions);
          console.log(certSwiper);
        }, 100);
        
      } catch (error) {
        // throw error
        this.errorMessage = "Something went wrong with retrieving information from the JSON file.";
        throw new Error(`${error}`);
      }
  }
    



}

What should be displayed:

What is displaying on Vercel:

本文标签： typescriptSwiperjs works locally but breaks after deployment to Vercel (Angular)Stack Overflow