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

Question

SplideJS 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