🏗️ build(esm): Use explicit .mjs extension for ESM (#7244)

This ensures that Node always treats the ESM output as ESM, despite the package.json (implicit) type of commonjs. Bundlers that expect ESM, such as Next v12, no longer explode when encountering this module.

Refs #7095
Refs #7088
Refs react-hook-form/resolvers#271
Refs vercel/next.js#30750

package.json

@@ -3,11 +3,11 @@
   "description": "Performant, flexible and extensible forms library for React Hooks",
   "version": "7.21.0",
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.esm.mjs",
   "umd:main": "dist/index.umd.js",
   "unpkg": "dist/index.umd.js",
   "jsdelivr": "dist/index.umd.js",
-  "jsnext:main": "dist/index.esm.js",
+  "jsnext:main": "dist/index.esm.mjs",
   "source": "src/index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": true,
@@ -18,15 +18,15 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "import": "./dist/index.esm.js",
+      "import": "./dist/index.esm.mjs",
       "require": "./dist/index.cjs.js"
     }
   },
   "scripts": {
     "clean": "rimraf dist",
     "prebuild": "yarn clean",
     "build": "yarn build:modern",
-    "postbuild": "rimraf dist/__tests__",
+    "postbuild": "rimraf dist/__tests__; node ./scripts/rollup/assert-esm-exports.mjs",
     "build:modern": "rollup -c ./scripts/rollup/rollup.config.js",
     "build:esm": "rollup -c ./scripts/rollup/rollup.esm.config.js",
     "prettier:fix": "prettier --config .prettierrc --write \"**/*.{ts,tsx}\"",
@@ -135,6 +135,6 @@
     "url": "https://opencollective.com/react-hook-form"
   },
   "engines": {
-    "node": ">=12.0"
+    "node": ">=12.22.0"
   }
 }

scripts/rollup/assert-esm-exports.mjs

@@ -0,0 +1,27 @@
+/**
+ * This file, when executed in the postbuild lifecycle, ensures that
+ * the ESM output is valid ESM according to the package.json spec.
+ *
+ * @see https://nodejs.org/docs/latest/api/packages.html#packages_determining_module_system
+ */
+import * as exported from 'react-hook-form';
+import assert from 'assert';
+
+/**
+ * A shell one-liner to update this array when neccessary:
+ *
+ *  node -e "import('react-hook-form').then((mod) => console.dir(Object.keys(mod)))"
+ */
+assert.deepStrictEqual(Object.keys(exported), [
+  'Controller',
+  'FormProvider',
+  'appendErrors',
+  'get',
+  'set',
+  'useController',
+  'useFieldArray',
+  'useForm',
+  'useFormContext',
+  'useFormState',
+  'useWatch',
+]);

scripts/rollup/createRollupConfig.js

@@ -6,7 +6,10 @@ import typescript from 'rollup-plugin-typescript2';
 
 export function createRollupConfig(options, callback) {
   const name = options.name;
-  const outputName = 'dist/' + [name, options.format, 'js'].join('.');
+  // A file with the extension ".mjs" will always be treated as ESM, even when pkg.type is "commonjs" (the default)
+  // https://nodejs.org/docs/latest/api/packages.html#packages_determining_module_system
+  const extName = options.format === 'esm' ? 'mjs' : 'js';
+  const outputName = 'dist/' + [name, options.format, extName].join('.');
 
   const config = {
     input: options.input,