Add exports field to all packages (#11675)

Author: markdalgleish

.changeset/nice-pillows-hunt.md

@@ -0,0 +1,10 @@
+---
+"@react-router/express": major
+"@react-router/serve": major
+"@react-router/node": major
+"@react-router/dev": major
+"react-router-dom": major
+"react-router": major
+---
+
+Add `exports` field to all packages

packages/react-router-dev/package.json

@@ -14,6 +14,13 @@
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "bin": {
     "react-router": "bin.js"
   },

packages/react-router-dom/package.json

@@ -20,8 +20,16 @@
   "sideEffects": false,
   "main": "./dist/main.js",
   "unpkg": "./dist/umd/react-router-dom.production.min.js",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/main.js"
+    },
+    "./package.json": "./package.json"
+  },
   "dependencies": {
     "react-router": "workspace:*"
   },

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

@@ -23,7 +23,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 DOM", version),

packages/react-router-express/package.json

@@ -13,6 +13,13 @@
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "tsc": "tsc"
   },

packages/react-router-node/install.d.ts

@@ -0,0 +1,3 @@
+import { installGlobals } from "./globals";
+
+installGlobals();

packages/react-router-node/install.js

@@ -13,8 +13,22 @@
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./install": {
+      "types": "./dist/install.d.ts",
+      "import": "./dist/install.mjs",
+      "require": "./dist/install.js"
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": [
-    "./install.js"
+    "./dist/install.js",
+    "./dist/install.mjs"
   ],
   "scripts": {
     "tsc": "tsc"

packages/react-router-node/install.ts

@@ -21,14 +21,17 @@ module.exports = function rollup() {
     "react-router-node"
   );
 
+  const input = [`${SOURCE_DIR}/index.ts`, `${SOURCE_DIR}/install.ts`];
+
   return [
     {
+      input,
       external: (id) => isBareModuleId(id),
-      input: `${SOURCE_DIR}/index.ts`,
       output: {
         banner: createBanner(name, version),
         dir: OUTPUT_DIR,
-        format: "cjs",
+        entryFileNames: "[name].mjs",
+        format: "esm",
         preserveModules: true,
         exports: "named",
       },
@@ -50,5 +53,25 @@ module.exports = function rollup() {
         }),
       ],
     },
+    {
+      input,
+      external: (id) => isBareModuleId(id),
+      output: {
+        banner: createBanner(name, version),
+        dir: OUTPUT_DIR,
+        format: "cjs",
+        preserveModules: true,
+        exports: "named",
+      },
+      plugins: [
+        babel({
+          babelHelpers: "bundled",
+          exclude: /node_modules/,
+          extensions: [".ts", ".tsx"],
+          ...remixBabelConfig,
+        }),
+        nodeResolve({ extensions: [".ts", ".tsx"] }),
+      ],
+    },
   ];
 };