fix: add ESM exports to support consistent CJS interop in Vite/Rolldown

babel.config.js

@@ -2,6 +2,18 @@ const { NODE_ENV } = process.env;
 
 const options = NODE_ENV === "test" ? { targets: { node: "current" } } : {};
 
-module.exports = {
-  presets: [["@babel/preset-env", options]],
+module.exports = (api) => {
+  const isESM = api.env("esm");
+
+  return {
+    presets: [
+      [
+        "@babel/preset-env",
+        {
+          ...options,
+          modules: isESM ? false : "auto",
+        },
+      ],
+    ],
+  };
 };

package.json

@@ -2,10 +2,20 @@
   "name": "react-ga4",
   "version": "2.1.0",
   "description": "React Google Analytics 4",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
   "scripts": {
-    "build": "NODE_ENV=production babel src -d dist",
+    "build": "npm run build:cjs && npm run build:esm",
+    "build:cjs": "NODE_ENV=production babel src -d dist/cjs",
+    "build:esm": "NODE_ENV=production BABEL_ENV=esm babel src -d dist/esm",
     "postbuild": "tsc src/index.js --declaration --allowJs --emitDeclarationOnly --outDir types",
     "prepublishOnly": "npm run build && npm test",
     "test": "NODE_ENV=test jest"

src/ga4.js

@@ -1,5 +1,5 @@
-import gtag from "./gtag";
-import format from "./format";
+import gtag from "./gtag.js";
+import format from "./format.js";
 
 /*
 Links

src/index.js

@@ -1,4 +1,4 @@
-import ga4, { GA4 } from "./ga4";
+import ga4, { GA4 } from "./ga4.js";
 
 export const ReactGAImplementation = GA4;