Webpack Module Parse Failed: Unexpected Character '@' with Angular and Swiper

Question

I'm currently working on an project in ionic (angular) and attempting to include Swiper (version 11.1.0) for sliding elements. However, I encounter the following compilation error:

./node_modules/swiper/swiper.css:14:0 - Error: Module parse failed: Unexpected character '@' (14:0) [ng] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders [ng] | [ng] | /* FONT_START */ [ng] > @font-face { [ng] | font-family: 'swiper-icons'; [ng] | src: url('data:application/font-woff;

My environment setup is as follows:

Angular CLI: 17.3.3 Node: 18.18.0 Package Manager: npm 9.8.1 OS: win32 x64 Angular: 17.3.3 Various Angular packages with their respective versions rxjs: 7.8.1 TypeScript: 5.2.2 zone.js: 0.14.4 @angular-devkit/build-angular: 17.2.3

I have literally spent nights over it but no fix.

I tried adding

/* In src/global.scss */ @import "~swiper/swiper-bundle.css";

how exactly are you loading swiper in your typescript? what's strange is, that you try to load global css which does not make any sense imho with swiper 11.1.0. since swiper 9 it's provided as a web component that brings it's styles on its own. global styles would not work anyway, because it's using shadow-dom for their web component. so i don't really understand why you try to load global styles at all, currently. — Christoph Stickel
– Christoph Stickel, Commented Apr 6, 2024 at 6:02

Christoph Stickel · Accepted Answer · 2024-04-06 06:29:10Z

You don't have to load any styles with Swiper Versions >= 9.0.0. You just have to use the register function in your typescript code as described in the documentation.

// import function to register Swiper custom elements import { register } from 'swiper/element/bundle'; // register Swiper custom elements register();

Since it's a web component it's taking care of its styles on its own inside of its shadow-root.
You can try this minimal stackblitz example: https://stackblitz.com/edit/stackblitz-starters-hehfax?file=src%2Fmain.ts

package.json

{ [...] "dependencies": { [...] "swiper": "^11.1.0" [...] }, [...] }

main.js

import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { register } from 'swiper/element/bundle'; import 'zone.js'; register(); @Component({ selector: 'app-root', standalone: true, template: ` <swiper-container> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper-container> `, styles: ` swiper-container { width: 200px; } `, schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class App { name = 'Angular'; } bootstrapApplication(App);

It's really just about:

install swiper as a dependency via npm.
import register function from swiper/element/bundle.
execute register function (be sure to only execute it once, so don't put it to the constructor of a component that might be used multiple times)
add schemas: [CUSTOM_ELEMENTS_SCHEMA] that angular compiler does not complain about the custom elements.
use the swiper-container and swiper-slide tags in your template to create the swiper.

Collectives™ on Stack Overflow

Webpack Module Parse Failed: Unexpected Character '@' with Angular and Swiper

1 Answer 1

package.json

main.js

It's really just about:

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

package.json

main.js

It's really just about:

Comments

Related