Could not find a declaration file for module '@splidejs/react-splide'

[Lauwed]

Checks

• Not a duplicate.
• 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

Hello !

I found nothing on internet so I decided to post it here. Sorry if it is not the right place, please tell me where I can find help if it is not.

I have a NextJS project with Storybook (I don't think this is because of it, but we never know) and Typescript. When I try to import SplideJS React, I have an error.

Could not find a declaration file for module '@splidejs/react-splide'. 'c:/Users/Laura/Desktop/Inside-Software-Website-Front-End/node_modules/@splidejs/react-splide/dist/js/react-splide.esm.js' implicitly has an 'any' type.
  There are types at 'c:/Users/Laura/Desktop/Inside-Software-Website-Front-End/node_modules/@splidejs/react-splide/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)

When trying to build my project through Vercel I have this Typesript error :

Failed to compile.
--
13:16:28.341 |  
13:16:28.342 | ./components/Footer/Body/index.tsx:8:25
13:16:28.342 | Type error: Module '"./NavList"' has no exported member 'FooterNavListProps'. Did you mean to use 'import FooterNavListProps from "./NavList"' instead?
13:16:28.342 |  
13:16:28.342 | 6 \|   footerNavListSocialsTitleStyle,
13:16:28.342 | 7 \| } from "../styles";
13:16:28.342 | >  8 \| import FooterNavList, { FooterNavListProps } from "./NavList";
13:16:28.342 | \|                         ^
13:16:28.342 | 9 \|
13:16:28.342 | 10 \| type FooterBodyProps = {
13:16:28.342 | 11 \|   nav: FooterNavListProps[];
13:16:28.424 | error Command failed with exit code 1.
13:16:28.425 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
13:16:28.444 | Error: Command "yarn run build" exited with 1

One solution possible is to put strict to false in tsconfig.json, but I think this is a bad idea.

Here is my package.json :

{
  "scripts": {
    "prepare": "panda codegen",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@fontsource/space-grotesk": "^5.0.13",
    "@fontsource/space-mono": "^5.0.15",
    "@pandacss/dev": "^0.15.5",
    "@splidejs/react-splide": "^0.7.12",
    "@splidejs/splide": "^4.1.4",
    "@splidejs/splide-extension-auto-scroll": "^0.5.3",
    "@types/animejs": "^3.1.8",
    "animejs": "^3.2.1",
    "dlv": "^1.1.3",
    "next": "13.5.4",
    "next-intl": "3.0.0-beta.19",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "7.4.6",
    "@storybook/addon-interactions": "7.4.6",
    "@storybook/addon-links": "7.4.6",
    "@storybook/addon-onboarding": "1.0.8",
    "@storybook/blocks": "7.4.6",
    "@storybook/nextjs": "7.4.6",
    "@storybook/react": "7.4.6",
    "@storybook/testing-library": "0.2.2",
    "@types/dlv": "^1.1.3",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "13.5.4",
    "eslint-plugin-storybook": "^0.6.15",
    "storybook": "7.4.6",
    "typescript": "^5"
  }
}

And the code of my component :

"use client";

import { Splide, SplideTrack } from "@splidejs/react-splide";
import "@splidejs/react-splide/css";
import { Testimonial } from "../../../types";
import TestimonialsCarouselItem from "./Item";
import TestimonialsCarouselNav from "./Nav";
import { bluredCirclesStyle, splideStyle } from "../styles";

type TestimonialsCarouselProps = {
  testimonials: Testimonial[];
  light?: boolean;
};

const TestimonialsCarousel: React.FC<TestimonialsCarouselProps> = ({
  testimonials,
  light = false,
}) => {
  return (
    <Splide
      hasTrack={false}
      options={{
        type: "loop",
        pagination: false,
        rewind: true,
        perPage: 2,
        perMove: 1,
        padding: { right: "15rem" },
        width: "70%",
        gap: "15px",
        breakpoints: {
          767: {
            width: "100%",
            perPage: 2,
            padding: { right: "5rem" },
          },
          1000: {
            perPage: 1,
            padding: { right: "4rem" },
          },
          1200: {
            padding: { right: "8rem" },
          },
        },
      }}
      aria-label="My Favorite Images"
      className={splideStyle}
    >
      <SplideTrack>
        {testimonials.map((testimonial, i) => (
          <TestimonialsCarouselItem
            {...testimonial}
            key={`testimonial-${i}`}
            light={light}
          />
        ))}
      </SplideTrack>

      <TestimonialsCarouselNav light={light} />
    </Splide>
  );
};

export default TestimonialsCarousel;

I created a new repo to see if it's working, but it's not
https://github.com/Lauwed/test-splide-ts-error
I also tried from scratch without Storybook. So it should not be the problem.

Reproduction Link

https://codesandbox.io/p/github/Lauwed/test-splide-ts-error/main?file=%2FREADME.md&workspaceId=9a62f4c3-29d3-4468-bb9a-f4c1f6b8680f

Steps to Reproduce

1. Create a NextJS Typescript project
2. Add and setup Storybook to the project using npx storybook@latest init and following those instructions : https://storybook.js.org/recipes/next
3. Remove custom import of Next from tsconfig.json (For required to use Storybook)

// Remove it
"paths": {
      "@/*": ["./*"]
    }

4. Install Splide

yarn add @splidejs/splide
yarn add @splidejs/react-splide

5. Create the component and you will have an error on Splide import.

Expected Behaviour

Should not have the Typescript error when importing SplideJS

[zanuarmirza]

In my case, this issue is caused by next.js new version using moduleResolution bundler by default. My old next.js project is working and I realized that it used moduleResolution node.
I looked at @splidejs/react-splide package.json js and it doesn't have export.types value yet.

It's already fixed just need to wait to be merged
https://github.com/Splidejs/react-splide/pull/73/files
related issue Splidejs/react-splide#72

temporary solution #1179

[tolubishops0]

In my case, this issue is caused by next.js new version using moduleResolution bundler by default. My old next.js project is working and I realized that it used moduleResolution node. I looked at @splidejs/react-splide package.json js and it doesn't have export.types value yet.

It's already fixed just need to wait to be merged https://github.com/Splidejs/react-splide/pull/73/files related issue Splidejs/react-splide#72

temporary solution #1179

hi has tis been merged, its july 2024 and im having the same issue

[Israel-Beni]

I am also facing the same issue in July 2024

[Loque18]

same here

[rozsival]

@zanuarmirza That PR never got merged. Pls @NaotoshiFujita, could this be resolved? Missing types field in exports makes this awesome lib unusable in TypeScript ESM environments. Thanks!

[Somtochukwu21]

Today is July 2024 and the problem still exist

[tolubishops0]

same here

i tried to ignore it and it worked, temporary

[bernhardberger]

same issue here, although in vue3/nuxt3-land

[felipelssilva]

same here

i tried to ignore it and it worked, temporary

How did you do this?

[felipelssilva]

I found a solution to prevent this:

Create a file called react-splide.d.ts and put this inside the file: declare module "@splidejs/react-splide";

And everything will work; it worked for me perfectly!

[Nuutrai]

I found a solution to prevent this:

Create a file called react-splide.d.ts and put this inside the file: declare module "@splidejs/react-splide";

And everything will work; it worked for me perfectly!

Where would you put this in your project? Also how have you imported that into other files?
I got it, thank you!

[raafaelgomees10]

Same issue. November 2024

[hihabib]

I found a solution to prevent this:

Create a file called react-splide.d.ts and put this inside the file: declare module "@splidejs/react-splide";

And everything will work; it worked for me perfectly!

works. Thank you (December, 2024)