refactor: drop commonjs build from default setup (#800)

There's a possibility of [dual package
hazard](https://nodejs.org/docs/latest-v19.x/api/packages.html#dual-package-hazard)
with the current setup. Metro enables `exports` support from
[0.82.0](https://github.com/facebook/metro/releases/tag/v0.82.0), so
this can become a problem for some packages.

So this drops the dual package setup in favor of an ESM-only setup. To
make a similar change in your package, apply the following change to
your entrypoints:

```diff
-  "main": "./lib/commonjs/index.js",
+  "main": "./lib/module/index.js",a
-  "types": "./lib/typescript/commonjs/src/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./lib/typescript/module/src/index.d.ts",
-        "default": "./lib/module/index.js"
-      },
-      "require": {
-        "types": "./lib/typescript/commonjs/src/index.d.ts",
-        "default": "./lib/commonjs/index.js"
-      }
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
     }
   },
```

Also, remove the `commonjs` target from the `react-native-builder-bob`
field in your `package.json` or `bob.config.js` or `bob.config.mjs`:

```diff
"react-native-builder-bob": {
  "source": "src",
  "output": "lib",
  "targets": [
    ["module", { "esm": true }],
-   ["commonjs", { "esm": true }]
    "typescript",
  ]
}
```

With this change, [Jest](https://jestjs.io/) will break for the
consumers of your libraries due to the usage of ESM syntax. So they may
need to update their Jest configuration to transform your library:

```js
module.exports = {
  preset: 'react-native',
+ transform: {
+   'node_modules/(your-library|another-library)': 'babel-jest',
+ },
};
```

If consumers of your library are using it in NodeJS in a CommonJS
environment, they'll need to use at least NodeJS v20.19.0 to be able to
synchronously `require` your library.

You can read more at our [ESM support
docs](https://callstack.github.io/react-native-builder-bob/esm#dual-package-setup).

Author: satya164

docs/pages/build.md

@@ -78,18 +78,11 @@ To configure your project manually, follow these steps:
 
    ```json
    "source": "./src/index.tsx",
-   "main": "./lib/commonjs/index.js",
-   "module": "./lib/module/index.js",
+   "main": "./lib/module/index.js",
    "exports": {
      ".": {
-       "import": {
-         "types": "./lib/typescript/module/src/index.d.ts",
-         "default": "./lib/module/index.js"
-       },
-       "require": {
-         "types": "./lib/typescript/commonjs/src/index.d.ts",
-         "default": "./lib/commonjs/index.js"
-       }
+        "types": "./lib/typescript/src/index.d.ts",
+        "default": "./lib/module/index.js"
      },
      "./package.json": "./package.json"
    },
@@ -248,7 +241,7 @@ Example:
 
 Enable compiling source files with Babel and use CommonJS module system. This is essentially the same as the `module` target and accepts the same options, but transforms the `import`/`export` statements in your code to `require`/`module.exports`.
 
-This is useful for supporting usage of this module with `require` in Node versions older than 20 (it can still be used with `import` for Node.js 12+ if `module` target with `esm` is enabled), and some tools such a [Jest](https://jestjs.io). The output file should be referenced in the `main` field. If you have a dual module setup with both ESM and CommonJS builds, it needs to be specified in `exports['.'].require` field of `package.json`.
+This is useful for supporting usage of this module with `require` in Node versions older than 20 (it can still be used with `import` for Node.js 12+ if `module` target with `esm` is enabled), and some tools such as [Jest](https://jestjs.io). The output file should be referenced in the `main` field. If you have a [dual package setup](esm.md#dual-package-setup) with both ESM and CommonJS builds, it needs to be specified in `exports['.'].require` field of `package.json`.
 
 Example:
 

docs/pages/esm.md

@@ -35,34 +35,22 @@ Specifying `"moduleResolution": "bundler"` means that you don't need to use file
 To make use of the output files, ensure that your `package.json` file contains the following fields:
 
 ```json
-"main": "./lib/commonjs/index.js",
-"module": "./lib/module/index.js",
+"main": "./lib/module/index.js",
 "exports": {
   ".": {
-    "import": {
-      "types": "./lib/typescript/module/src/index.d.ts",
-      "default": "./lib/module/index.js"
-    },
-    "require": {
-      "types": "./lib/typescript/commonjs/src/index.d.ts",
-      "default": "./lib/commonjs/index.js"
-    }
+    "types": "./lib/typescript/src/index.d.ts",
+    "default": "./lib/module/index.js"
   },
   "./package.json": "./package.json"
 },
 ```
 
-The `main` field is for tools that don't support the `exports` field (e.g. [Jest](https://jestjs.io)). The `module` field is a non-standard field that some tools use to determine the ESM entry point.
+The `main` field is for tools that don't support the `exports` field (e.g. [Metro](https://metrobundler.dev) < 0.82.0).
 
 The `exports` field is used by Node.js 12+, modern browsers and tools to determine the correct entry point. The entrypoint is specified in the `.` key and will be used when the library is imported or required directly (e.g. `import 'my-library'` or `require('my-library')`).
 
 Here, we specify 2 conditions:
 
-- `import`: Used when the library is imported with an `import` statement or a dynamic `import()`. It should point to the ESM build.
-- `require`: Used when the library is required with a `require` call. It should point to the CommonJS build.
-
-Each condition has 2 fields:
-
 - `types`: Used for the TypeScript definitions.
 - `default`: Used for the actual JS code when the library is imported or required.
 
@@ -72,6 +60,76 @@ The `./package.json` field is used to point to the library's `package.json` file
 
 > Note: Metro enables support for `package.json` exports by default from version [0.82.0](https://github.com/facebook/metro/releases/tag/v0.82.0). In previous versions, experimental support can be enabled by setting the `unstable_enablePackageExports` option to `true` in the [Metro configuration](https://metrobundler.dev/docs/configuration/). If this is not enabled, Metro will use the entrypoint specified in the `main` field.
 
+## Dual package setup
+
+The previously mentioned setup only works with tools that support ES modules. If you want to support tools that don't support ESM and use the CommonJS module system, you can set up a dual package setup.
+
+A dual package setup means that you have 2 builds of your library: one for ESM and one for CommonJS. The ESM build is used by tools that support ES modules, while the CommonJS build is used by tools that don't support ES modules.
+
+To configure a dual package setup, you can follow these steps:
+
+1. Add the `commonjs` target to the `react-native-builder-bob` field in your `package.json` or `bob.config.js`:
+
+   ```diff
+   "react-native-builder-bob": {
+     "source": "src",
+     "output": "lib",
+     "targets": [
+       ["module", { "esm": true }],
+   +   ["commonjs", { "esm": true }]
+       "typescript",
+     ]
+   }
+   ```
+
+2. Optionally change the `main` field in your `package.json` to point to the CommonJS build:
+
+   ```diff
+   - "main": "./lib/module/index.js",
+   + "main": "./lib/commonjs/index.js",
+   ```
+
+   This is needed if you want to support tools that don't support the `exports` field and need to use the CommonJS build.
+
+3. Optionally add a `module` field in your `package.json` to point to the ESM build:
+
+   ```diff
+     "main": "./lib/commonjs/index.js",
+   + "module": "./lib/module/index.js",
+   ```
+
+   The `module` field is a non-standard field that some tools use to determine the ESM entry point.
+
+4. Change the `exports` field in your `package.json` to include 2 conditions:
+
+   ```diff
+   "exports": {
+     ".": {
+   -   "types": "./lib/typescript/src/index.d.ts",
+   -   "default": "./lib/module/index.js"
+   +   "import": {
+   +     "types": "./lib/typescript/module/src/index.d.ts",
+   +     "default": "./lib/module/index.js"
+   +   },
+   +   "require": {
+   +     "types": "./lib/typescript/commonjs/src/index.d.ts",
+   +     "default": "./lib/commonjs/index.js"
+   +   }
+     }
+   },
+   ```
+
+   Here, we specify 2 conditions:
+
+   - `import`: Used when the library is imported with an `import` statement or a dynamic `import()`. It will point to the ESM build.
+   - `require`: Used when the library is required with a `require` call. It will point to the CommonJS build.
+
+   Each condition has a `types` field - necessary for TypeScript to provide the appropriate definitions for the module system. The type definitions have slightly different semantics for CommonJS and ESM, so it's important to specify them separately.
+
+   The `default` field is the fallback entry point for both conditions. It's used for the actual JS code when the library is imported or required.
+
+> **Important:** With this approach, the ESM and CommonJS versions of the package are treated as separate modules by Node.js as they are different files, leading to [potential issues](https://nodejs.org/docs/latest-v19.x/api/packages.html#dual-package-hazard) if the package is both imported and required in the same runtime environment. If the package relies on any state that can cause issues if 2 separate instances are loaded, it's necessary to isolate the state into a separate CommonJS module that can be shared between the ESM and CommonJS builds.
+
 ## Guidelines
 
 There are still a few things to keep in mind if you want your library to be ESM-compatible:
@@ -100,7 +158,19 @@ There are still a few things to keep in mind if you want your library to be ESM-
 
 - Avoid using `.cjs`, `.mjs`, `.cts` or `.mts` extensions. Metro always requires file extensions in import statements when using `.cjs` or `.mjs` which breaks platform-specific extension resolution.
 - Avoid using `"moduleResolution": "node16"` or `"moduleResolution": "nodenext"` in your `tsconfig.json` file. They require file extensions in import statements which breaks platform-specific extension resolution.
-- If you specify a `react-native` condition in `exports`, make sure that it comes before the `default` condition. The conditions should be ordered from the most specific to the least specific:
+- If you specify a `react-native` condition in `exports`, make sure that it comes before other conditions. The conditions should be ordered from the most specific to the least specific:
+
+  ```json
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "react-native": "./lib/modules/index.native.js",
+      "default": "./lib/module/index.js"
+    }
+  }
+  ```
+
+  Or for a dual package setup:
 
   ```json
   "exports": {

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

@@ -3,18 +3,11 @@
   "version": "0.1.0",
   "description": "<%- project.description %>",
   "source": "./src/index.tsx",
-  "main": "./lib/commonjs/index.js",
-  "module": "./lib/module/index.js",
+  "main": "./lib/module/index.js",
   "exports": {
     ".": {
-      "import": {
-        "types": "./lib/typescript/module/src/index.d.ts",
-        "default": "./lib/module/index.js"
-      },
-      "require": {
-        "types": "./lib/typescript/commonjs/src/index.d.ts",
-        "default": "./lib/commonjs/index.js"
-      }
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -186,12 +179,6 @@
           "esm": true
         }
       ],
-      [
-        "commonjs",
-        {
-          "esm": true
-        }
-      ],
       [
         "typescript",
         {

packages/react-native-builder-bob/src/__tests__/__snapshots__/init.test.ts.snap

@@ -9,20 +9,13 @@ exports[`initializes the configuration 1`] = `
   },
   "exports": {
     ".": {
-      "import": {
-        "types": "./lib/typescript/module/src/index.d.ts",
-        "default": "./lib/module/index.js"
-      },
-      "require": {
-        "types": "./lib/typescript/commonjs/src/index.d.ts",
-        "default": "./lib/commonjs/index.js"
-      }
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
     },
     "./package.json": "./package.json"
   },
   "source": "./src/index.ts",
-  "main": "./lib/commonjs/index.js",
-  "module": "./lib/module/index.js",
+  "main": "./lib/module/index.js",
   "scripts": {
     "prepare": "bob build"
   },
@@ -43,12 +36,6 @@ exports[`initializes the configuration 1`] = `
           "esm": true
         }
       ],
-      [
-        "commonjs",
-        {
-          "esm": true
-        }
-      ],
       "typescript"
     ]
   },

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

@@ -101,7 +101,7 @@ export async function init() {
         {
           title: 'commonjs - for legacy setups (Node.js < 20)',
           value: 'commonjs',
-          selected: true,
+          selected: false,
         },
         {
           title: 'typescript - declaration files for typechecking',
@@ -299,14 +299,6 @@ export async function init() {
     entryFields.main = entries.module;
   }
 
-  if (targets.includes('typescript') && !pkg.exports?.['.']) {
-    if (entryFields.main === entries.commonjs) {
-      entryFields.types = types.require;
-    } else {
-      entryFields.types = types.import;
-    }
-  }
-
   for (const key in entryFields) {
     const entry = entryFields[key as keyof typeof entryFields];
 

packages/react-native-builder-bob/src/targets/typescript.ts

@@ -257,12 +257,14 @@ export default async function build({
                 name: "exports['.'].types",
                 value: pkg.exports?.['.']?.types,
                 output: outDir,
-                error: Boolean(esm && variants.commonjs && variants.module),
-                message: `using both ${kleur.blue('commonjs')} and ${kleur.blue(
-                  'module'
-                )} targets with ${kleur.blue(
-                  'esm'
-                )} option enabled. Specify ${kleur.blue(
+                error: Boolean(
+                  pkg.exports?.['.']?.import && pkg.exports?.['.']?.require
+                ),
+                message: `using  ${kleur.blue(
+                  "exports['.'].import"
+                )} and ${kleur.blue(
+                  "exports['.'].require"
+                )}. Specify ${kleur.blue(
                   "exports['.'].import.types"
                 )} and ${kleur.blue("exports['.'].require.types")} instead.`,
               },