Cannot find module 'swiper/css' or its corresponding type declarations. ts(2307)

[jmaldon1]

I am using Remix and in order to import css files in remix you must do it like this:

import swiperCss from "swiper/css";  // ERROR: Cannot find module 'swiper/css' or its corresponding type declarations. ts(2307)

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      // href: "https://unpkg.com/swiper@8/swiper-bundle.min.css",
      href: swiperCss,
    },
  ];
};

Does anyone else have a way to handle this without doing @ts-expect-error to ignore the error?

[MangoMarcus]

I have the same issue, although only when using dynamic imports eg. import('swiper/css')

My only fix is to declare a types file

// swiper.d.ts
declare module 'swiper/css' {}
declare module 'swiper/css/pagination' {}
declare module 'swiper/css/autoplay' {}
declare module 'swiper/css/effect-fade' {}
declare module 'swiper/css/navigation' {}
// Any other styles you need...

[HT-35]

Tôi cũng gặp vấn đề tương tự, mặc dù chỉ khi sử dụng lệnh nhập động, ví dụ:import('swiper/css')

Cách sửa chữa duy nhất của tôi là khai báo một tệp kiểu

// swiper.d.ts
declare module 'swiper/css' {}
declare module 'swiper/css/pagination' {}
declare module 'swiper/css/autoplay' {}
declare module 'swiper/css/effect-fade' {}
declare module 'swiper/css/navigation' {}
// Any other styles you need...

tks

[Rick-Phoenix]

Another solution is to import the css modules from a .css file instead of a JSX/TSX file:

@import "swiper/css/pagination";
@import "swiper/css/scrollbar";
@import "swiper/css";
@import "swiper/css/effect-coverflow";

[kelvinmati]

This worked for me.
Thank you very much

[asliddinrashidovich]

this worked for me. Thanks