[Bug]: Add nodenext compatibility for ESM imports

[fethca]

Which variants of Embla Carousel are you using?

• [x] embla-carousel (Core)
• [X] 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-fade
• [ ] embla-carousel-docs (Documentation)
• [ ] embla-carousel-docs (Generator)

Steps to reproduce

The current version of Embla Carousel lacks compatibility with the nodenext module resolution setting in TypeScript. It requires explicit file extensions in ESM imports. This will cause the build to fail with the error :

node_modules/.pnpm/embla-carousel@8.1.4/node_modules/embla-carousel/esm/components/EmblaCarousel.d.ts:1:28 - error TS2834: Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

import { EngineType } from './Engine'

The tsconfig I use to test it :

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

Expected Behavior

No error on build

Additional Context

I did a PoC of what would need to be done on this fork and released this version on npm to test it on my applications. From what I saw most of the job is to explicitely add proper file extension in import path so import { AnimationsType } from './Animations' becomes import { AnimationsType } from './Animations.js'. This change will break the rollup config for writing types cause it's used to add .ts to paths, I just changed it to fs.writeFileSync(esmTypesFilePath, esmTypesFile).

I only adapted embla-carousel & embla-carousel-react packages as those are the ones I needed for my app.

What browsers are you seeing the problem on?

No response

Version

8.1.4

CodeSandbox

No response

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]

Hi @fethca, I have created a PR for this now:

• 912

And it includes some fixes:

• All esm type files get the .js extension automatically in the build process.
• Fixes for other type problems.

I tested my changes in a fresh vite project with different tsconfig settings and after my fixes all the following setups did build without any errors (with skipLibCheck: false):

• module: commonjs
• module: nodenext
• moduleResolution: nodenext
• moduleResolution: bundler
• moduleResolution: node

[davidjerleke]

@fethca feel free to try v8.1.5 out and see if it solves the problem.

[fethca]

Hi @davidjerleke, I confirm it builds for my config too ! Thanks for the work

[davidjerleke]

@fethca thanks for testing 🎉! You may unpublish the POC if you want.