fix: Add export maps and .mjs to node ES modules (fixes remix-run#10172)

This fixes an issue with Preact + Vite + SSR. Without the export maps, Vite SSR and Node.js
gets confused and loads both the ESM and CJS versions of Preact. This breaks the hooks system
of Preact as discussed here[1] and here[2].

During SSR, Vite starts as ESM and loads my modules (and Preact). But when I load React-Router,
as it does not have the exports map, Node loads the CJS version, which loads the CJS version of
Preact. Then Preact breaks because it can't find the hooks registered in the ESM code.

Also, in the version of Node that I tested, v16.14.0, Node printed the warning below, so I also
changed the extension of the ES module for node from ".js" to ".mjs".

(node:5753) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

[1] preactjs/preact#3220 (comment)
[2] vitest-dev/vitest#747 (comment)

Author: rhengles

.changeset/brave-humans-invite.md

@@ -0,0 +1,6 @@
+---
+"react-router": patch
+"react-router-dom": patch
+---
+
+Added export maps to package.json and .mjs extension for Node ES modules

contributors.yml

@@ -144,6 +144,7 @@
 - petersendidit
 - promet99
 - pyitphyoaung
+- rhengles
 - RobHannay
 - rtmann
 - rubeonline

packages/react-router-dom/package.json

@@ -22,6 +22,15 @@
   "unpkg": "./dist/umd/react-router-dom.production.min.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "browser": "./dist/react-router-dom.production.min.js",
+      "umd": "./ddist/umd/react-router.production.min.js",
+      "import": "./dist/index.mjs",
+      "require": "./dist/main.js"
+    }
+  },
   "dependencies": {
     "@remix-run/router": "1.3.3",
     "react-router": "6.8.2"

packages/react-router-dom/rollup.config.js

@@ -21,7 +21,7 @@ module.exports = function rollup() {
     {
       input: `${SOURCE_DIR}/index.tsx`,
       output: {
-        file: `${OUTPUT_DIR}/index.js`,
+        file: `${OUTPUT_DIR}/index.mjs`,
         format: "esm",
         sourcemap: !PRETTY,
         banner: createBanner("React Router DOM", version),

packages/react-router/package.json

@@ -20,8 +20,17 @@
   "sideEffects": false,
   "main": "./dist/main.js",
   "unpkg": "./dist/umd/react-router.production.min.js",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "browser": "./dist/react-router.production.min.js",
+      "umd": "./ddist/umd/react-router.production.min.js",
+      "import": "./dist/index.mjs",
+      "require": "./dist/main.js"
+    }
+  },
   "dependencies": {
     "@remix-run/router": "1.3.3"
   },

packages/react-router/rollup.config.js

@@ -21,7 +21,7 @@ module.exports = function rollup() {
     {
       input: `${SOURCE_DIR}/index.ts`,
       output: {
-        file: `${OUTPUT_DIR}/index.js`,
+        file: `${OUTPUT_DIR}/index.mjs`,
         format: "esm",
         sourcemap: !PRETTY,
         banner: createBanner("React Router", version),