fix: use an alternative approach to support ESM

Author: satya164

docs/pages/build.md

@@ -74,14 +74,14 @@ yarn add --dev react-native-builder-bob
 
    ```json
    "source": "./src/index.tsx",
-   "main": "./lib/commonjs/index.cjs",
-   "module": "./lib/module/index.mjs",
+   "main": "./lib/commonjs/index.js",
+   "module": "./lib/module/index.js",
    "types": "./lib/typescript/src/index.d.ts",
    "exports": {
      ".": {
        "types": "./typescript/src/index.d.ts",
-       "import": "./module/index.mjs",
-       "require": "./commonjs/index.cjs"
+       "import": "./module/index.js",
+       "require": "./commonjs/index.js"
      }
    },
    "files": [
@@ -101,8 +101,6 @@ yarn add --dev react-native-builder-bob
 
    Make sure to change specify correct files according to the targets you have enabled.
 
-   > The `exports` field also requires the `esm` option to be enabled for the [`commonjs`](#commonjs) and [`module`](#module) targets. In addition, the file extensions of the generated files will be `.js` instead of `.cjs` and `.mjs` if the `esm` option is not enabled.
-
    > If you're building TypeScript definition files, also make sure that the `types` field points to a correct path. Depending on the project configuration, the path can be different for you than the example snippet (e.g. `lib/typescript/index.d.ts` if you have only the `src` directory and `rootDir` is not set).
 
 1. Add the output directory to `.gitignore` and `.eslintignore`
@@ -168,7 +166,7 @@ In addition, the following options are supported:
 
 Setting this option to `true` will output ES modules compatible code for Node.js 12+, modern browsers and other tools that support `package.json`'s `exports` field.
 
-This mainly adds file extensions to the imports and exports. Note that file extensions are not added when importing a file that may have platform-specific extensions (e.g. `.android.ts`) to avoid breaking tools. In addition, the generated files will have `.cjs` (CommonJS) and `.mjs` (ES modules) extensions instead of `.js` - this is necessary to disambiguate between the two formats.
+This mainly adds file extensions to the imports and exports. Note that file extensions are not added when importing a file that may have platform-specific extensions (e.g. `.android.ts`) to avoid breaking tools.
 
 If you use TypeScript, also make sure to set `"moduleResolution": "Bundler"` in your `tsconfig.json` file.
 

packages/create-react-native-library/templates/common/$package.json

@@ -3,14 +3,14 @@
   "version": "0.1.0",
   "description": "<%- project.description %>",
   "source": "./src/index.tsx",
-  "main": "./lib/commonjs/index.cjs",
-  "module": "./lib/module/index.mjs",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
       "types": "./lib/typescript/src/index.d.ts",
-      "import": "./lib/module/index.mjs",
-      "require": "./lib/commonjs/index.cjs"
+      "import": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js"
     }
   },
   "files": [

packages/react-native-builder-bob/babel-preset.js

@@ -47,7 +47,7 @@ module.exports = function (api, options, cwd) {
       [
         require.resolve('./lib/babel'),
         {
-          extension: options.esm ? (cjs ? 'cjs' : 'mjs') : undefined,
+          extension: options.esm ? 'js' : undefined,
         },
       ],
     ],

packages/react-native-builder-bob/src/babel.ts

@@ -14,7 +14,7 @@ type Options = {
    * NodeJS requires explicit extension for esm
    * The `cjs` extension avoids disambiguity when package.json has "type": "module"
    */
-  extension?: 'cjs' | 'mjs';
+  extension?: 'js' | 'cjs' | 'mjs';
   /**
    * Out of tree platforms to support
    * For `import './file'`, we skip adding extension if `file.${platform}.ts` exists

packages/react-native-builder-bob/src/index.ts

@@ -159,10 +159,10 @@ yargs
       esm = true;
 
       if (targets.includes('commonjs')) {
-        entries.main = `./${path.join(output, 'commonjs', 'index.cjs')}`;
+        entries.main = `./${path.join(output, 'commonjs', 'index.js')}`;
       }
 
-      entries.module = `./${path.join(output, 'module', 'index.mjs')}`;
+      entries.module = `./${path.join(output, 'module', 'index.js')}`;
     } else if (targets.includes('commonjs')) {
       entries.main = `./${path.join(output, 'commonjs', 'index.js')}`;
     } else {

packages/react-native-builder-bob/src/utils/compile.ts

@@ -65,11 +65,15 @@ export default async function compile({
     }
   }
 
-  const outputExtension = esm
-    ? modules === 'commonjs'
-      ? '.cjs'
-      : '.mjs'
-    : '.js';
+  await fs.mkdirp(output);
+
+  if (esm) {
+    await fs.writeJSON(path.join(output, 'package.json'), {
+      type: modules === 'commonjs' ? 'commonjs' : 'module',
+    });
+  }
+
+  const outputExtension = '.js';
 
   await Promise.all(
     files.map(async (filepath) => {