Swiper.js works locally but breaks after deployment to Vercel (Angular)

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:

https://github.com/moppdev/personal-portfolio

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/card.component";
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-card.component";

@Component({
selector: 'app-education',
standalone: true,
imports: [CardComponent, ErrorSuccessCardComponent],
templateUrl: './education.component.html',
styleUrl: './education.component.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:



Continue reading...