Export proper dom versions (#12132)

docs/upgrading/v6.md

@@ -277,23 +277,40 @@ Now that your app is caught up, you can simply update to v7 (theoretically!) wit
 npm install react-router-dom@7
 ```
 
-Your app should continue to work but you'll get console warnings for importing from "react-router-dom". In v7 you can import everything directly from `"react-router"`.
+Your app should continue to work but we've restructured in v7 so that you can import directly from `"react-router"` — we'll do that in the next step.
 
 _Note: If you have issues with the above command, you may need to use the full `7.0.0-pre.N` version number because package managers may not always resolve `@7` to a prerelease since there is no stable 7.x release yet._
 
 👉 **Uninstall react-router-dom, install react-router**
 
+In v7 we've also combined the `react-router` and `react-router-dom` packages and you can import everything directly from `"react-router"` (with one exception - see below):
+
 ```shellscript nonumber
 npm uninstall react-router-dom
 npm install react-router
 ```
 
 👉 **Update imports**
 
+Now you can update you imports to come from `react-router`:
+
+```diff
+-import { useLocation } from "react-router-dom";
++import { useLocation } from "react-router";
+```
+
+The one exception to this rule is for exports that specifically require `react-dom` — namely `RouterProvider` and `HydratedRouter` which use [`ReactDOM.flushSync`][react-flushsync] internally. These need to come from a separate `package.json` export to avoid peer dependency issues in non-browser apps that don't install `react-dom`. If you're writing a browser-based app, you will want to those from `react-router/dom`:
+
+```js
+import { RouterProvider } from "react-router/dom";
+```
+
 Instead of manually updating imports, you can use this command. Make sure your git working tree is clean though so you can revert if it doesn't work as expected.
 
 ```shellscript nonumber
 find ./path/to/src \( -name "*.tsx" -o -name "*.ts" -o -name "*.js" -o -name "*.jsx" \) -type f -exec sed -i '' 's|from "react-router-dom"|from "react-router"|g' {} +
 ```
 
 Congratulations, you're now on v7!
+
+[react-flushsync]: https://react.dev/reference/react-dom/flushSync

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

@@ -10,6 +10,7 @@ const {
   getBuildDirectories,
   createBanner,
   WATCH,
+  remixBabelConfig,
 } = require("../../rollup.utils");
 const { name: packageName, version } = require("./package.json");
 
@@ -23,9 +24,7 @@ module.exports = function rollup() {
 
   return [
     {
-      external(id) {
-        return isBareModuleId(id);
-      },
+      external: (id) => isBareModuleId(id),
       input: `${SOURCE_DIR}/index.ts`,
       output: {
         banner: createBanner(packageName, version),
@@ -39,11 +38,13 @@ module.exports = function rollup() {
           babelHelpers: "bundled",
           exclude: /node_modules/,
           extensions: [".ts"],
+          ...remixBabelConfig,
         }),
         typescript({
           tsconfig: path.join(__dirname, "tsconfig.json"),
           exclude: ["__tests__"],
           noEmitOnError: !WATCH,
+          noForceEmit: true,
         }),
         nodeResolve({ extensions: [".ts"] }),
         copy({

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

@@ -24,9 +24,7 @@ module.exports = function rollup() {
 
   return [
     {
-      external(id) {
-        return isBareModuleId(id);
-      },
+      external: (id) => isBareModuleId(id),
       input: `${SOURCE_DIR}/index.ts`,
       output: {
         banner: createBanner(packageName, version),
@@ -45,6 +43,7 @@ module.exports = function rollup() {
         typescript({
           tsconfig: path.join(__dirname, "tsconfig.json"),
           noEmitOnError: !WATCH,
+          noForceEmit: true,
         }),
         nodeResolve({ extensions: [".ts"] }),
         copy({

packages/react-router-dom/index.ts

@@ -1,2 +1,9 @@
+import type { RouterProviderProps } from "react-router/dom";
+import { HydratedRouter, RouterProvider } from "react-router/dom";
+
+// TODO: Confirm if this causes tree-shaking issues and if so, convert to named exports
 export type * from "react-router";
 export * from "react-router";
+
+export type { RouterProviderProps };
+export { HydratedRouter, RouterProvider };

packages/react-router-dom/tsconfig.json

@@ -3,8 +3,8 @@
   "compilerOptions": {
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "target": "ES2020",
-    "module": "ES2020",
-    "moduleResolution": "node",
+    "module": "Node16",
+    "moduleResolution": "Node16",
 
     "strict": true,
     "jsx": "react",

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

@@ -43,6 +43,7 @@ module.exports = function rollup() {
           tsconfig: path.join(__dirname, "tsconfig.json"),
           exclude: ["__tests__"],
           noEmitOnError: !WATCH,
+          noForceEmit: true,
         }),
         nodeResolve({ extensions: [".ts", ".tsx"] }),
         copy({

packages/react-router-fs-routes/rollup.config.js

@@ -9,6 +9,7 @@ const {
   createBanner,
   getBuildDirectories,
   WATCH,
+  remixBabelConfig,
 } = require("../../rollup.utils");
 const { name, version } = require("./package.json");
 
@@ -36,11 +37,13 @@ module.exports = function rollup() {
           babelHelpers: "bundled",
           exclude: /node_modules/,
           extensions: [".ts"],
+          ...remixBabelConfig,
         }),
         typescript({
           tsconfig: path.join(__dirname, "tsconfig.json"),
           exclude: ["__tests__"],
           noEmitOnError: !WATCH,
+          noForceEmit: true,
         }),
         nodeResolve({ extensions: [".ts"] }),
         copy({

packages/react-router-node/package.json

@@ -16,13 +16,11 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "default": "./dist/index.js"
     },
     "./install": {
       "types": "./dist/install.d.ts",
-      "import": "./dist/install.mjs",
-      "require": "./dist/install.js"
+      "default": "./dist/install.js"
     },
     "./package.json": "./package.json"
   },

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

@@ -30,8 +30,7 @@ module.exports = function rollup() {
       output: {
         banner: createBanner(name, version),
         dir: OUTPUT_DIR,
-        entryFileNames: "[name].mjs",
-        format: "esm",
+        format: "cjs",
         preserveModules: true,
         exports: "named",
       },
@@ -46,32 +45,13 @@ module.exports = function rollup() {
           tsconfig: path.join(__dirname, "tsconfig.json"),
           exclude: ["__tests__"],
           noEmitOnError: !WATCH,
+          noForceEmit: true,
         }),
         nodeResolve({ extensions: [".ts", ".tsx"] }),
         copy({
           targets: [{ src: "LICENSE.md", dest: SOURCE_DIR }],
         }),
       ],
     },
-    {
-      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"] }),
-      ],
-    },
   ];
 };

packages/react-router-node/tsconfig.json

@@ -4,9 +4,8 @@
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "target": "ES2022",
-    "module": "ES2022",
-
-    "moduleResolution": "Bundler",
+    "module": "Node16",
+    "moduleResolution": "Node16",
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "jsx": "react",

packages/react-router-remix-config-routes-adapter/rollup.config.js

@@ -9,6 +9,7 @@ const {
   createBanner,
   getBuildDirectories,
   WATCH,
+  remixBabelConfig,
 } = require("../../rollup.utils");
 const { name, version } = require("./package.json");
 
@@ -36,11 +37,13 @@ module.exports = function rollup() {
           babelHelpers: "bundled",
           exclude: /node_modules/,
           extensions: [".ts"],
+          ...remixBabelConfig,
         }),
         typescript({
           tsconfig: path.join(__dirname, "tsconfig.json"),
           exclude: ["__tests__"],
           noEmitOnError: !WATCH,
+          noForceEmit: true,
         }),
         nodeResolve({ extensions: [".ts"] }),
         copy({

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

@@ -42,6 +42,7 @@ module.exports = function rollup() {
           tsconfig: path.join(__dirname, "tsconfig.json"),
           exclude: ["__tests__"],
           noEmitOnError: !WATCH,
+          noForceEmit: true,
         }),
         nodeResolve({ extensions: [".ts"] }),
         copy({

packages/react-router/rollup.config.js

@@ -53,6 +53,7 @@ module.exports = function rollup() {
           tsconfig: path.join(__dirname, "tsconfig.json"),
           exclude: ["__tests__"],
           noEmitOnError: !WATCH,
+          noForceEmit: true,
         }),
         copy({
           targets: [{ src: "LICENSE.md", dest: SOURCE_DIR }],
@@ -90,6 +91,7 @@ module.exports = function rollup() {
           // eslint-disable-next-line no-restricted-globals
           tsconfig: path.join(__dirname, "tsconfig.dom.json"),
           noEmitOnError: !WATCH,
+          noForceEmit: true,
         }),
       ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
     },
@@ -121,6 +123,7 @@ module.exports = function rollup() {
           // eslint-disable-next-line no-restricted-globals
           tsconfig: path.join(__dirname, "tsconfig.dom.json"),
           noEmitOnError: !WATCH,
+          noForceEmit: true,
         }),
       ],
     },

packages/react-router/tsconfig.json

@@ -4,8 +4,8 @@
   "compilerOptions": {
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "target": "ES2020",
-    "module": "ES2020",
-    "moduleResolution": "node",
+    "module": "Node16",
+    "moduleResolution": "Node16",
 
     "strict": true,
     "jsx": "react",

rollup.config.js

@@ -4,13 +4,13 @@ const path = require("path");
 module.exports = function rollup(options) {
   return [
     "react-router",
+    "react-router-dom", // depends on react-router
+    "react-router-node", // depends on react-router
+    "react-router-express", // depends on react-router-node
+    "react-router-serve", // depends on react-router-node/express
+    "react-router-dev", // depends on react-router-node/express/serve
     "react-router-architect",
     "react-router-cloudflare",
-    "react-router-dom",
-    "react-router-dev",
-    "react-router-express",
-    "react-router-node",
-    "react-router-serve",
     "react-router-fs-routes",
     "react-router-remix-config-routes-adapter",
   ]

rollup.utils.js

@@ -150,15 +150,6 @@ const remixBabelConfig = {
   plugins: [
     "@babel/plugin-proposal-export-namespace-from",
     "@babel/plugin-proposal-optional-chaining",
-    // Strip console.debug calls unless REACT_ROUTER_DEBUG=true
-    ...(process.env.REACT_ROUTER_DEBUG === "true"
-      ? []
-      : [
-          [
-            "transform-remove-console",
-            { exclude: ["error", "warn", "log", "info"] },
-          ],
-        ]),
   ],
 };