From f54a03f152f3d47edad3c7134a661bd1b0274e83 Mon Sep 17 00:00:00 2001
From: Rafael Hengles <rhengles@gmail.com>
Date: Wed, 8 Mar 2023 17:51:15 -0300
Subject: [PATCH] fix: Add export maps and .mjs to node ES modules (fixes
 #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] https://github.com/preactjs/preact/issues/3220#issuecomment-1038467450
[2] https://github.com/vitest-dev/vitest/issues/747#issuecomment-1038912672
---
 .changeset/brave-humans-invite.md          |  6 ++++++
 packages/react-router-dom/package.json     |  9 +++++++++
 packages/react-router-dom/rollup.config.js |  2 +-
 packages/react-router/package.json         | 11 ++++++++++-
 packages/react-router/rollup.config.js     |  2 +-
 5 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/brave-humans-invite.md

diff --git a/.changeset/brave-humans-invite.md b/.changeset/brave-humans-invite.md
new file mode 100644
index 0000000000..5934ea64f0
--- /dev/null
+++ b/.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
diff --git a/packages/react-router-dom/package.json b/packages/react-router-dom/package.json
index defc0bed4d..f646bf98a9 100644
--- a/packages/react-router-dom/package.json
+++ b/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"
diff --git a/packages/react-router-dom/rollup.config.js b/packages/react-router-dom/rollup.config.js
index 0a816d13a2..356e328a1b 100644
--- a/packages/react-router-dom/rollup.config.js
+++ b/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),
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 1ad9a07bae..ef5d948ef5 100644
--- a/packages/react-router/package.json
+++ b/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"
   },
diff --git a/packages/react-router/rollup.config.js b/packages/react-router/rollup.config.js
index ff9d98a671..c2d6b30630 100644
--- a/packages/react-router/rollup.config.js
+++ b/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),