diff --git a/packages/cloudflare-video-element/package.json b/packages/cloudflare-video-element/package.json
index d2eddf2..f571f45 100644
--- a/packages/cloudflare-video-element/package.json
+++ b/packages/cloudflare-video-element/package.json
@@ -18,11 +18,31 @@
     "dist"
   ],
   "type": "module",
-  "main": "cloudflare-video-element.js",
-  "types": "cloudflare-video-element.d.ts",
+  "types": "./dist/cloudflare-video-element.d.ts",
+  "main": "./dist/cloudflare-video-element.js",
   "exports": {
-    ".": "./cloudflare-video-element.js",
-    "./react": "./dist/react.js"
+    ".": {
+      "types": "./dist/cloudflare-video-element.d.ts",
+      "import": "./dist/cloudflare-video-element.js",
+      "require": "./dist/cjs/cloudflare-video-element.js",
+      "default": "./dist/cloudflare-video-element.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/cjs/react.js",
+      "default": "./dist/react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "*": [
+        "./dist/cloudflare-video-element.d.ts"
+      ]
+    }
   },
   "scripts": {
     "lint": "eslint *.js",
diff --git a/packages/dash-video-element/package.json b/packages/dash-video-element/package.json
index acb31a6..2c67b6e 100644
--- a/packages/dash-video-element/package.json
+++ b/packages/dash-video-element/package.json
@@ -18,11 +18,31 @@
     "dist"
   ],
   "type": "module",
-  "main": "dash-video-element.js",
-  "types": "dash-video-element.d.ts",
+  "types": "./dist/dash-video-element.d.ts",
+  "main": "./dist/dash-video-element.js",
   "exports": {
-    ".": "./dash-video-element.js",
-    "./react": "./dist/react.js"
+    ".": {
+      "types": "./dist/dash-video-element.d.ts",
+      "import": "./dist/dash-video-element.js",
+      "require": "./dist/cjs/dash-video-element.js",
+      "default": "./dist/dash-video-element.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/cjs/react.js",
+      "default": "./dist/react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "*": [
+        "./dist/dash-video-element.d.ts"
+      ]
+    }
   },
   "scripts": {
     "lint": "eslint *.js",
diff --git a/packages/hls-video-element/package.json b/packages/hls-video-element/package.json
index 5bc030b..511e6aa 100644
--- a/packages/hls-video-element/package.json
+++ b/packages/hls-video-element/package.json
@@ -18,11 +18,31 @@
     "dist"
   ],
   "type": "module",
-  "main": "hls-video-element.js",
-  "types": "hls-video-element.d.ts",
+  "types": "./dist/hls-video-element.d.ts",
+  "main": "./dist/hls-video-element.js",
   "exports": {
-    ".": "./hls-video-element.js",
-    "./react": "./dist/react.js"
+    ".": {
+      "types": "./dist/hls-video-element.d.ts",
+      "import": "./dist/hls-video-element.js",
+      "require": "./dist/cjs/hls-video-element.js",
+      "default": "./dist/hls-video-element.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/cjs/react.js",
+      "default": "./dist/react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "*": [
+        "./dist/hls-video-element.d.ts"
+      ]
+    }
   },
   "scripts": {
     "lint": "eslint *.js",
diff --git a/packages/jwplayer-video-element/package.json b/packages/jwplayer-video-element/package.json
index a16c6e5..7c5d61b 100644
--- a/packages/jwplayer-video-element/package.json
+++ b/packages/jwplayer-video-element/package.json
@@ -18,11 +18,31 @@
     "dist"
   ],
   "type": "module",
-  "main": "jwplayer-video-element.js",
-  "types": "jwplayer-video-element.d.ts",
+  "types": "./dist/jwplayer-video-element.d.ts",
+  "main": "./dist/jwplayer-video-element.js",
   "exports": {
-    ".": "./jwplayer-video-element.js",
-    "./react": "./dist/react.js"
+    ".": {
+      "types": "./dist/jwplayer-video-element.d.ts",
+      "import": "./dist/jwplayer-video-element.js",
+      "require": "./dist/cjs/jwplayer-video-element.js",
+      "default": "./dist/jwplayer-video-element.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/cjs/react.js",
+      "default": "./dist/react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "*": [
+        "./dist/jwplayer-video-element.d.ts"
+      ]
+    }
   },
   "scripts": {
     "lint": "eslint *.js",
diff --git a/packages/shaka-video-element/package.json b/packages/shaka-video-element/package.json
index 3fc2673..c3c03a5 100644
--- a/packages/shaka-video-element/package.json
+++ b/packages/shaka-video-element/package.json
@@ -18,11 +18,31 @@
     "dist"
   ],
   "type": "module",
-  "main": "shaka-video-element.js",
-  "types": "shaka-video-element.d.ts",
+  "types": "./dist/shaka-video-element.d.ts",
+  "main": "./dist/shaka-video-element.js",
   "exports": {
-    ".": "./shaka-video-element.js",
-    "./react": "./dist/react.js"
+    ".": {
+      "types": "./dist/shaka-video-element.d.ts",
+      "import": "./dist/shaka-video-element.js",
+      "require": "./dist/cjs/shaka-video-element.js",
+      "default": "./dist/shaka-video-element.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/cjs/react.js",
+      "default": "./dist/react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "*": [
+        "./dist/shaka-video-element.d.ts"
+      ]
+    }
   },
   "scripts": {
     "lint": "eslint *.js",
diff --git a/packages/spotify-audio-element/package.json b/packages/spotify-audio-element/package.json
index 0b37914..53d5f76 100644
--- a/packages/spotify-audio-element/package.json
+++ b/packages/spotify-audio-element/package.json
@@ -18,11 +18,31 @@
     "dist"
   ],
   "type": "module",
-  "main": "spotify-audio-element.js",
-  "types": "spotify-audio-element.d.ts",
+  "types": "./dist/spotify-audio-element.d.ts",
+  "main": "./dist/spotify-audio-element.js",
   "exports": {
-    ".": "./spotify-audio-element.js",
-    "./react": "./dist/react.js"
+    ".": {
+      "types": "./dist/spotify-audio-element.d.ts",
+      "import": "./dist/spotify-audio-element.js",
+      "require": "./dist/cjs/spotify-audio-element.js",
+      "default": "./dist/spotify-audio-element.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/cjs/react.js",
+      "default": "./dist/react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "*": [
+        "./dist/spotify-audio-element.d.ts"
+      ]
+    }
   },
   "scripts": {
     "lint": "eslint spotify-audio-element.js",
diff --git a/packages/videojs-video-element/package.json b/packages/videojs-video-element/package.json
index 01ae5af..d344ebb 100644
--- a/packages/videojs-video-element/package.json
+++ b/packages/videojs-video-element/package.json
@@ -18,11 +18,31 @@
     "dist"
   ],
   "type": "module",
-  "main": "videojs-video-element.js",
-  "types": "videojs-video-element.d.ts",
+  "types": "./dist/videojs-video-element.d.ts",
+  "main": "./dist/videojs-video-element.js",
   "exports": {
-    ".": "./videojs-video-element.js",
-    "./react": "./dist/react.js"
+    ".": {
+      "types": "./dist/videojs-video-element.d.ts",
+      "import": "./dist/videojs-video-element.js",
+      "require": "./dist/cjs/videojs-video-element.js",
+      "default": "./dist/videojs-video-element.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/cjs/react.js",
+      "default": "./dist/react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "*": [
+        "./dist/videojs-video-element.d.ts"
+      ]
+    }
   },
   "scripts": {
     "lint": "eslint *.js",
diff --git a/packages/vimeo-video-element/package.json b/packages/vimeo-video-element/package.json
index 4b6919d..ddb1215 100644
--- a/packages/vimeo-video-element/package.json
+++ b/packages/vimeo-video-element/package.json
@@ -18,11 +18,31 @@
     "dist"
   ],
   "type": "module",
-  "main": "vimeo-video-element.js",
-  "types": "vimeo-video-element.d.ts",
+  "types": "./dist/vimeo-video-element.d.ts",
+  "main": "./dist/vimeo-video-element.js",
   "exports": {
-    ".": "./vimeo-video-element.js",
-    "./react": "./dist/react.js"
+    ".": {
+      "types": "./dist/vimeo-video-element.d.ts",
+      "import": "./dist/vimeo-video-element.js",
+      "require": "./dist/cjs/vimeo-video-element.js",
+      "default": "./dist/vimeo-video-element.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/cjs/react.js",
+      "default": "./dist/react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "*": [
+        "./dist/vimeo-video-element.d.ts"
+      ]
+    }
   },
   "scripts": {
     "lint": "eslint *.js",
diff --git a/packages/wistia-video-element/package.json b/packages/wistia-video-element/package.json
index 4d21acd..c92c101 100644
--- a/packages/wistia-video-element/package.json
+++ b/packages/wistia-video-element/package.json
@@ -18,11 +18,31 @@
     "dist"
   ],
   "type": "module",
-  "main": "wistia-video-element.js",
-  "types": "wistia-video-element.d.ts",
+  "types": "./dist/wistia-video-element.d.ts",
+  "main": "./dist/wistia-video-element.js",
   "exports": {
-    ".": "./wistia-video-element.js",
-    "./react": "./dist/react.js"
+    ".": {
+      "types": "./dist/wistia-video-element.d.ts",
+      "import": "./dist/wistia-video-element.js",
+      "require": "./dist/cjs/wistia-video-element.js",
+      "default": "./dist/wistia-video-element.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/cjs/react.js",
+      "default": "./dist/react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "*": [
+        "./dist/wistia-video-element.d.ts"
+      ]
+    }
   },
   "scripts": {
     "lint": "eslint *.js",
diff --git a/packages/youtube-video-element/package.json b/packages/youtube-video-element/package.json
index 50df1a7..8a08827 100644
--- a/packages/youtube-video-element/package.json
+++ b/packages/youtube-video-element/package.json
@@ -18,11 +18,31 @@
     "dist"
   ],
   "type": "module",
-  "main": "youtube-video-element.js",
-  "types": "youtube-video-element.d.ts",
+  "types": "./dist/youtube-video-element.d.ts",
+  "main": "./dist/youtube-video-element.js",
   "exports": {
-    ".": "./youtube-video-element.js",
-    "./react": "./dist/react.js"
+    ".": {
+      "types": "./dist/youtube-video-element.d.ts",
+      "import": "./dist/youtube-video-element.js",
+      "require": "./dist/cjs/youtube-video-element.js",
+      "default": "./dist/youtube-video-element.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/cjs/react.js",
+      "default": "./dist/react.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "*": [
+        "./dist/youtube-video-element.d.ts"
+      ]
+    }
   },
   "scripts": {
     "lint": "eslint *.js",
diff --git a/scripts/build-react-wrapper/build.js b/scripts/build-react-wrapper/build.js
index 1481317..6d64409 100755
--- a/scripts/build-react-wrapper/build.js
+++ b/scripts/build-react-wrapper/build.js
@@ -2,14 +2,14 @@
 import { parseArgs } from 'node:util';
 import process from 'node:process';
 import { join, dirname } from 'node:path';
-import { realpath, mkdir, readFile, writeFile, unlink } from 'node:fs/promises';
+import * as fs from 'node:fs/promises';
 import { fileURLToPath } from 'node:url';
 import { build as tsup } from 'tsup';
 
 const header = `// This file is generated by media-elements/scripts/build-react-wrapper!\n`;
 
-const nodePath = await realpath(process.argv[1]);
-const modulePath = await realpath(fileURLToPath(import.meta.url));
+const nodePath = await fs.realpath(process.argv[1]);
+const modulePath = await fs.realpath(fileURLToPath(import.meta.url));
 const isCLI = nodePath === modulePath;
 
 if (isCLI) cliBuild();
@@ -26,24 +26,24 @@ export async function cliBuild() {
 
 export async function build() {
   // read name from package.json
-  const { name } = JSON.parse(await readFile('./package.json', 'utf8'));
+  const { name } = JSON.parse(await fs.readFile('./package.json', 'utf8'));
 
   if (name.endsWith('video-element') || name.endsWith('audio-element')) {
-    await mkdir('./dist', { recursive: true });
+    await fs.mkdir('./dist', { recursive: true });
 
     // copy wrapper file templates/react.js to root folder and replace {{{name}}}, {{{filename}}}
-    const wrapper = await readFile(join(dirname(modulePath), '/templates/react.ts'), 'utf8');
+    const wrapper = await fs.readFile(join(dirname(modulePath), '/templates/react.ts'), 'utf8');
 
     const wrapperContent = wrapper
       .replace(/{{{element_name}}}/g, name.replace(/-element$/, ''))
       .replace(/{{{file_name}}}/g, name);
 
-    await writeFile(`./dist/react.ts`, header + wrapperContent);
+    await fs.writeFile(`./dist/react.ts`, header + wrapperContent);
 
     // Check if there is a tsconfig.json file. If not, use default options.
     let compilerOptions = {};
     try {
-      await readFile('./tsconfig.json');
+      await fs.readFile('./tsconfig.json');
     } catch (err) {
       compilerOptions = {
         target: 'es2022',
@@ -53,16 +53,51 @@ export async function build() {
       }
     }
 
+    await tsup({
+      entry: [`./${name}.js`],
+      outDir: 'dist',
+      dts: {
+        compilerOptions
+      },
+      format: 'esm',
+      bundle: false,
+    });
+
     await tsup({
       entry: ['dist/react.ts'],
+      outDir: 'dist',
       dts: {
         resolve: ['ce-la-react'],
         compilerOptions
       },
       format: 'esm',
-      external: [`../${name}.js`, 'react'],
+      external: [`./${name}.js`, 'react'],
+    });
+
+    // Build CJS files
+    await fs.mkdir('./dist/cjs', { recursive: true });
+    await fs.writeFile(`./dist/cjs/package.json`, JSON.stringify({ type: 'commonjs' }));
+
+    await tsup({
+      entry: [`./${name}.js`],
+      outDir: 'dist/cjs',
+      format: 'cjs',
+      bundle: false,
+      outExtension() {
+        return { js: `.js` }
+      },
+    });
+
+    await tsup({
+      entry: ['dist/react.ts'],
+      outDir: 'dist/cjs',
+      format: 'cjs',
+      external: [`./${name}.js`, 'react'],
+      outExtension() {
+        return { js: `.js` }
+      },
     });
 
-    await unlink('./dist/react.ts');
+    await fs.unlink('./dist/react.ts');
   }
 }
diff --git a/scripts/build-react-wrapper/templates/react.ts b/scripts/build-react-wrapper/templates/react.ts
index 56747b9..d8fca53 100644
--- a/scripts/build-react-wrapper/templates/react.ts
+++ b/scripts/build-react-wrapper/templates/react.ts
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import CustomMediaElement from '../{{{file_name}}}.js';
+import CustomMediaElement from './{{{file_name}}}.js';
 // keep as last import, ce-la-react is bundled.
 import { createComponent } from 'ce-la-react';