Splidejs
Could not find a declaration file for module '@splidejs/react-splide'
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
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
- Create a NextJS Typescript project
- Add and setup Storybook to the project using
npx storybook@latest initand following those instructions : https://storybook.js.org/recipes/next - Remove custom import of Next from
tsconfig.json(For required to use Storybook)
// Remove it
"paths": {
"@/*": ["./*"]
}
- Install Splide
yarn add @splidejs/splide
yarn add @splidejs/react-splide
- Create the component and you will have an error on Splide import.
Expected Behaviour
Should not have the Typescript error when importing SplideJS
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 https://github.com/Splidejs/react-splide/issues/72
temporary solution https://github.com/Splidejs/splide/issues/1179
In my case, this issue is caused by next.js new version using moduleResolution
bundlerby default. My old next.js project is working and I realized that it used moduleResolutionnode. 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
@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!
