[Feat]: Add TypeScript moduleResolution: bundler support

[crashton28]

Which variants of Embla Carousel are you using?

• [x] embla-carousel (Core)
• [x] embla-carousel-react
• [ ] embla-carousel-vue
• [ ] embla-carousel-svelte
• [x] 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

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues
• [X] 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:

• https://github.com/davidjerleke/embla-carousel/discussions/726#discussioncomment-8331396

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

[davidjerleke]

Hi @fethca,

Thanks for your efforts. It rather seems like the problem is related to import paths pointing to package sub folders. With the bundler setting active, TypeScript seems to not like that and only accepts type imports from the package root. You can see the changes done in my PR here:

• #901

All builds are passing with the changes in the PR above.

[fethca]

I retried with the latest version of embla and it works flawlessly. I also retried with the 8.0.4 version that gave me the error Cannot find module 'embla-carousel/components/Options' and it worked. So it was a problem from my Typescript configuration even though I can't say which parameter exactly as I don't remember changing something.

Thanks for the work @davidjerleke

[davidjerleke]

@fethca my guess would be that you changed this:

{
-  moduleResolution: "bundler"
+  moduleResolution: "node"
}

But when testing my changes in the PR locally, I can make it work with moduleResolution: "bundler" too.

[fethca]

@davidjerleke my applications are on nodenext, so moduleResolution is also nodenext. I remember switching to tauri after I faced the issue and I let their default tsconfig parameters. It turns out it's "skipLibCheck": true that solved my problem, which makes sense cause Typescript will ignore errors from embla package. I'll try the new version when you'll merge it and let you know if it fixes it. For more context here's my current tsconfig.json file :

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "nodenext",
    "target": "ESNext",
    "strict": true,
    "resolveJsonModule": true,
    "jsx": "react-jsx",

    /* Tauri base parameters */
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "composite": true,
    "allowSyntheticDefaultImports": true,

    /* Linting */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  }
}

[davidjerleke]

@paulmolluzzo, @crashton28, @fethca and anyone else having problems with the moduleResolution: 'bundler' setting. Try v8.1.4 that includes a fix for this and let me know how it goes.

[fethca]

@davidjerleke no change for me on nodenext. Here's a screenshot :

The import paths in the esm folders as I did in the PoC above will be compulsory for moduleResolution:'nodenext'. I could open a separate issue if this version fixes it for the other moduleResolution settings

[davidjerleke]

@fethca I see. But this issue is about moduleResolution: 'bundler' so I think that should be separate from this issue.

[fethca]

Yep I agree, I came here cause I looked for Cannot find module 'embla-carousel/components/Options', my first comment wasn't that clear. I'll open a new issue