Try different config

package.json

@@ -14,10 +14,19 @@
     "react"
   ],
   "license": "MIT",
-  "main": "lib/index.cjs.js",
-  "jsnext:main": "lib/index.cjs.js",
-  "module": "lib/index.cjs.js",
-  "types": "lib/index.d.ts",
+  "main": "./lib/index.js",
+  "module": "./lib/es/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "node": {
+        "require": "./lib/index.js",
+        "import": "./lib/es/index.js"
+      },
+      "default": "./lib/embla-carousel.browser.js"
+    },
+    "./lib/": "./lib/"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/davidcetinkaya/embla-carousel"

rollup.config.js

@@ -17,18 +17,41 @@ const typescriptConfig = {
   useTsconfigDeclarationDir: true,
 }
 const resolveConfig = {
-  customResolveOptions: {
-    moduleDirectory: 'react',
-  },
+  // jsnext: true,
+  // main: true,
+  // browser: true,
+  // customResolveOptions: {
+  //   moduleDirectory: 'react',
+  // },
 }
 
 export default [
+  // {
+  //   external: ['react'],
+  //   input: 'src/index.ts',
+  //   output: [
+  //     {
+  //       format: 'iife',
+  //       name: 'EmblaCarousel',
+  //       strict: true,
+  //       file: 'lib/index.js',
+  //       sourcemap: true,
+  //     },
+  //   ],
+  //   plugins: [
+  //     resolve(resolveConfig),
+  //     commonjs(),
+  //     typescript(typescriptConfig),
+  //     babel(babelConfig),
+  //     // terser(),
+  //   ],
+  // },
   {
     external: ['react'],
     input: {
-      [`index.${DEFAULT_FORMAT}`]: 'src/index.ts',
-      [`embla-carousel.${DEFAULT_FORMAT}`]: 'src/vanilla/index.ts',
-      [`react.${DEFAULT_FORMAT}`]: 'src/react/index.ts',
+      [`index`]: 'src/index.ts',
+      [`embla-carousel`]: 'src/vanilla/index.ts',
+      [`react`]: 'src/react/index.ts',
     },
     output: [
       {
@@ -46,14 +69,37 @@ export default [
       babel(babelConfig),
     ],
   },
+  {
+    external: ['react'],
+    input: {
+      [`index`]: 'src/index.ts',
+      [`embla-carousel`]: 'src/vanilla/index.ts',
+      [`react`]: 'src/react/index.ts',
+    },
+    output: [
+      {
+        format: 'esm',
+        name: 'EmblaCarousel',
+        strict: true,
+        sourcemap: true,
+        dir: 'lib/es',
+        globals: { react: 'React' },
+      },
+    ],
+    plugins: [
+      resolve(resolveConfig),
+      typescript(typescriptConfig),
+      babel(babelConfig),
+    ],
+  },
   {
     input: 'src/vanilla/index.ts',
     output: [
       {
         format: 'umd',
         name: 'EmblaCarousel',
         strict: true,
-        file: 'lib/embla-carousel.js',
+        file: 'lib/embla-carousel.browser.js',
         sourcemap: true,
       },
     ],

src/index.ts

@@ -1,2 +1,4 @@
-export { default } from './vanilla'
-export { useEmblaCarousel } from './react'
+import EmblaCarousel from './vanilla'
+import { useEmblaCarousel } from './react'
+
+export { EmblaCarousel, useEmblaCarousel }