[Feat]: Add TypeScript moduleResolution: bundler support

[crashton28]

Which variants of Embla Carousel are you using?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Steps to reproduce

In attempting to use the isPlaying method as well as the autoplay:stop and autoplay:play event listeners the types are not found. This project is currently within a monorepo and using pnpm.

We are able to resolve the issue by updating our tsconfig with the following, however we are not able to make this change as we need moduleResolution to be set to bundler for our builds.

"moduleResolution": "node10",
"module": "ESNext"

Screenshots of the errors within VSCode

Expected Behavior

Types would have been found

Additional Context

I have also tried...

What browsers are you seeing the problem on?

No response

Version

v8.0.0

CodeSandbox

CodeSandbox: Monorepo with TS Error

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for bug reports

[davidjerleke]

@crashton28 thanks for your bug report. Please create a minimal reproduction environment and share steps to reproduce the problem as it’s mandatory if you want me to look into this.

Best,
David

[crashton28]

I've added a codesandbox demo to the original issue above

[davidjerleke]

@crashton28 thanks. Unfortunately I can't access files under node_modules to debug this. I think we need a "real" repository and not a CodeSandbox in this case.

As you mention, setting moduleResolution: node solves it so this is related to:

• [Help]: Cannot find module 'embla-carousel/components/Options' or its corresponding type declarations. #726 (reply in thread)

But I don't know why yet. Feel free to help me out and read about the new bundler option that TypeScript introduced recently which is causing these errors.

It feels like devs spend 90% of their time with bundlers and problems related to them so I'm happy that we finally we have yet another option that can cause bundling problems. Yaay 😉!

Best,
David

[paulmolluzzo]

@davidjerleke The node_modules for a pnpm project are in the .pnpm folder. I can access the node modules for the Embla packages accordingly (tried in an incognito window to be sure I didn't have some special perms).

Direct link to the autoplay declaractions for example: https://codesandbox.io/p/devbox/embla-carousel-autoplay-react-forked-7tkpmg?file=%2Fnode_modules%2F.pnpm%2Fembla-carousel-autoplay%408.0.0_embla-carousel%408.0.0%2Fnode_modules%2Fembla-carousel-autoplay%2Fesm%2Fcomponents%2FAutoplay.d.ts

[crashton28]

The codesandbox is a dev box so you should be able to download and install the node modules for debugging.

[davidjerleke]

@crashton28 thanks. I will look into it when possible. Until then: Feel free to help out.

Best,
David

[paulmolluzzo]

@paulmolluzzo do you mean that you can access the types without any problems?

No, I mean anyone can access the node_modules of a codesandox on that website. The screenshot shows you where it is and the link brings you there directly. 😄

[davidjerleke]

@paulmolluzzo yes thanks. Didn’t know that so debugging will be less cumbersome know that you made me aware of that. No need to create a local project 🙂.

[davidjerleke]

Changing label to feature request because moduleResolution: bundler was released with TypeScript 5.0 16 March 2023 when Embla already existed.

[davidjerleke]

Anyone who wants to contribute can look into this issue, because it doesn't require any prior knowledge of how Embla works. I'm busy building the fade plugin so it would really help.

Best,
David

[fethca]

@crashton28 thanks. Unfortunately I can't access files under node_modules to debug this. I think we need a "real" repository and not a CodeSandbox in this case.

As you mention, setting moduleResolution: node solves it so this is related to:

• [Help]: Cannot find module 'embla-carousel/components/Options' or its corresponding type declarations. #726 (reply in thread)

But I don't know why yet. Feel free to help me out and read about the new bundler option that TypeScript introduced recently which is causing these errors.

It feels like devs spend 90% of their time with bundlers and problems related to them so I'm happy that we finally we have yet another option that can cause bundling problems. Yaay 😉!

Best, David

Hi David,

I made a PoC on embla-carousel-react and its dependencies on this fork. I've integrated this version into one of my React applications for testing. My commits are a bit messy cause I struggled with rollup and versionning. I disabled the docs to focus only on the modules I needed and I didn't adapt the tests. I think it'll be a good oppotunity to use vitest (that's why I switched to nodenext on my repos). Basically the main change is specifying the files extension so that Typescript knows if it's a cjs file or not, here for example, . I might do a complete PR if I have the time.

Best,
Jay