Import with typescript highlights error

[FuuKowatty]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.7.12

Description

Slider works but in report I receives an error

Could not find a declaration file for module '@splidejs/react-splide'. 'path-to-lib' implicitly has an 'any' type. There are types at 'path-to-lib-index.d-ts', but this result could not be resolved when respecting package.json "exports". The '@splidejs/react-splide' library may need to update its package.json or typings.ts(7016) Could not find a declaration file for module '@splidejs/react-splide'. 'path-to-lib/react-splide.esm.js' implicitly has an 'any' type. There are types at 'path-to-lib/dist/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@splidejs/react-splide' library may need to update its package.json or typings.ts(7016)

Reproduction Link

No response

Steps to Reproduce

Im just importing import { Splide, SplideSlide } from '@splidejs/react-splide'

Expected Behaviour

Error highlight should not be displayed

[MattChowski]

Really? No answer to this? Been having this issue for weeks now..

[FuuKowatty]

@MattChowski I found out you could try npm install @types/[lib name] but splidejs does not have their types so you have to overwrite type if you do not wanna see error just create in source folder splidejs.d.ts and put something like this

declare module '@splidejs/react-splide';

declare module 'module-name' { export function myFunction(): string; }

[MattChowski]

@FuuKowatty Thanks for this! I actually threw away the react components and used a standard way:

` const ImageCarousel = ({ imagesUrls }: ImageCarouselProps) => { const { selectedItem } = useListContext(); const splideRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  let splide: Splide;
  if (splideRef.current) {
    splide = new Splide(splideRef.current, {
      rewind: true,
      pagination: false,
      keyboard: true,
    });
    splide.mount();
  }

  return () => {
    splide.destroy();
  };
}, [selectedItem]);

return (
  <div className="w-full">
    <div
      className="splide"
      aria-label="Splide Basic HTML Example"
      ref={splideRef}
    >
      <div className="splide__track">
        <ul className="splide__list">
          {imagesUrls.map((imageUrl) => (
            <li className="splide__slide" key={imageUrl}>
              <img
                src={imageUrl}
                alt="Asset Photography"
                className="h-[170px] w-full object-cover "
              />
            </li>
          ))}
        </ul>
      </div>
    </div>
  </div>
);

}; `

[eliabyteixeira]

I also have the same problem :/

[fabiofreitasbr]

Insert the comment below one line before of command to ignore the Typescript in importation

// @ts-ignore
import { Splide, SplideSlide } from '@splidejs/react-splide';

and use any with const

const splideOptions: any = {
        perPage: 3,
        type: 'loop',
        drag: 'free',
        snap: true,
        gap: '1rem',
        focus: 'center',
        pagination: false,
        breakpoints: {
            640: { perPage: 1.2, },
            960: { perPage: 2.2, },
            1200: { perPage: 3, },
        }
}

after call const splideOptions... <Splide options={splideOptions}>

[tresorama]

Typescript ignores "package.json > types" if also "package.json > exports" is defined. We need to wait for an update from dev.

---

Workaround

Meanwhile, To get types working you can modify the package.json in node_modules, meaning that if you reinstall/update the package you need to re-do that.

To avoid doing it manually every time, you can persist the change with patch-package (here a guide)

// in node_modules/@splidejs/react-splide/package.json

{
  // ...omitted
  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts", // ADD THIS LINE !!!!!
      "require": "./dist/js/react-splide.cjs.js",
      "import": "./dist/js/react-splide.esm.js",
      "default": "./dist/js/react-splide.esm.js"
    },
    "./css": "./dist/css/splide.min.css",
    "./css/core": "./dist/css/splide-core.min.css",
    "./css/*": "./dist/css/themes/splide-*.min.css"
  },
}

[JheanAntunes]

Typescript giving error when importing { Splide, SplideSlide } from '@splidejs/react-splide', I found the solution for development mode in this edition in the @tresorama comment commented on September 11th However, when building in vercel the error appears again from imports of the splitter that do not find the module declaration. The solution is to transform the files into jsx, you can use it this way

explaining: code

By default in NextJs, components are rendered on the server side, but if the component needs to be rendered on the client, you can use the "use client" directive at the top (above import, export, etc.)! browser features, APIs, events. Shortcut: You create a constant that will receive the lib component (function) and adding the "use client" directive in that file will tell nextjs that these components are rendered on the client. If you didn't know this shortcut you would probably do it like this // note: as this file is jsx so the import error doesn't happen, tsx {children}:React.PropsWithChildren

export const SpliderClientComponent = ({children}) => { <Splide>{children}</Splide> }

Basic example:

Client-side shortcut + jsx to avoid import errors when building the project.

lol, on line 4 the name of the constant is splider The only file that will be jsx is the one above, the rest you use tsx importing these components.

Error: Does not import anything from the spider module, interface, components

Example with auto-scroll

[KingMatrix1989]

My temporary solution for using Options in my Nextjs project

// global.d.ts
declare module "@splidejs/react-splide" {
  export { Options } from "@splidejs/splide";
  export { Splide, SplideSlide } from "@splidejs/react-splide";
}

[nezhachen]

My temporary solution for using Options in my Nextjs project

// global.d.ts
declare module "@splidejs/react-splide" {
  export { Options } from "@splidejs/splide";
  export { Splide, SplideSlide } from "@splidejs/react-splide";
}

Thanks very much