Throw when using 2 different builds in dev

Fixes #6361

Author: mjackson

packages/react-router-dom/.size-snapshot.json

@@ -14,9 +14,9 @@
     }
   },
   "umd/react-router-dom.js": {
-    "bundled": 161325,
-    "minified": 57478,
-    "gzipped": 16483
+    "bundled": 162042,
+    "minified": 57823,
+    "gzipped": 16684
   },
   "umd/react-router-dom.min.js": {
     "bundled": 97926,

packages/react-router/.size-snapshot.json

@@ -1,8 +1,8 @@
 {
   "esm/react-router.js": {
-    "bundled": 22391,
-    "minified": 12617,
-    "gzipped": 3438,
+    "bundled": 23114,
+    "minified": 13111,
+    "gzipped": 3670,
     "treeshaked": {
       "rollup": {
         "code": 2267,
@@ -14,9 +14,9 @@
     }
   },
   "umd/react-router.js": {
-    "bundled": 101474,
-    "minified": 35902,
-    "gzipped": 11344
+    "bundled": 102208,
+    "minified": 36247,
+    "gzipped": 11540
   },
   "umd/react-router.min.js": {
     "bundled": 63839,

packages/react-router/modules/index.js

@@ -1,3 +1,24 @@
+if (__DEV__) {
+  const global = (1, eval)("this");
+  const key = "__react_router_build__";
+  const buildNames = { cjs: "CommonJS", esm: "ES modules", umd: "UMD" };
+
+  if (global[key] && global[key] !== process.env.BUILD_FORMAT) {
+    const initialBuildName = buildNames[global[key]];
+    const secondaryBuildName = buildNames[process.env.BUILD_FORMAT];
+
+    // TODO: Add link to article that explains in detail how to avoid
+    // loading 2 different builds.
+    throw new Error(
+      `You are loading the ${secondaryBuildName} build of React Router ` +
+        `on a page that is already running the ${initialBuildName} ` +
+        `build, so things won't work right.`
+    );
+  }
+
+  global[key] = process.env.BUILD_FORMAT;
+}
+
 export { default as MemoryRouter } from "./MemoryRouter";
 export { default as Prompt } from "./Prompt";
 export { default as Redirect } from "./Redirect";

packages/react-router/rollup.config.js

@@ -18,7 +18,10 @@ const cjs = [
     external: isBareModuleId,
     plugins: [
       babel({ exclude: /node_modules/ }),
-      replace({ "process.env.NODE_ENV": JSON.stringify("development") })
+      replace({
+        "process.env.NODE_ENV": JSON.stringify("development"),
+        "process.env.BUILD_FORMAT": JSON.stringify("cjs")
+      })
     ]
   },
   {
@@ -27,7 +30,10 @@ const cjs = [
     external: isBareModuleId,
     plugins: [
       babel({ exclude: /node_modules/ }),
-      replace({ "process.env.NODE_ENV": JSON.stringify("production") }),
+      replace({
+        "process.env.NODE_ENV": JSON.stringify("production"),
+        "process.env.BUILD_FORMAT": JSON.stringify("cjs")
+      }),
       uglify()
     ]
   }
@@ -44,6 +50,7 @@ const esm = [
         runtimeHelpers: true,
         plugins: [["@babel/transform-runtime", { useESModules: true }]]
       }),
+      replace({ "process.env.BUILD_FORMAT": JSON.stringify("esm") }),
       sizeSnapshot()
     ]
   }
@@ -74,7 +81,10 @@ const umd = [
           "node_modules/react-is/index.js": ["isValidElementType"]
         }
       }),
-      replace({ "process.env.NODE_ENV": JSON.stringify("development") }),
+      replace({
+        "process.env.NODE_ENV": JSON.stringify("development"),
+        "process.env.BUILD_FORMAT": JSON.stringify("umd")
+      }),
       sizeSnapshot()
     ]
   },
@@ -100,7 +110,10 @@ const umd = [
           "node_modules/react-is/index.js": ["isValidElementType"]
         }
       }),
-      replace({ "process.env.NODE_ENV": JSON.stringify("production") }),
+      replace({
+        "process.env.NODE_ENV": JSON.stringify("production"),
+        "process.env.BUILD_FORMAT": JSON.stringify("umd")
+      }),
       sizeSnapshot(),
       uglify()
     ]