From 2b5adba57e526c427cc28739ee30403ca3288d4a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 30 Sep 2021 15:01:28 -0400
Subject: [PATCH] [RFC] Codemod invariant -> throw new Error (#22435)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Hoist error codes import to module scope

When this code was written, the error codes map (`codes.json`) was
created on-the-fly, so we had to lazily require from inside the visitor.

Because `codes.json` is now checked into source, we can import it a
single time in module scope.

* Minify error constructors in production

We use a script to minify our error messages in production. Each message
is assigned an error code, defined in `scripts/error-codes/codes.json`.
Then our build script replaces the messages with a link to our
error decoder page, e.g. https://reactjs.org/docs/error-decoder.html/?invariant=92

This enables us to write helpful error messages without increasing the
bundle size.

Right now, the script only works for `invariant` calls. It does not work
if you throw an Error object. This is an old Facebookism that we don't
really need, other than the fact that our error minification script
relies on it.

So, I've updated the script to minify error constructors, too:

Input:
  Error(`A ${adj} message that contains ${noun}`);
Output:
  Error(formatProdErrorMessage(ERR_CODE, adj, noun));

It only works for constructors that are literally named Error, though we
could add support for other names, too.

As a next step, I will add a lint rule to enforce that errors written
this way must have a corresponding error code.

* Minify "no fallback UI specified" error in prod

This error message wasn't being minified because it doesn't use
invariant. The reason it didn't use invariant is because this particular
error is created without begin thrown — it doesn't need to be thrown
because it's located inside the error handling part of the runtime.

Now that the error minification script supports Error constructors, we
can minify it by assigning it a production error code in
`scripts/error-codes/codes.json`.

To support the use of Error constructors more generally, I will add a
lint rule that enforces each message has a corresponding error code.

* Lint rule to detect unminified errors

Adds a lint rule that detects when an Error constructor is used without
a corresponding production error code.

We already have this for `invariant`, but not for regular errors, i.e.
`throw new Error(msg)`. There's also nothing that enforces the use of
`invariant` besides convention.

There are some packages where we don't care to minify errors. These are
packages that run in environments where bundle size is not a concern,
like react-pg. I added an override in the ESLint config to ignore these.

* Temporarily add invariant codemod script

I'm adding this codemod to the repo temporarily, but I'll revert it
in the same PR. That way we don't have to check it in but it's still
accessible (via the PR) if we need it later.

* [Automated] Codemod invariant -> Error

This commit contains only automated changes:

npx jscodeshift -t scripts/codemod-invariant.js packages --ignore-pattern="node_modules/**/*"
yarn linc --fix
yarn prettier

I will do any manual touch ups in separate commits so they're easier
to review.

* Remove temporary codemod script

This reverts the codemod script and ESLint config I added temporarily
in order to perform the invariant codemod.

* Manual touch ups

A few manual changes I made after the codemod ran.

* Enable error code transform per package

Currently we're not consistent about which packages should have their
errors minified in production and which ones should.

This adds a field to the bundle configuration to control whether to
apply the transform. We should decide what the criteria is going
forward. I think it's probably a good idea to minify any package that
gets sent over the network. So yes to modules that run in the browser,
and no to modules that run on the server and during development only.
---
 .eslintrc.js                                  |  35 ++++
 .../src/createSubscription.js                 |  11 +-
 packages/jest-react/src/JestReact.js          |  12 +-
 packages/react-art/src/ReactARTHostConfig.js  |  34 ++--
 packages/react-cache/src/ReactCacheOld.js     |   2 +
 .../react-client/src/ReactFlightClient.js     |   1 +
 .../src/ReactFlightClientHostConfig.js        |   6 +-
 .../ReactFlightClientHostConfigNoStream.js    |   3 +
 .../react-debug-tools/src/ReactDebugHooks.js  |   3 +-
 packages/react-dom/src/client/ReactDOM.js     |   9 +-
 .../src/client/ReactDOMComponentTree.js       |   3 +-
 .../src/client/ReactDOMEventHandle.js         |  26 +--
 .../react-dom/src/client/ReactDOMInput.js     |  13 +-
 .../react-dom/src/client/ReactDOMLegacy.js    |  42 ++---
 packages/react-dom/src/client/ReactDOMRoot.js |  19 ++-
 .../react-dom/src/client/ReactDOMTextarea.js  |  29 ++--
 .../src/events/ReactDOMControlledComponent.js |  14 +-
 packages/react-dom/src/events/getListener.js  |  14 +-
 .../src/server/ReactDOMLegacyServerBrowser.js |  24 +--
 .../src/server/ReactDOMServerFormatConfig.js  | 149 ++++++++++--------
 ...ctDOMServerLegacyPartialRendererBrowser.js |   7 +-
 .../src/server/ReactPartialRenderer.js        | 104 ++++++------
 .../src/server/ReactPartialRendererHooks.js   |  41 ++---
 .../src/server/ReactThreadIDAllocator.js      |  19 +--
 .../react-dom/src/shared/assertValidProps.js  |  55 ++++---
 packages/react-dom/src/shared/sanitizeURL.js  |  10 +-
 .../src/test-utils/ReactTestUtils.js          |  61 +++----
 packages/react-fetch/src/ReactFetchBrowser.js |   1 +
 packages/react-fetch/src/ReactFetchNode.js    |   1 +
 .../src/ReactFabricComponentTree.js           |  11 +-
 .../src/ReactNativeBridgeEventPlugin.js       |  14 +-
 .../src/ReactNativeComponentTree.js           |   8 +-
 .../src/ReactNativeFiberInspector.js          |   7 +-
 .../src/ReactNativeGetListener.js             |  14 +-
 .../src/ReactNativeHostConfig.js              |  16 +-
 .../InitializeNativeFabricUIManager.js        |  87 +++++-----
 .../ReactNativeViewConfigRegistry.js          |  57 +++----
 .../Libraries/ReactPrivate/UIManager.js       | 117 +++++++-------
 .../src/legacy-events/EventBatching.js        |  14 +-
 .../src/legacy-events/EventPluginRegistry.js  |  96 +++++------
 .../src/legacy-events/EventPluginUtils.js     |  10 +-
 .../src/legacy-events/ResponderEventPlugin.js |  14 +-
 .../ResponderTouchHistoryStore.js             |   7 +-
 .../src/legacy-events/SyntheticEvent.js       |  13 +-
 .../src/legacy-events/accumulate.js           |  10 +-
 .../src/legacy-events/accumulateInto.js       |  10 +-
 .../server/ReactNativeServerFormatConfig.js   |  15 +-
 packages/react-pg/src/ReactPostgres.js        |   7 +-
 .../src/ReactChildFiber.new.js                | 118 ++++++++------
 .../src/ReactChildFiber.old.js                | 118 ++++++++------
 .../react-reconciler/src/ReactFiber.new.js    |  11 +-
 .../react-reconciler/src/ReactFiber.old.js    |  11 +-
 .../src/ReactFiberBeginWork.new.js            |  37 +++--
 .../src/ReactFiberBeginWork.old.js            |  37 +++--
 .../src/ReactFiberClassComponent.new.js       |   4 +-
 .../src/ReactFiberClassComponent.old.js       |   4 +-
 .../src/ReactFiberCommitWork.new.js           |  46 +++---
 .../src/ReactFiberCommitWork.old.js           |  46 +++---
 .../src/ReactFiberCompleteWork.new.js         |  44 +++---
 .../src/ReactFiberCompleteWork.old.js         |  44 +++---
 .../src/ReactFiberContext.new.js              |  51 +++---
 .../src/ReactFiberContext.old.js              |  51 +++---
 .../src/ReactFiberHooks.new.js                | 100 ++++++------
 .../src/ReactFiberHooks.old.js                | 100 ++++++------
 .../src/ReactFiberHostConfig.js               |   6 +-
 .../ReactFiberHostConfigWithNoHydration.js    |   5 +-
 .../ReactFiberHostConfigWithNoMicrotasks.js   |   5 +-
 .../src/ReactFiberHostConfigWithNoMutation.js |   5 +-
 .../ReactFiberHostConfigWithNoPersistence.js  |   5 +-
 .../src/ReactFiberHostConfigWithNoScopes.js   |   5 +-
 ...ReactFiberHostConfigWithNoTestSelectors.js |   5 +-
 .../src/ReactFiberHostContext.new.js          |  14 +-
 .../src/ReactFiberHostContext.old.js          |  14 +-
 .../src/ReactFiberHotReloading.new.js         |   2 +
 .../src/ReactFiberHotReloading.old.js         |   2 +
 .../src/ReactFiberHydrationContext.new.js     |  39 ++---
 .../src/ReactFiberHydrationContext.old.js     |  39 ++---
 .../src/ReactFiberNewContext.new.js           |  47 +++---
 .../src/ReactFiberNewContext.old.js           |  47 +++---
 .../src/ReactFiberReconciler.new.js           |  19 +--
 .../src/ReactFiberReconciler.old.js           |  19 +--
 .../src/ReactFiberThrow.new.js                |   3 +-
 .../src/ReactFiberThrow.old.js                |   3 +-
 .../src/ReactFiberTreeReflection.js           |  53 ++++---
 .../src/ReactFiberUnwindWork.new.js           |  27 ++--
 .../src/ReactFiberUnwindWork.old.js           |  27 ++--
 .../src/ReactFiberWorkLoop.new.js             |  54 +++----
 .../src/ReactFiberWorkLoop.old.js             |  54 +++----
 .../src/ReactTestSelectors.js                 |  40 ++---
 .../src/ReactUpdateQueue.new.js               |  15 +-
 .../src/ReactUpdateQueue.old.js               |  15 +-
 .../src/forks/ReactFiberErrorDialog.native.js |  11 +-
 .../src/forks/ReactFiberErrorDialog.www.js    |  12 +-
 packages/react-server/src/ReactFizzContext.js |  13 +-
 packages/react-server/src/ReactFizzHooks.js   |  43 ++---
 .../react-server/src/ReactFizzNewContext.js   |  54 ++++---
 packages/react-server/src/ReactFizzServer.js  |  62 ++++----
 .../react-server/src/ReactFlightServer.js     | 106 +++++++------
 .../src/ReactFlightServerConfig.js            |   6 +-
 .../src/ReactServerFormatConfig.js            |   6 +-
 .../src/ReactServerStreamConfig.js            |   6 +-
 .../src/ReactSuspenseTestUtils.js             |   3 +-
 .../src/ReactTestRenderer.js                  |  39 +++--
 packages/react/src/ReactAct.js                |   6 +-
 packages/react/src/ReactBaseClasses.js        |  20 +--
 packages/react/src/ReactChildren.js           |  26 +--
 packages/react/src/ReactElement.js            |  11 +-
 packages/react/unstable-shared-subset.js      |   1 +
 packages/scheduler/src/forks/SchedulerMock.js |   1 +
 packages/shared/ReactErrorUtils.js            |   4 +-
 packages/shared/checkPropTypes.js             |   1 +
 .../forks/invokeGuardedCallbackImpl.www.js    |  12 +-
 packages/shared/invariant.js                  |   1 +
 packages/shared/invokeGuardedCallbackImpl.js  |  26 +--
 .../transform-error-messages.js.snap          |  35 ++++
 .../__tests__/transform-error-messages.js     |  57 +++++++
 scripts/error-codes/codes.json                |  13 +-
 scripts/error-codes/extract-errors.js         |   4 +-
 .../error-codes/transform-error-messages.js   | 106 +++++++++++--
 .../prod-error-codes-test.internal.js         |  77 +++++++++
 scripts/eslint-rules/index.js                 |   1 +
 scripts/eslint-rules/prod-error-codes.js      |  79 ++++++++++
 scripts/print-warnings/print-warnings.js      |   4 +-
 scripts/rollup/build.js                       |  17 +-
 scripts/rollup/bundles.js                     |  63 ++++++++
 scripts/shared/__tests__/evalToString-test.js |   4 +-
 scripts/shared/evalToString.js                |  40 ++++-
 yarn.lock                                     |   1 -
 128 files changed, 2118 insertions(+), 1519 deletions(-)
 create mode 100644 scripts/eslint-rules/__tests__/prod-error-codes-test.internal.js
 create mode 100644 scripts/eslint-rules/prod-error-codes.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 23d5ab76c32bc..d464e83b453aa 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -127,6 +127,41 @@ module.exports = {
   },
 
   overrides: [
+    {
+      // By default, anything error message that appears the packages directory
+      // must have a corresponding error code. The exceptions are defined
+      // in the next override entry.
+      files: ['packages/**/*.js'],
+      rules: {
+        'react-internal/prod-error-codes': ERROR,
+      },
+    },
+    {
+      // These are files where it's OK to have unminified error messages. These
+      // are environments where bundle size isn't a concern, like tests
+      // or Node.
+      files: [
+        'packages/react-dom/src/test-utils/**/*.js',
+        'packages/react-devtools-shared/**/*.js',
+        'packages/react-noop-renderer/**/*.js',
+        'packages/react-pg/**/*.js',
+        'packages/react-fs/**/*.js',
+        'packages/react-refresh/**/*.js',
+        'packages/react-server-dom-webpack/**/*.js',
+        'packages/react-test-renderer/**/*.js',
+        'packages/react-debug-tools/**/*.js',
+        'packages/react-devtools-extensions/**/*.js',
+        'packages/react-devtools-scheduling-profiler/**/*.js',
+        'packages/react-native-renderer/**/*.js',
+        'packages/eslint-plugin-react-hooks/**/*.js',
+        'packages/jest-react/**/*.js',
+        'packages/**/__tests__/*.js',
+        'packages/**/npm/*.js',
+      ],
+      rules: {
+        'react-internal/prod-error-codes': OFF,
+      },
+    },
     {
       // We apply these settings to files that we ship through npm.
       // They must be ES5.
diff --git a/packages/create-subscription/src/createSubscription.js b/packages/create-subscription/src/createSubscription.js
index 30d7b669f65fe..329a238fc238a 100644
--- a/packages/create-subscription/src/createSubscription.js
+++ b/packages/create-subscription/src/createSubscription.js
@@ -8,7 +8,6 @@
  */
 
 import * as React from 'react';
-import invariant from 'shared/invariant';
 
 type Unsubscribe = () => void;
 
@@ -128,10 +127,12 @@ export function createSubscription<Property, Value>(
 
         // Store the unsubscribe method for later (in case the subscribable prop changes).
         const unsubscribe = subscribe(source, callback);
-        invariant(
-          typeof unsubscribe === 'function',
-          'A subscription must return an unsubscribe function.',
-        );
+
+        if (typeof unsubscribe !== 'function') {
+          throw new Error(
+            'A subscription must return an unsubscribe function.',
+          );
+        }
 
         // It's safe to store unsubscribe on the instance because
         // We only read or write that property during the "commit" phase.
diff --git a/packages/jest-react/src/JestReact.js b/packages/jest-react/src/JestReact.js
index b4688f1ff980a..92f7e7cdb192d 100644
--- a/packages/jest-react/src/JestReact.js
+++ b/packages/jest-react/src/JestReact.js
@@ -7,7 +7,6 @@
 
 import {REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 export {act} from './internalAct';
@@ -31,11 +30,12 @@ function captureAssertion(fn) {
 function assertYieldsWereCleared(root) {
   const Scheduler = root._Scheduler;
   const actualYields = Scheduler.unstable_clearYields();
-  invariant(
-    actualYields.length === 0,
-    'Log of yielded values is not empty. ' +
-      'Call expect(ReactTestRenderer).unstable_toHaveYielded(...) first.',
-  );
+  if (actualYields.length !== 0) {
+    throw new Error(
+      'Log of yielded values is not empty. ' +
+        'Call expect(ReactTestRenderer).unstable_toHaveYielded(...) first.',
+    );
+  }
 }
 
 export function unstable_toMatchRenderedOutput(root, expectedJSX) {
diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index f9971b5bb0360..ec702bf9a70d4 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -7,7 +7,6 @@
 
 import Transform from 'art/core/transform';
 import Mode from 'art/modes/current';
-import invariant from 'shared/invariant';
 
 import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
 
@@ -248,8 +247,7 @@ export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
 export function appendInitialChild(parentInstance, child) {
   if (typeof child === 'string') {
     // Noop for string children of Text (eg <Text>{'foo'}{'bar'}</Text>)
-    invariant(false, 'Text children should already be flattened.');
-    return;
+    throw new Error('Text children should already be flattened.');
   }
 
   child.inject(parentInstance);
@@ -282,7 +280,9 @@ export function createInstance(type, props, internalInstanceHandle) {
       break;
   }
 
-  invariant(instance, 'ReactART does not support the type "%s"', type);
+  if (!instance) {
+    throw new Error(`ReactART does not support the type "${type}"`);
+  }
 
   instance._applyProps(instance, props);
 
@@ -367,18 +367,18 @@ export function appendChildToContainer(parentInstance, child) {
 }
 
 export function insertBefore(parentInstance, child, beforeChild) {
-  invariant(
-    child !== beforeChild,
-    'ReactART: Can not insert node before itself',
-  );
+  if (child === beforeChild) {
+    throw new Error('ReactART: Can not insert node before itself');
+  }
+
   child.injectBefore(beforeChild);
 }
 
 export function insertInContainerBefore(parentInstance, child, beforeChild) {
-  invariant(
-    child !== beforeChild,
-    'ReactART: Can not insert node before itself',
-  );
+  if (child === beforeChild) {
+    throw new Error('ReactART: Can not insert node before itself');
+  }
+
   child.injectBefore(beforeChild);
 }
 
@@ -433,25 +433,25 @@ export function clearContainer(container) {
 }
 
 export function getInstanceFromNode(node) {
-  throw new Error('Not yet implemented.');
+  throw new Error('Not implemented.');
 }
 
 export function isOpaqueHydratingObject(value: mixed): boolean {
-  throw new Error('Not yet implemented');
+  throw new Error('Not implemented.');
 }
 
 export function makeOpaqueHydratingObject(
   attemptToReadValue: () => void,
 ): OpaqueIDType {
-  throw new Error('Not yet implemented.');
+  throw new Error('Not implemented.');
 }
 
 export function makeClientId(): OpaqueIDType {
-  throw new Error('Not yet implemented');
+  throw new Error('Not implemented.');
 }
 
 export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  throw new Error('Not yet implemented');
+  throw new Error('Not implemented.');
 }
 
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
diff --git a/packages/react-cache/src/ReactCacheOld.js b/packages/react-cache/src/ReactCacheOld.js
index 77768dfcf2163..f8b33434b7c76 100644
--- a/packages/react-cache/src/ReactCacheOld.js
+++ b/packages/react-cache/src/ReactCacheOld.js
@@ -49,6 +49,8 @@ const ReactCurrentDispatcher =
 function readContext(Context) {
   const dispatcher = ReactCurrentDispatcher.current;
   if (dispatcher === null) {
+    // This wasn't being minified but we're going to retire this package anyway.
+    // eslint-disable-next-line react-internal/prod-error-codes
     throw new Error(
       'react-cache: read and preload may only be called from within a ' +
         "component's render. They are not supported in event handlers or " +
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 983e3edc93802..9d5ac3680a8a0 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -397,6 +397,7 @@ export function resolveError(
   message: string,
   stack: string,
 ): void {
+  // eslint-disable-next-line react-internal/prod-error-codes
   const error = new Error(message);
   error.stack = stack;
   const chunks = response._chunks;
diff --git a/packages/react-client/src/ReactFlightClientHostConfig.js b/packages/react-client/src/ReactFlightClientHostConfig.js
index 49c9752540528..2829adc569256 100644
--- a/packages/react-client/src/ReactFlightClientHostConfig.js
+++ b/packages/react-client/src/ReactFlightClientHostConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* eslint-disable react-internal/prod-error-codes */
 
 // We expect that our Rollup, Jest, and Flow configurations
 // always shim this module with the corresponding host config
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-client/src/ReactFlightClientHostConfigNoStream.js b/packages/react-client/src/ReactFlightClientHostConfigNoStream.js
index 17f29a9f26c50..8c453832bd3b2 100644
--- a/packages/react-client/src/ReactFlightClientHostConfigNoStream.js
+++ b/packages/react-client/src/ReactFlightClientHostConfigNoStream.js
@@ -12,6 +12,7 @@ export type StringDecoder = void;
 export const supportsBinaryStreams = false;
 
 export function createStringDecoder(): void {
+  // eslint-disable-next-line react-internal/prod-error-codes
   throw new Error('Should never be called');
 }
 
@@ -19,6 +20,7 @@ export function readPartialStringChunk(
   decoder: StringDecoder,
   buffer: Uint8Array,
 ): string {
+  // eslint-disable-next-line react-internal/prod-error-codes
   throw new Error('Should never be called');
 }
 
@@ -26,5 +28,6 @@ export function readFinalStringChunk(
   decoder: StringDecoder,
   buffer: Uint8Array,
 ): string {
+  // eslint-disable-next-line react-internal/prod-error-codes
   throw new Error('Should never be called');
 }
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index aa4d2d60fdf63..957838ed58a9c 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -23,7 +23,6 @@ import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
 import {NoMode} from 'react-reconciler/src/ReactTypeOfMode';
 
 import ErrorStackParser from 'error-stack-parser';
-import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {
@@ -107,7 +106,7 @@ function nextHook(): null | Hook {
 }
 
 function getCacheForType<T>(resourceType: () => T): T {
-  invariant(false, 'Not implemented.');
+  throw new Error('Not implemented.');
 }
 
 function readContext<T>(context: ReactContext<T>): T {
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index a1bb39c929d43..8e37995cb7364 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -39,7 +39,6 @@ import {
 import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import ReactVersion from 'shared/ReactVersion';
-import invariant from 'shared/invariant';
 import {
   warnUnstableRenderSubtreeIntoContainer,
   enableNewReconciler,
@@ -108,10 +107,10 @@ function createPortal(
   container: Container,
   key: ?string = null,
 ): React$Portal {
-  invariant(
-    isValidContainer(container),
-    'Target container is not a DOM element.',
-  );
+  if (!isValidContainer(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
   // TODO: pass ReactDOM portal implementation as third argument
   // $FlowFixMe The Flow type is opaque but there's no way to actually create it.
   return createPortalImpl(children, container, null, key);
diff --git a/packages/react-dom/src/client/ReactDOMComponentTree.js b/packages/react-dom/src/client/ReactDOMComponentTree.js
index 2afe66035f364..58e5d72acd581 100644
--- a/packages/react-dom/src/client/ReactDOMComponentTree.js
+++ b/packages/react-dom/src/client/ReactDOMComponentTree.js
@@ -30,7 +30,6 @@ import {
 
 import {getParentSuspenseInstance} from './ReactDOMHostConfig';
 
-import invariant from 'shared/invariant';
 import {enableScopeAPI} from 'shared/ReactFeatureFlags';
 
 const randomKey = Math.random()
@@ -190,7 +189,7 @@ export function getNodeFromInstance(inst: Fiber): Instance | TextInstance {
 
   // Without this first invariant, passing a non-DOM-component triggers the next
   // invariant for a missing parent, which is super confusing.
-  invariant(false, 'getNodeFromInstance: Invalid argument.');
+  throw new Error('getNodeFromInstance: Invalid argument.');
 }
 
 export function getFiberCurrentPropsFromNode(
diff --git a/packages/react-dom/src/client/ReactDOMEventHandle.js b/packages/react-dom/src/client/ReactDOMEventHandle.js
index 80834c32834d2..0fd0cd1599780 100644
--- a/packages/react-dom/src/client/ReactDOMEventHandle.js
+++ b/packages/react-dom/src/client/ReactDOMEventHandle.js
@@ -28,7 +28,6 @@ import {
   enableScopeAPI,
   enableCreateEventHandleAPI,
 } from 'shared/ReactFeatureFlags';
-import invariant from 'shared/invariant';
 
 type EventHandleOptions = {|
   capture?: boolean,
@@ -73,8 +72,7 @@ function registerReactDOMEvent(
       eventTarget,
     );
   } else {
-    invariant(
-      false,
+    throw new Error(
       'ReactDOM.createEventHandle: setter called on an invalid ' +
         'target. Provide a valid EventTarget or an element managed by React.',
     );
@@ -97,11 +95,11 @@ export function createEventHandle(
     // Unfortunately, the downside of this invariant is that *removing* a native
     // event from the list of known events has now become a breaking change for
     // any code relying on the createEventHandle API.
-    invariant(
-      allNativeEvents.has(domEventName),
-      'Cannot call unstable_createEventHandle with "%s", as it is not an event known to React.',
-      domEventName,
-    );
+    if (!allNativeEvents.has(domEventName)) {
+      throw new Error(
+        `Cannot call unstable_createEventHandle with "${domEventName}", as it is not an event known to React.`,
+      );
+    }
 
     let isCapturePhaseListener = false;
     if (options != null) {
@@ -115,11 +113,13 @@ export function createEventHandle(
       target: EventTarget | ReactScopeInstance,
       callback: (SyntheticEvent<EventTarget>) => void,
     ) => {
-      invariant(
-        typeof callback === 'function',
-        'ReactDOM.createEventHandle: setter called with an invalid ' +
-          'callback. The callback must be a function.',
-      );
+      if (typeof callback !== 'function') {
+        throw new Error(
+          'ReactDOM.createEventHandle: setter called with an invalid ' +
+            'callback. The callback must be a function.',
+        );
+      }
+
       if (!doesTargetHaveEventHandle(target, eventHandle)) {
         addEventHandleToTarget(target, eventHandle);
         registerReactDOMEvent(target, domEventName, isCapturePhaseListener);
diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js
index 4fabc1fb9ada9..8f5098405b576 100644
--- a/packages/react-dom/src/client/ReactDOMInput.js
+++ b/packages/react-dom/src/client/ReactDOMInput.js
@@ -9,7 +9,6 @@
 
 // TODO: direct imports like some-package/src/* are bad. Fix me.
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
-import invariant from 'shared/invariant';
 
 import {setValueForProperty} from './DOMPropertyOperations';
 import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
@@ -383,11 +382,13 @@ function updateNamedCousins(rootNode, props) {
       // That's probably okay; we don't support it just as we don't support
       // mixing React radio buttons with non-React ones.
       const otherProps = getFiberCurrentPropsFromNode(otherNode);
-      invariant(
-        otherProps,
-        'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
-          'same `name` is not supported.',
-      );
+
+      if (!otherProps) {
+        throw new Error(
+          'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
+            'same `name` is not supported.',
+        );
+      }
 
       // We need update the tracked value on the named cousin since the value
       // was changed but the input saw no event or value set
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 70dcddc502763..ac12f18bee509 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -36,7 +36,6 @@ import {
 } from 'react-reconciler/src/ReactFiberReconciler';
 import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {has as hasInstance} from 'shared/ReactInstanceMap';
 
@@ -238,10 +237,10 @@ export function hydrate(
     );
   }
 
-  invariant(
-    isValidContainerLegacy(container),
-    'Target container is not a DOM element.',
-  );
+  if (!isValidContainerLegacy(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
   if (__DEV__) {
     const isModernRoot =
       isContainerMarkedAsRoot(container) &&
@@ -278,10 +277,10 @@ export function render(
     );
   }
 
-  invariant(
-    isValidContainerLegacy(container),
-    'Target container is not a DOM element.',
-  );
+  if (!isValidContainerLegacy(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
   if (__DEV__) {
     const isModernRoot =
       isContainerMarkedAsRoot(container) &&
@@ -309,14 +308,14 @@ export function unstable_renderSubtreeIntoContainer(
   containerNode: Container,
   callback: ?Function,
 ) {
-  invariant(
-    isValidContainerLegacy(containerNode),
-    'Target container is not a DOM element.',
-  );
-  invariant(
-    parentComponent != null && hasInstance(parentComponent),
-    'parentComponent must be a valid React Component',
-  );
+  if (!isValidContainerLegacy(containerNode)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
+  if (parentComponent == null || !hasInstance(parentComponent)) {
+    throw new Error('parentComponent must be a valid React Component');
+  }
+
   return legacyRenderSubtreeIntoContainer(
     parentComponent,
     element,
@@ -327,10 +326,11 @@ export function unstable_renderSubtreeIntoContainer(
 }
 
 export function unmountComponentAtNode(container: Container) {
-  invariant(
-    isValidContainerLegacy(container),
-    'unmountComponentAtNode(...): Target container is not a DOM element.',
-  );
+  if (!isValidContainerLegacy(container)) {
+    throw new Error(
+      'unmountComponentAtNode(...): Target container is not a DOM element.',
+    );
+  }
 
   if (__DEV__) {
     const isModernRoot =
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 1a027d9a1e6a9..38f2100cb5418 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -65,7 +65,6 @@ import {
   flushSync,
   isAlreadyRendering,
 } from 'react-reconciler/src/ReactFiberReconciler';
-import invariant from 'shared/invariant';
 import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
 import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
 
@@ -76,7 +75,7 @@ function ReactDOMRoot(internalRoot: FiberRoot) {
 ReactDOMRoot.prototype.render = function(children: ReactNodeList): void {
   const root = this._internalRoot;
   if (root === null) {
-    invariant(false, 'Cannot update an unmounted root.');
+    throw new Error('Cannot update an unmounted root.');
   }
 
   if (__DEV__) {
@@ -138,10 +137,10 @@ export function createRoot(
   container: Container,
   options?: CreateRootOptions,
 ): RootType {
-  invariant(
-    isValidContainerLegacy(container),
-    'createRoot(...): Target container is not a DOM element.',
-  );
+  if (!isValidContainerLegacy(container)) {
+    throw new Error('createRoot(...): Target container is not a DOM element.');
+  }
+
   warnIfReactDOMContainerInDEV(container);
 
   // TODO: Delete these options
@@ -195,10 +194,10 @@ export function hydrateRoot(
   initialChildren: ReactNodeList,
   options?: HydrateRootOptions,
 ): RootType {
-  invariant(
-    isValidContainer(container),
-    'hydrateRoot(...): Target container is not a DOM element.',
-  );
+  if (!isValidContainer(container)) {
+    throw new Error('hydrateRoot(...): Target container is not a DOM element.');
+  }
+
   warnIfReactDOMContainerInDEV(container);
 
   // For now we reuse the whole bag of options since they contain
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index 6e8aed5cc43cd..6834b16e4e97c 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
@@ -40,10 +39,12 @@ type TextAreaWithWrapperState = HTMLTextAreaElement & {|
 
 export function getHostProps(element: Element, props: Object) {
   const node = ((element: any): TextAreaWithWrapperState);
-  invariant(
-    props.dangerouslySetInnerHTML == null,
-    '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
-  );
+
+  if (props.dangerouslySetInnerHTML != null) {
+    throw new Error(
+      '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
+    );
+  }
 
   // Always set children to the same thing. In IE9, the selection range will
   // get reset if `textContent` is mutated.  We could add a check in setTextContent
@@ -96,15 +97,17 @@ export function initWrapperState(element: Element, props: Object) {
         );
       }
       if (!disableTextareaChildren) {
-        invariant(
-          defaultValue == null,
-          'If you supply `defaultValue` on a <textarea>, do not pass children.',
-        );
-        if (isArray(children)) {
-          invariant(
-            children.length <= 1,
-            '<textarea> can only have at most one child.',
+        if (defaultValue != null) {
+          throw new Error(
+            'If you supply `defaultValue` on a <textarea>, do not pass children.',
           );
+        }
+
+        if (isArray(children)) {
+          if (children.length > 1) {
+            throw new Error('<textarea> can only have at most one child.');
+          }
+
           children = children[0];
         }
 
diff --git a/packages/react-dom/src/events/ReactDOMControlledComponent.js b/packages/react-dom/src/events/ReactDOMControlledComponent.js
index 5b4dc59232902..59f9f5262798a 100644
--- a/packages/react-dom/src/events/ReactDOMControlledComponent.js
+++ b/packages/react-dom/src/events/ReactDOMControlledComponent.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import {
   getInstanceFromNode,
   getFiberCurrentPropsFromNode,
@@ -27,11 +26,14 @@ function restoreStateOfTarget(target: Node) {
     // Unmounted
     return;
   }
-  invariant(
-    typeof restoreImpl === 'function',
-    'setRestoreImplementation() needs to be called to handle a target for controlled ' +
-      'events. This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  if (typeof restoreImpl !== 'function') {
+    throw new Error(
+      'setRestoreImplementation() needs to be called to handle a target for controlled ' +
+        'events. This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
   const stateNode = internalInstance.stateNode;
   // Guard against Fiber being unmounted.
   if (stateNode) {
diff --git a/packages/react-dom/src/events/getListener.js b/packages/react-dom/src/events/getListener.js
index 71e498bbf6e7d..0b92c3898ff3e 100644
--- a/packages/react-dom/src/events/getListener.js
+++ b/packages/react-dom/src/events/getListener.js
@@ -9,7 +9,6 @@
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {Props} from '../client/ReactDOMHostConfig';
 
-import invariant from 'shared/invariant';
 import {getFiberCurrentPropsFromNode} from '../client/ReactDOMComponentTree';
 
 function isInteractive(tag: string): boolean {
@@ -67,11 +66,12 @@ export default function getListener(
   if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
     return null;
   }
-  invariant(
-    !listener || typeof listener === 'function',
-    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
-    registrationName,
-    typeof listener,
-  );
+
+  if (listener && typeof listener !== 'function') {
+    throw new Error(
+      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
+    );
+  }
+
   return listener;
 }
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index 8982d4d9341bd..338c77de436d7 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -8,7 +8,6 @@
  */
 
 import ReactVersion from 'shared/ReactVersion';
-import invariant from 'shared/invariant';
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 
@@ -77,13 +76,16 @@ function renderToStringImpl(
   if (didFatal) {
     throw fatalError;
   }
-  invariant(
-    readyToStream,
-    'A React component suspended while rendering, but no fallback UI was specified.\n' +
-      '\n' +
-      'Add a <Suspense fallback=...> component higher in the tree to ' +
-      'provide a loading indicator or placeholder to display.',
-  );
+
+  if (!readyToStream) {
+    throw new Error(
+      'A React component suspended while rendering, but no fallback UI was specified.\n' +
+        '\n' +
+        'Add a <Suspense fallback=...> component higher in the tree to ' +
+        'provide a loading indicator or placeholder to display.',
+    );
+  }
+
   return result;
 }
 
@@ -102,16 +104,14 @@ function renderToStaticMarkup(
 }
 
 function renderToNodeStream() {
-  invariant(
-    false,
+  throw new Error(
     'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +
       'in the browser. Use ReactDOMServer.renderToString() instead.',
   );
 }
 
 function renderToStaticNodeStream() {
-  invariant(
-    false,
+  throw new Error(
     'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +
       'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
   );
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 954cc1ef689f5..0c4b155bb881d 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -49,7 +49,6 @@ import warnValidStyle from '../shared/warnValidStyle';
 
 import escapeTextForBrowser from './escapeTextForBrowser';
 import hyphenateStyleName from '../shared/hyphenateStyleName';
-import invariant from 'shared/invariant';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import sanitizeURL from '../shared/sanitizeURL';
 import isArray from 'shared/isArray';
@@ -192,10 +191,12 @@ export type OpaqueIDType = string;
 export function makeServerID(
   responseState: null | ResponseState,
 ): OpaqueIDType {
-  invariant(
-    responseState !== null,
-    'Invalid hook call. Hooks can only be called inside of the body of a function component.',
-  );
+  if (responseState === null) {
+    throw new Error(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
+    );
+  }
+
   // TODO: This is not deterministic since it's created during render.
   return (
     responseState.opaqueIdentifierPrefix +
@@ -244,12 +245,13 @@ function pushStyle(
   responseState: ResponseState,
   style: Object,
 ): void {
-  invariant(
-    typeof style === 'object',
-    'The `style` prop expects a mapping from style properties to values, ' +
-      "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
-      'using JSX.',
-  );
+  if (typeof style !== 'object') {
+    throw new Error(
+      'The `style` prop expects a mapping from style properties to values, ' +
+        "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
+        'using JSX.',
+    );
+  }
 
   let isFirst = true;
   for (const styleName in style) {
@@ -498,17 +500,20 @@ function pushInnerHTML(
   children,
 ) {
   if (innerHTML != null) {
-    invariant(
-      children == null,
-      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
-    );
+    if (children != null) {
+      throw new Error(
+        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+      );
+    }
+
+    if (typeof innerHTML !== 'object' || !('__html' in innerHTML)) {
+      throw new Error(
+        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+          'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
+          'for more information.',
+      );
+    }
 
-    invariant(
-      typeof innerHTML === 'object' && '__html' in innerHTML,
-      '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
-        'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
-        'for more information.',
-    );
     const html = innerHTML.__html;
     if (html !== null && html !== undefined) {
       if (__DEV__) {
@@ -799,11 +804,9 @@ function pushInput(
       switch (propKey) {
         case 'children':
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
-            '%s is a self-closing tag and must neither have `children` nor ' +
+          throw new Error(
+            `${'input'} is a self-closing tag and must neither have \`children\` nor ` +
               'use `dangerouslySetInnerHTML`.',
-            'input',
           );
         // eslint-disable-next-line-no-fallthrough
         case 'defaultChecked':
@@ -885,8 +888,7 @@ function pushStartTextArea(
           defaultValue = propValue;
           break;
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
+          throw new Error(
             '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
           );
         // eslint-disable-next-line-no-fallthrough
@@ -910,15 +912,18 @@ function pushStartTextArea(
           'children on <textarea>.',
       );
     }
-    invariant(
-      value == null,
-      'If you supply `defaultValue` on a <textarea>, do not pass children.',
-    );
-    if (isArray(children)) {
-      invariant(
-        children.length <= 1,
-        '<textarea> can only have at most one child.',
+
+    if (value != null) {
+      throw new Error(
+        'If you supply `defaultValue` on a <textarea>, do not pass children.',
       );
+    }
+
+    if (isArray(children)) {
+      if (children.length > 1) {
+        throw new Error('<textarea> can only have at most one child.');
+      }
+
       // TODO: remove the coercion and the DEV check below because it will
       // always be overwritten by the coercion several lines below it. #22309
       if (__DEV__) {
@@ -966,11 +971,9 @@ function pushSelfClosing(
       switch (propKey) {
         case 'children':
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
-            '%s is a self-closing tag and must neither have `children` nor ' +
+          throw new Error(
+            `${tag} is a self-closing tag and must neither have \`children\` nor ` +
               'use `dangerouslySetInnerHTML`.',
-            tag,
           );
         // eslint-disable-next-line-no-fallthrough
         default:
@@ -1000,8 +1003,7 @@ function pushStartMenuItem(
       switch (propKey) {
         case 'children':
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
+          throw new Error(
             'menuitems cannot have `children` nor `dangerouslySetInnerHTML`.',
           );
         // eslint-disable-next-line-no-fallthrough
@@ -1158,17 +1160,20 @@ function pushStartPreformattedElement(
   // TODO: This doesn't deal with the case where the child is an array
   // or component that returns a string.
   if (innerHTML != null) {
-    invariant(
-      children == null,
-      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
-    );
+    if (children != null) {
+      throw new Error(
+        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+      );
+    }
+
+    if (typeof innerHTML !== 'object' || !('__html' in innerHTML)) {
+      throw new Error(
+        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+          'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
+          'for more information.',
+      );
+    }
 
-    invariant(
-      typeof innerHTML === 'object' && '__html' in innerHTML,
-      '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
-        'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
-        'for more information.',
-    );
     const html = innerHTML.__html;
     if (html !== null && html !== undefined) {
       if (typeof html === 'string' && html.length > 0 && html[0] === '\n') {
@@ -1195,7 +1200,10 @@ const validatedTagCache = new Map();
 function startChunkForTag(tag: string): PrecomputedChunk {
   let tagStartChunk = validatedTagCache.get(tag);
   if (tagStartChunk === undefined) {
-    invariant(VALID_TAG_REGEX.test(tag), 'Invalid tag: %s', tag);
+    if (!VALID_TAG_REGEX.test(tag)) {
+      throw new Error(`Invalid tag: ${tag}`);
+    }
+
     tagStartChunk = stringToPrecomputedChunk('<' + tag);
     validatedTagCache.set(tag, tagStartChunk);
   }
@@ -1405,10 +1413,13 @@ export function writeStartPendingSuspenseBoundary(
   id: SuspenseBoundaryID,
 ): boolean {
   writeChunk(destination, startPendingSuspenseBoundary1);
-  invariant(
-    id !== null,
-    'An ID must have been assigned before we can complete the boundary.',
-  );
+
+  if (id === null) {
+    throw new Error(
+      'An ID must have been assigned before we can complete the boundary.',
+    );
+  }
+
   writeChunk(destination, id);
   return writeChunk(destination, startPendingSuspenseBoundary2);
 }
@@ -1528,7 +1539,7 @@ export function writeStartSegment(
       return writeChunk(destination, startSegmentColGroup2);
     }
     default: {
-      invariant(false, 'Unknown insertion mode. This is a bug in React.');
+      throw new Error('Unknown insertion mode. This is a bug in React.');
     }
   }
 }
@@ -1560,7 +1571,7 @@ export function writeEndSegment(
       return writeChunk(destination, endSegmentColGroup);
     }
     default: {
-      invariant(false, 'Unknown insertion mode. This is a bug in React.');
+      throw new Error('Unknown insertion mode. This is a bug in React.');
     }
   }
 }
@@ -1729,10 +1740,13 @@ export function writeCompletedBoundaryInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, completeBoundaryScript1Partial);
   }
-  invariant(
-    boundaryID !== null,
-    'An ID must have been assigned before we can complete the boundary.',
-  );
+
+  if (boundaryID === null) {
+    throw new Error(
+      'An ID must have been assigned before we can complete the boundary.',
+    );
+  }
+
   const formattedContentID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, boundaryID);
   writeChunk(destination, completeBoundaryScript2);
@@ -1760,10 +1774,13 @@ export function writeClientRenderBoundaryInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, clientRenderScript1Partial);
   }
-  invariant(
-    boundaryID !== null,
-    'An ID must have been assigned before we can complete the boundary.',
-  );
+
+  if (boundaryID === null) {
+    throw new Error(
+      'An ID must have been assigned before we can complete the boundary.',
+    );
+  }
+
   writeChunk(destination, boundaryID);
   return writeChunk(destination, clientRenderScript2);
 }
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js b/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
index 4424040496b99..f810d7472b013 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
@@ -6,21 +6,18 @@
  */
 
 import ReactVersion from 'shared/ReactVersion';
-import invariant from 'shared/invariant';
 
 import {renderToString, renderToStaticMarkup} from './ReactDOMStringRenderer';
 
 function renderToNodeStream() {
-  invariant(
-    false,
+  throw new Error(
     'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +
       'in the browser. Use ReactDOMServer.renderToString() instead.',
   );
 }
 
 function renderToStaticNodeStream() {
-  invariant(
-    false,
+  throw new Error(
     'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +
       'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
   );
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 56231cf5a0187..479a828a46e1f 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -13,7 +13,6 @@ import type {LazyComponent} from 'react/src/ReactLazy';
 import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
 
 import * as React from 'react';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
@@ -213,7 +212,10 @@ const VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/; // Simplified subset
 const validatedTagCache = {};
 function validateDangerousTag(tag) {
   if (!validatedTagCache.hasOwnProperty(tag)) {
-    invariant(VALID_TAG_REGEX.test(tag), 'Invalid tag: %s', tag);
+    if (!VALID_TAG_REGEX.test(tag)) {
+      throw new Error(`Invalid tag: ${tag}`);
+    }
+
     validatedTagCache[tag] = true;
   }
 }
@@ -729,12 +731,12 @@ function resolve(
         if (typeof childContextTypes === 'object') {
           childContext = inst.getChildContext();
           for (const contextKey in childContext) {
-            invariant(
-              contextKey in childContextTypes,
-              '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-              getComponentNameFromType(Component) || 'Unknown',
-              contextKey,
-            );
+            if (!(contextKey in childContextTypes)) {
+              throw new Error(
+                `${getComponentNameFromType(Component) ||
+                  'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+              );
+            }
           }
         } else {
           if (__DEV__) {
@@ -944,11 +946,14 @@ class ReactDOMServerRenderer {
               suspended = false;
               // If rendering was suspended at this boundary, render the fallbackFrame
               const fallbackFrame = frame.fallbackFrame;
-              invariant(
-                fallbackFrame,
-                'ReactDOMServer did not find an internal fallback frame for Suspense. ' +
-                  'This is a bug in React. Please file an issue.',
-              );
+
+              if (!fallbackFrame) {
+                throw new Error(
+                  'ReactDOMServer did not find an internal fallback frame for Suspense. ' +
+                    'This is a bug in React. Please file an issue.',
+                );
+              }
+
               this.stack.push(fallbackFrame);
               out[this.suspenseDepth] += '<!--$!-->';
               // Skip flushing output since we're switching to the fallback
@@ -975,17 +980,19 @@ class ReactDOMServerRenderer {
         } catch (err) {
           if (err != null && typeof err.then === 'function') {
             if (enableSuspenseServerRenderer) {
-              invariant(
-                this.suspenseDepth > 0,
-                // TODO: include component name. This is a bit tricky with current factoring.
-                'A React component suspended while rendering, but no fallback UI was specified.\n' +
-                  '\n' +
-                  'Add a <Suspense fallback=...> component higher in the tree to ' +
-                  'provide a loading indicator or placeholder to display.',
-              );
+              if (this.suspenseDepth <= 0) {
+                throw new Error(
+                  // TODO: include component name. This is a bit tricky with current factoring.
+                  'A React component suspended while rendering, but no fallback UI was specified.\n' +
+                    '\n' +
+                    'Add a <Suspense fallback=...> component higher in the tree to ' +
+                    'provide a loading indicator or placeholder to display.',
+                );
+              }
+
               suspended = true;
             } else {
-              invariant(false, 'ReactDOMServer does not yet support Suspense.');
+              throw new Error('ReactDOMServer does not yet support Suspense.');
             }
           } else {
             throw err;
@@ -1035,17 +1042,18 @@ class ReactDOMServerRenderer {
         if (nextChild != null && nextChild.$$typeof != null) {
           // Catch unexpected special types early.
           const $$typeof = nextChild.$$typeof;
-          invariant(
-            $$typeof !== REACT_PORTAL_TYPE,
-            'Portals are not currently supported by the server renderer. ' +
-              'Render them conditionally so that they only appear on the client render.',
-          );
+
+          if ($$typeof === REACT_PORTAL_TYPE) {
+            throw new Error(
+              'Portals are not currently supported by the server renderer. ' +
+                'Render them conditionally so that they only appear on the client render.',
+            );
+          }
+
           // Catch-all to prevent an infinite loop if React.Children.toArray() supports some new type.
-          invariant(
-            false,
-            'Unknown element-like object type: %s. This is likely a bug in React. ' +
+          throw new Error(
+            `Unknown element-like object type: ${($$typeof: any).toString()}. This is likely a bug in React. ` +
               'Please file an issue.',
-            ($$typeof: any).toString(),
           );
         }
         const nextChildren = toArray(nextChild);
@@ -1134,7 +1142,7 @@ class ReactDOMServerRenderer {
             this.suspenseDepth++;
             return '<!--$-->';
           } else {
-            invariant(false, 'ReactDOMServer does not yet support Suspense.');
+            throw new Error('ReactDOMServer does not yet support Suspense.');
           }
         }
         // eslint-disable-next-line-no-fallthrough
@@ -1157,8 +1165,7 @@ class ReactDOMServerRenderer {
             this.stack.push(frame);
             return '';
           }
-          invariant(
-            false,
+          throw new Error(
             'ReactDOMServer does not yet support scope components.',
           );
         }
@@ -1338,13 +1345,13 @@ class ReactDOMServerRenderer {
           info += '\n\nCheck the render method of `' + ownerName + '`.';
         }
       }
-      invariant(
-        false,
+
+      throw new Error(
         'Element type is invalid: expected a string (for built-in ' +
           'components) or a class/function (for composite components) ' +
-          'but got: %s.%s',
-        elementType == null ? elementType : typeof elementType,
-        info,
+          `but got: ${
+            elementType == null ? elementType : typeof elementType
+          }.${info}`,
       );
     }
   }
@@ -1464,15 +1471,18 @@ class ReactDOMServerRenderer {
                 'children on <textarea>.',
             );
           }
-          invariant(
-            defaultValue == null,
-            'If you supply `defaultValue` on a <textarea>, do not pass children.',
-          );
-          if (isArray(textareaChildren)) {
-            invariant(
-              textareaChildren.length <= 1,
-              '<textarea> can only have at most one child.',
+
+          if (defaultValue != null) {
+            throw new Error(
+              'If you supply `defaultValue` on a <textarea>, do not pass children.',
             );
+          }
+
+          if (isArray(textareaChildren)) {
+            if (textareaChildren.length > 1) {
+              throw new Error('<textarea> can only have at most one child.');
+            }
+
             textareaChildren = textareaChildren[0];
           }
 
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index edc5df3dce4bd..6e2b715382a0a 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -19,7 +19,6 @@ import type PartialRenderer from './ReactPartialRenderer';
 
 import {validateContextBounds} from './ReactPartialRendererContext';
 
-import invariant from 'shared/invariant';
 import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
@@ -63,15 +62,17 @@ let isInHookUserCodeInDev = false;
 let currentHookNameInDev: ?string;
 
 function resolveCurrentlyRenderingComponent(): Object {
-  invariant(
-    currentlyRenderingComponent !== null,
-    'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
-      ' one of the following reasons:\n' +
-      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
-      '2. You might be breaking the Rules of Hooks\n' +
-      '3. You might have more than one copy of React in the same app\n' +
-      'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
-  );
+  if (currentlyRenderingComponent === null) {
+    throw new Error(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+  }
+
   if (__DEV__) {
     if (isInHookUserCodeInDev) {
       console.error(
@@ -127,7 +128,7 @@ function areHookInputsEqual(
 
 function createHook(): Hook {
   if (numberOfReRenders > 0) {
-    invariant(false, 'Rendered more hooks than during the previous render');
+    throw new Error('Rendered more hooks than during the previous render');
   }
   return {
     memoizedState: null,
@@ -216,7 +217,7 @@ export function resetHooksState(): void {
 }
 
 function getCacheForType<T>(resourceType: () => T): T {
-  invariant(false, 'Not implemented.');
+  throw new Error('Not implemented.');
 }
 
 function readContext<T>(context: ReactContext<T>): T {
@@ -423,11 +424,12 @@ function dispatchAction<A>(
   queue: UpdateQueue<A>,
   action: A,
 ) {
-  invariant(
-    numberOfReRenders < RE_RENDER_LIMIT,
-    'Too many re-renders. React limits the number of renders to prevent ' +
-      'an infinite loop.',
-  );
+  if (numberOfReRenders >= RE_RENDER_LIMIT) {
+    throw new Error(
+      'Too many re-renders. React limits the number of renders to prevent ' +
+        'an infinite loop.',
+    );
+  }
 
   if (componentIdentity === currentlyRenderingComponent) {
     // This is a render phase update. Stash it in a lazily-created map of
@@ -484,8 +486,7 @@ function useSyncExternalStore<T>(
   getServerSnapshot?: () => T,
 ): T {
   if (getServerSnapshot === undefined) {
-    invariant(
-      false,
+    throw new Error(
       'Missing getServerSnapshot, which is required for ' +
         'server-rendered content. Will revert to client rendering.',
     );
@@ -515,7 +516,7 @@ function useOpaqueIdentifier(): OpaqueIDType {
 }
 
 function useCacheRefresh(): <T>(?() => T, ?T) => void {
-  invariant(false, 'Not implemented.');
+  throw new Error('Not implemented.');
 }
 
 function noop(): void {}
diff --git a/packages/react-dom/src/server/ReactThreadIDAllocator.js b/packages/react-dom/src/server/ReactThreadIDAllocator.js
index 5f4ab5b600006..fabf9fef98843 100644
--- a/packages/react-dom/src/server/ReactThreadIDAllocator.js
+++ b/packages/react-dom/src/server/ReactThreadIDAllocator.js
@@ -11,8 +11,6 @@
 // indices can be used to reference a tightly packed array. As opposed to being used in a Map.
 // The first allocated index is 1.
 
-import invariant from 'shared/invariant';
-
 export type ThreadID = number;
 
 let nextAvailableThreadIDs = new Uint16Array(16);
@@ -25,13 +23,16 @@ function growThreadCountAndReturnNextAvailable() {
   const oldArray = nextAvailableThreadIDs;
   const oldSize = oldArray.length;
   const newSize = oldSize * 2;
-  invariant(
-    newSize <= 0x10000,
-    'Maximum number of concurrent React renderers exceeded. ' +
-      'This can happen if you are not properly destroying the Readable provided by React. ' +
-      'Ensure that you call .destroy() on it if you no longer want to read from it, ' +
-      'and did not read to the end. If you use .pipe() this should be automatic.',
-  );
+
+  if (newSize > 0x10000) {
+    throw new Error(
+      'Maximum number of concurrent React renderers exceeded. ' +
+        'This can happen if you are not properly destroying the Readable provided by React. ' +
+        'Ensure that you call .destroy() on it if you no longer want to read from it, ' +
+        'and did not read to the end. If you use .pipe() this should be automatic.',
+    );
+  }
+
   const newArray = new Uint16Array(newSize);
   newArray.set(oldArray);
   nextAvailableThreadIDs = newArray;
diff --git a/packages/react-dom/src/shared/assertValidProps.js b/packages/react-dom/src/shared/assertValidProps.js
index 26ed1cd958175..762ebfd91ef08 100644
--- a/packages/react-dom/src/shared/assertValidProps.js
+++ b/packages/react-dom/src/shared/assertValidProps.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 import voidElementTags from './voidElementTags';
 
 const HTML = '__html';
@@ -17,25 +15,30 @@ function assertValidProps(tag: string, props: ?Object) {
   }
   // Note the use of `==` which checks for null or undefined.
   if (voidElementTags[tag]) {
-    invariant(
-      props.children == null && props.dangerouslySetInnerHTML == null,
-      '%s is a void element tag and must neither have `children` nor ' +
-        'use `dangerouslySetInnerHTML`.',
-      tag,
-    );
+    if (props.children != null || props.dangerouslySetInnerHTML != null) {
+      throw new Error(
+        `${tag} is a void element tag and must neither have \`children\` nor ` +
+          'use `dangerouslySetInnerHTML`.',
+      );
+    }
   }
   if (props.dangerouslySetInnerHTML != null) {
-    invariant(
-      props.children == null,
-      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
-    );
-    invariant(
-      typeof props.dangerouslySetInnerHTML === 'object' &&
-        HTML in props.dangerouslySetInnerHTML,
-      '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
-        'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
-        'for more information.',
-    );
+    if (props.children != null) {
+      throw new Error(
+        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+      );
+    }
+
+    if (
+      typeof props.dangerouslySetInnerHTML !== 'object' ||
+      !(HTML in props.dangerouslySetInnerHTML)
+    ) {
+      throw new Error(
+        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+          'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
+          'for more information.',
+      );
+    }
   }
   if (__DEV__) {
     if (
@@ -51,12 +54,14 @@ function assertValidProps(tag: string, props: ?Object) {
       );
     }
   }
-  invariant(
-    props.style == null || typeof props.style === 'object',
-    'The `style` prop expects a mapping from style properties to values, ' +
-      "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
-      'using JSX.',
-  );
+
+  if (props.style != null && typeof props.style !== 'object') {
+    throw new Error(
+      'The `style` prop expects a mapping from style properties to values, ' +
+        "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
+        'using JSX.',
+    );
+  }
 }
 
 export default assertValidProps;
diff --git a/packages/react-dom/src/shared/sanitizeURL.js b/packages/react-dom/src/shared/sanitizeURL.js
index 81d54478a9d76..0f3b988332890 100644
--- a/packages/react-dom/src/shared/sanitizeURL.js
+++ b/packages/react-dom/src/shared/sanitizeURL.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import {disableJavaScriptURLs} from 'shared/ReactFeatureFlags';
 
 // A javascript: URL can contain leading C0 control or \u0020 SPACE,
@@ -26,10 +25,11 @@ let didWarn = false;
 
 function sanitizeURL(url: string) {
   if (disableJavaScriptURLs) {
-    invariant(
-      !isJavaScriptProtocol.test(url),
-      'React has blocked a javascript: URL as a security precaution.',
-    );
+    if (isJavaScriptProtocol.test(url)) {
+      throw new Error(
+        'React has blocked a javascript: URL as a security precaution.',
+      );
+    }
   } else if (__DEV__) {
     if (!didWarn && isJavaScriptProtocol.test(url)) {
       didWarn = true;
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index da0d16ade6a09..1aadc90b250a8 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -16,7 +16,6 @@ import {
   HostText,
 } from 'react-reconciler/src/ReactWorkTags';
 import {SyntheticEvent} from '../events/SyntheticEvent';
-import invariant from 'shared/invariant';
 import {ELEMENT_NODE} from '../shared/HTMLNodeType';
 import {
   rethrowCaughtError,
@@ -105,12 +104,10 @@ function validateClassInstance(inst, methodName) {
   } else {
     received = stringified;
   }
-  invariant(
-    false,
-    '%s(...): the first argument must be a React class instance. ' +
-      'Instead received: %s.',
-    methodName,
-    received,
+
+  throw new Error(
+    `${methodName}(...): the first argument must be a React class instance. ` +
+      `Instead received: ${received}.`,
   );
 }
 
@@ -197,11 +194,13 @@ function scryRenderedDOMComponentsWithClass(root, classNames) {
       const classList = className.split(/\s+/);
 
       if (!isArray(classNames)) {
-        invariant(
-          classNames !== undefined,
-          'TestUtils.scryRenderedDOMComponentsWithClass expects a ' +
-            'className as a second argument.',
-        );
+        if (classNames === undefined) {
+          throw new Error(
+            'TestUtils.scryRenderedDOMComponentsWithClass expects a ' +
+              'className as a second argument.',
+          );
+        }
+
         classNames = classNames.split(/\s+/);
       }
       return classNames.every(function(name) {
@@ -478,12 +477,13 @@ function getListener(inst: Fiber, registrationName: string) {
   if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
     return null;
   }
-  invariant(
-    !listener || typeof listener === 'function',
-    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
-    registrationName,
-    typeof listener,
-  );
+
+  if (listener && typeof listener !== 'function') {
+    throw new Error(
+      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
+    );
+  }
+
   return listener;
 }
 
@@ -564,17 +564,20 @@ const directDispatchEventTypes = new Set([
  */
 function makeSimulator(eventType) {
   return function(domNode, eventData) {
-    invariant(
-      !React.isValidElement(domNode),
-      'TestUtils.Simulate expected a DOM node as the first argument but received ' +
-        'a React element. Pass the DOM node you wish to simulate the event on instead. ' +
-        'Note that TestUtils.Simulate will not work if you are using shallow rendering.',
-    );
-    invariant(
-      !isCompositeComponent(domNode),
-      'TestUtils.Simulate expected a DOM node as the first argument but received ' +
-        'a component instance. Pass the DOM node you wish to simulate the event on instead.',
-    );
+    if (React.isValidElement(domNode)) {
+      throw new Error(
+        'TestUtils.Simulate expected a DOM node as the first argument but received ' +
+          'a React element. Pass the DOM node you wish to simulate the event on instead. ' +
+          'Note that TestUtils.Simulate will not work if you are using shallow rendering.',
+      );
+    }
+
+    if (isCompositeComponent(domNode)) {
+      throw new Error(
+        'TestUtils.Simulate expected a DOM node as the first argument but received ' +
+          'a component instance. Pass the DOM node you wish to simulate the event on instead.',
+      );
+    }
 
     const reactName = 'on' + eventType[0].toUpperCase() + eventType.slice(1);
     const fakeNativeEvent = new Event();
diff --git a/packages/react-fetch/src/ReactFetchBrowser.js b/packages/react-fetch/src/ReactFetchBrowser.js
index fbf5b50b2f29e..41df29c8afcc2 100644
--- a/packages/react-fetch/src/ReactFetchBrowser.js
+++ b/packages/react-fetch/src/ReactFetchBrowser.js
@@ -129,6 +129,7 @@ function preloadRecord(url: string, options: mixed): Record {
       if (options.method || options.body || options.signal) {
         // TODO: wire up our own cancellation mechanism.
         // TODO: figure out what to do with POST.
+        // eslint-disable-next-line react-internal/prod-error-codes
         throw Error('Unsupported option');
       }
     }
diff --git a/packages/react-fetch/src/ReactFetchNode.js b/packages/react-fetch/src/ReactFetchNode.js
index 727c43abec415..2b1ef5f200cb1 100644
--- a/packages/react-fetch/src/ReactFetchNode.js
+++ b/packages/react-fetch/src/ReactFetchNode.js
@@ -177,6 +177,7 @@ function preloadRecord(url: string, options: mixed): Record<FetchResponse> {
       if (options.method || options.body || options.signal) {
         // TODO: wire up our own cancellation mechanism.
         // TODO: figure out what to do with POST.
+        // eslint-disable-next-line react-internal/prod-error-codes
         throw Error('Unsupported option');
       }
     }
diff --git a/packages/react-native-renderer/src/ReactFabricComponentTree.js b/packages/react-native-renderer/src/ReactFabricComponentTree.js
index 5d62539be6b84..47e60e7f6779d 100644
--- a/packages/react-native-renderer/src/ReactFabricComponentTree.js
+++ b/packages/react-native-renderer/src/ReactFabricComponentTree.js
@@ -5,18 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 function getInstanceFromInstance(instanceHandle) {
   return instanceHandle;
 }
 
 function getTagFromInstance(inst) {
   const nativeInstance = inst.stateNode.canonical;
-  invariant(
-    nativeInstance._nativeTag,
-    'All native instances should have a tag.',
-  );
+
+  if (!nativeInstance._nativeTag) {
+    throw new Error('All native instances should have a tag.');
+  }
+
   return nativeInstance;
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
index f63d21199fc66..212b181c08294 100644
--- a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
+++ b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
@@ -10,7 +10,6 @@
 import type {AnyNativeEvent} from './legacy-events/PluginModuleType';
 import type {TopLevelType} from './legacy-events/TopLevelEventTypes';
 import SyntheticEvent from './legacy-events/SyntheticEvent';
-import invariant from 'shared/invariant';
 
 // Module provided by RN:
 import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
@@ -148,11 +147,14 @@ const ReactNativeBridgeEventPlugin = {
     }
     const bubbleDispatchConfig = customBubblingEventTypes[topLevelType];
     const directDispatchConfig = customDirectEventTypes[topLevelType];
-    invariant(
-      bubbleDispatchConfig || directDispatchConfig,
-      'Unsupported top level event type "%s" dispatched',
-      topLevelType,
-    );
+
+    if (!bubbleDispatchConfig && !directDispatchConfig) {
+      throw new Error(
+        // $FlowFixMe - Flow doesn't like this string coercion because DOMTopLevelEventType is opaque
+        `Unsupported top level event type "${topLevelType}" dispatched`,
+      );
+    }
+
     const event = SyntheticEvent.getPooled(
       bubbleDispatchConfig || directDispatchConfig,
       targetInst,
diff --git a/packages/react-native-renderer/src/ReactNativeComponentTree.js b/packages/react-native-renderer/src/ReactNativeComponentTree.js
index 23748937e2ace..c0f21b875a82f 100644
--- a/packages/react-native-renderer/src/ReactNativeComponentTree.js
+++ b/packages/react-native-renderer/src/ReactNativeComponentTree.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 const instanceCache = new Map();
 const instanceProps = new Map();
 
@@ -30,7 +28,11 @@ function getTagFromInstance(inst) {
     nativeInstance = nativeInstance.canonical;
     tag = nativeInstance._nativeTag;
   }
-  invariant(tag, 'All native instances should have a tag.');
+
+  if (!tag) {
+    throw new Error('All native instances should have a tag.');
+  }
+
   return nativeInstance;
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
index 9579384ef5e97..a0f543a9c4e43 100644
--- a/packages/react-native-renderer/src/ReactNativeFiberInspector.js
+++ b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
@@ -16,7 +16,6 @@ import {
 } from 'react-reconciler/src/ReactFiberTreeReflection';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
-import invariant from 'shared/invariant';
 // Module provided by RN:
 import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 import {enableGetInspectorDataForInstanceInProduction} from 'shared/ReactFeatureFlags';
@@ -250,8 +249,7 @@ if (__DEV__) {
   };
 } else {
   getInspectorDataForViewTag = () => {
-    invariant(
-      false,
+    throw new Error(
       'getInspectorDataForViewTag() is not available in production',
     );
   };
@@ -263,8 +261,7 @@ if (__DEV__) {
     locationY: number,
     callback: (viewData: TouchedViewDataAtPoint) => mixed,
   ): void => {
-    invariant(
-      false,
+    throw new Error(
       'getInspectorDataForViewAtPoint() is not available in production.',
     );
   };
diff --git a/packages/react-native-renderer/src/ReactNativeGetListener.js b/packages/react-native-renderer/src/ReactNativeGetListener.js
index 8a3476f9a6ad0..4f76fddd29e7b 100644
--- a/packages/react-native-renderer/src/ReactNativeGetListener.js
+++ b/packages/react-native-renderer/src/ReactNativeGetListener.js
@@ -8,7 +8,6 @@
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
-import invariant from 'shared/invariant';
 import {getFiberCurrentPropsFromNode} from './legacy-events/EventPluginUtils';
 
 export default function getListener(
@@ -26,11 +25,12 @@ export default function getListener(
     return null;
   }
   const listener = props[registrationName];
-  invariant(
-    !listener || typeof listener === 'function',
-    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
-    registrationName,
-    typeof listener,
-  );
+
+  if (listener && typeof listener !== 'function') {
+    throw new Error(
+      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
+    );
+  }
+
   return listener;
 }
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 205f8189b7a7c..769f46e852a2f 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -9,8 +9,6 @@
 
 import type {TouchedViewDataAtPoint} from './ReactNativeTypes';
 
-import invariant from 'shared/invariant';
-
 // Modules provided by RN:
 import {
   ReactNativeViewConfigRegistry,
@@ -147,10 +145,9 @@ export function createTextInstance(
   hostContext: HostContext,
   internalInstanceHandle: Object,
 ): TextInstance {
-  invariant(
-    hostContext.isInAParentText,
-    'Text strings must be rendered within a <Text> component.',
-  );
+  if (!hostContext.isInAParentText) {
+    throw new Error('Text strings must be rendered within a <Text> component.');
+  }
 
   const tag = allocateTag();
 
@@ -411,10 +408,9 @@ export function insertInContainerBefore(
   // We create a wrapper object for the container in ReactNative render()
   // Or we refactor to remove wrapper objects entirely.
   // For more info on pros/cons see PR #8560 description.
-  invariant(
-    typeof parentInstance !== 'number',
-    'Container does not support insertBefore operation',
-  );
+  if (typeof parentInstance === 'number') {
+    throw new Error('Container does not support insertBefore operation');
+  }
 }
 
 export function removeChild(
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
index ee3c7df98508d..d4218ab247347 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -11,8 +11,6 @@
 
 // Mock of the Native Hooks
 
-import invariant from 'shared/invariant';
-
 const roots = new Map();
 const allocatedTags = new Set();
 
@@ -54,11 +52,10 @@ const RCTFabricUIManager = {
     props,
     eventTarget,
   ) {
-    invariant(
-      !allocatedTags.has(reactTag),
-      'Created two native views with tag %s',
-      reactTag,
-    );
+    if (allocatedTags.has(reactTag)) {
+      throw new Error(`Created two native views with tag ${reactTag}`);
+    }
+
     allocatedTags.add(reactTag);
     return {
       reactTag: reactTag,
@@ -127,27 +124,29 @@ const RCTFabricUIManager = {
   registerEventHandler: jest.fn(function registerEventHandler(callback) {}),
 
   measure: jest.fn(function measure(node, callback) {
-    invariant(
-      typeof node === 'object',
-      'Expected node to be an object, was passed "%s"',
-      typeof node,
-    );
-    invariant(
-      typeof node.viewName === 'string',
-      'Expected node to be a host node.',
-    );
+    if (typeof node !== 'object') {
+      throw new Error(
+        `Expected node to be an object, was passed "${typeof node}"`,
+      );
+    }
+
+    if (typeof node.viewName !== 'string') {
+      throw new Error('Expected node to be a host node.');
+    }
+
     callback(10, 10, 100, 100, 0, 0);
   }),
   measureInWindow: jest.fn(function measureInWindow(node, callback) {
-    invariant(
-      typeof node === 'object',
-      'Expected node to be an object, was passed "%s"',
-      typeof node,
-    );
-    invariant(
-      typeof node.viewName === 'string',
-      'Expected node to be a host node.',
-    );
+    if (typeof node !== 'object') {
+      throw new Error(
+        `Expected node to be an object, was passed "${typeof node}"`,
+      );
+    }
+
+    if (typeof node.viewName !== 'string') {
+      throw new Error('Expected node to be a host node.');
+    }
+
     callback(10, 10, 100, 100);
   }),
   measureLayout: jest.fn(function measureLayout(
@@ -156,24 +155,26 @@ const RCTFabricUIManager = {
     fail,
     success,
   ) {
-    invariant(
-      typeof node === 'object',
-      'Expected node to be an object, was passed "%s"',
-      typeof node,
-    );
-    invariant(
-      typeof node.viewName === 'string',
-      'Expected node to be a host node.',
-    );
-    invariant(
-      typeof relativeNode === 'object',
-      'Expected relative node to be an object, was passed "%s"',
-      typeof relativeNode,
-    );
-    invariant(
-      typeof relativeNode.viewName === 'string',
-      'Expected relative node to be a host node.',
-    );
+    if (typeof node !== 'object') {
+      throw new Error(
+        `Expected node to be an object, was passed "${typeof node}"`,
+      );
+    }
+
+    if (typeof node.viewName !== 'string') {
+      throw new Error('Expected node to be a host node.');
+    }
+
+    if (typeof relativeNode !== 'object') {
+      throw new Error(
+        `Expected relative node to be an object, was passed "${typeof relativeNode}"`,
+      );
+    }
+
+    if (typeof relativeNode.viewName !== 'string') {
+      throw new Error('Expected relative node to be a host node.');
+    }
+
     success(1, 1, 100, 100);
   }),
   setIsJSResponder: jest.fn(),
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
index 39813814dae1c..ce0975ea950a5 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
@@ -16,8 +16,6 @@ import type {
   ViewConfigGetter,
 } from './ReactNativeTypes';
 
-import invariant from 'shared/invariant';
-
 // Event configs
 const customBubblingEventTypes = {};
 const customDirectEventTypes = {};
@@ -38,11 +36,11 @@ function processEventTypes(
   if (__DEV__) {
     if (bubblingEventTypes != null && directEventTypes != null) {
       for (const topLevelType in directEventTypes) {
-        invariant(
-          bubblingEventTypes[topLevelType] == null,
-          'Event cannot be both direct and bubbling: %s',
-          topLevelType,
-        );
+        if (bubblingEventTypes[topLevelType] != null) {
+          throw new Error(
+            `Event cannot be both direct and bubbling: ${topLevelType}`,
+          );
+        }
       }
     }
   }
@@ -73,17 +71,18 @@ function processEventTypes(
  * This is done to avoid causing Prepack deopts.
  */
 exports.register = function(name: string, callback: ViewConfigGetter): string {
-  invariant(
-    !viewConfigCallbacks.has(name),
-    'Tried to register two views with the same name %s',
-    name,
-  );
-  invariant(
-    typeof callback === 'function',
-    'View config getter callback for component `%s` must be a function (received `%s`)',
-    name,
-    callback === null ? 'null' : typeof callback,
-  );
+  if (viewConfigCallbacks.has(name)) {
+    throw new Error(`Tried to register two views with the same name ${name}`);
+  }
+
+  if (typeof callback !== 'function') {
+    throw new Error(
+      `View config getter callback for component \`${name}\` must be a function (received \`${
+        callback === null ? 'null' : typeof callback
+      }\`)`,
+    );
+  }
+
   viewConfigCallbacks.set(name, callback);
   return name;
 };
@@ -98,14 +97,14 @@ exports.get = function(name: string): ReactNativeBaseComponentViewConfig<> {
   if (!viewConfigs.has(name)) {
     const callback = viewConfigCallbacks.get(name);
     if (typeof callback !== 'function') {
-      invariant(
-        false,
-        'View config getter callback for component `%s` must be a function (received `%s`).%s',
-        name,
-        callback === null ? 'null' : typeof callback,
-        typeof name[0] === 'string' && /[a-z]/.test(name[0])
-          ? ' Make sure to start component names with a capital letter.'
-          : '',
+      throw new Error(
+        `View config getter callback for component \`${name}\` must be a function (received \`${
+          callback === null ? 'null' : typeof callback
+        }\`).${
+          typeof name[0] === 'string' && /[a-z]/.test(name[0])
+            ? ' Make sure to start component names with a capital letter.'
+            : ''
+        }`,
       );
     }
     viewConfig = callback();
@@ -118,6 +117,10 @@ exports.get = function(name: string): ReactNativeBaseComponentViewConfig<> {
   } else {
     viewConfig = viewConfigs.get(name);
   }
-  invariant(viewConfig, 'View config not found for name %s', name);
+
+  if (!viewConfig) {
+    throw new Error(`View config not found for name ${name}`);
+  }
+
   return viewConfig;
 };
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
index 245eecc4dc7ea..346c4aa45c5f5 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
@@ -11,8 +11,6 @@
 
 // Mock of the Native Hooks
 
-import invariant from 'shared/invariant';
-
 // Map of viewTag -> {children: [childTag], parent: ?parentTag}
 const roots = [];
 const views = new Map();
@@ -33,18 +31,21 @@ function autoCreateRoot(tag) {
 function insertSubviewAtIndex(parent, child, index) {
   const parentInfo = views.get(parent);
   const childInfo = views.get(child);
-  invariant(
-    childInfo.parent === null,
-    'Inserting view %s %s which already has parent',
-    child,
-    JSON.stringify(childInfo.props),
-  );
-  invariant(
-    0 <= index && index <= parentInfo.children.length,
-    'Invalid index %s for children %s',
-    index,
-    parentInfo.children,
-  );
+
+  if (childInfo.parent !== null) {
+    throw new Error(
+      `Inserting view ${child} ${JSON.stringify(
+        childInfo.props,
+      )} which already has parent`,
+    );
+  }
+
+  if (0 > index || index > parentInfo.children.length) {
+    throw new Error(
+      `Invalid index ${index} for children ${parentInfo.children}`,
+    );
+  }
+
   parentInfo.children.splice(index, 0, child);
   childInfo.parent = parent;
 }
@@ -53,7 +54,11 @@ function removeChild(parent, child) {
   const parentInfo = views.get(parent);
   const childInfo = views.get(child);
   const index = parentInfo.children.indexOf(child);
-  invariant(index >= 0, 'Missing view %s during removal', child);
+
+  if (index < 0) {
+    throw new Error(`Missing view ${child} during removal`);
+  }
+
   parentInfo.children.splice(index, 1);
   childInfo.parent = null;
 }
@@ -75,11 +80,10 @@ const RCTUIManager = {
   },
   clearJSResponder: jest.fn(),
   createView: jest.fn(function createView(reactTag, viewName, rootTag, props) {
-    invariant(
-      !views.has(reactTag),
-      'Created two native views with tag %s',
-      reactTag,
-    );
+    if (views.has(reactTag)) {
+      throw new Error(`Created two native views with tag ${reactTag}`);
+    }
+
     views.set(reactTag, {
       children: [],
       parent: null,
@@ -92,12 +96,12 @@ const RCTUIManager = {
   setJSResponder: jest.fn(),
   setChildren: jest.fn(function setChildren(parentTag, reactTags) {
     autoCreateRoot(parentTag);
+
     // Native doesn't actually check this but it seems like a good idea
-    invariant(
-      views.get(parentTag).children.length === 0,
-      'Calling .setChildren on nonempty view %s',
-      parentTag,
-    );
+    if (views.get(parentTag).children.length !== 0) {
+      throw new Error(`Calling .setChildren on nonempty view ${parentTag}`);
+    }
+
     // This logic ported from iOS (RCTUIManager.m)
     reactTags.forEach((tag, i) => {
       insertSubviewAtIndex(parentTag, tag, i);
@@ -112,19 +116,20 @@ const RCTUIManager = {
     removeAtIndices = [],
   ) {
     autoCreateRoot(parentTag);
+
     // This logic ported from iOS (RCTUIManager.m)
-    invariant(
-      moveFromIndices.length === moveToIndices.length,
-      'Mismatched move indices %s and %s',
-      moveFromIndices,
-      moveToIndices,
-    );
-    invariant(
-      addChildReactTags.length === addAtIndices.length,
-      'Mismatched add indices %s and %s',
-      addChildReactTags,
-      addAtIndices,
-    );
+    if (moveFromIndices.length !== moveToIndices.length) {
+      throw new Error(
+        `Mismatched move indices ${moveFromIndices} and ${moveToIndices}`,
+      );
+    }
+
+    if (addChildReactTags.length !== addAtIndices.length) {
+      throw new Error(
+        `Mismatched add indices ${addChildReactTags} and ${addAtIndices}`,
+      );
+    }
+
     const parentInfo = views.get(parentTag);
     const permanentlyRemovedChildren = removeAtIndices.map(
       index => parentInfo.children[index],
@@ -157,19 +162,17 @@ const RCTUIManager = {
   }),
   replaceExistingNonRootView: jest.fn(),
   measure: jest.fn(function measure(tag, callback) {
-    invariant(
-      typeof tag === 'number',
-      'Expected tag to be a number, was passed %s',
-      tag,
-    );
+    if (typeof tag !== 'number') {
+      throw new Error(`Expected tag to be a number, was passed ${tag}`);
+    }
+
     callback(10, 10, 100, 100, 0, 0);
   }),
   measureInWindow: jest.fn(function measureInWindow(tag, callback) {
-    invariant(
-      typeof tag === 'number',
-      'Expected tag to be a number, was passed %s',
-      tag,
-    );
+    if (typeof tag !== 'number') {
+      throw new Error(`Expected tag to be a number, was passed ${tag}`);
+    }
+
     callback(10, 10, 100, 100);
   }),
   measureLayout: jest.fn(function measureLayout(
@@ -178,16 +181,16 @@ const RCTUIManager = {
     fail,
     success,
   ) {
-    invariant(
-      typeof tag === 'number',
-      'Expected tag to be a number, was passed %s',
-      tag,
-    );
-    invariant(
-      typeof relativeTag === 'number',
-      'Expected relativeTag to be a number, was passed %s',
-      relativeTag,
-    );
+    if (typeof tag !== 'number') {
+      throw new Error(`Expected tag to be a number, was passed ${tag}`);
+    }
+
+    if (typeof relativeTag !== 'number') {
+      throw new Error(
+        `Expected relativeTag to be a number, was passed ${relativeTag}`,
+      );
+    }
+
     success(1, 1, 100, 100);
   }),
   __takeSnapshot: jest.fn(),
diff --git a/packages/react-native-renderer/src/legacy-events/EventBatching.js b/packages/react-native-renderer/src/legacy-events/EventBatching.js
index bffc978ad6e21..22e20298c5a9f 100644
--- a/packages/react-native-renderer/src/legacy-events/EventBatching.js
+++ b/packages/react-native-renderer/src/legacy-events/EventBatching.js
@@ -6,7 +6,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import {rethrowCaughtError} from 'shared/ReactErrorUtils';
 
 import type {ReactSyntheticEvent} from './ReactSyntheticEventType';
@@ -56,11 +55,14 @@ export function runEventsInBatch(
   }
 
   forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);
-  invariant(
-    !eventQueue,
-    'processEventQueue(): Additional events were enqueued while processing ' +
-      'an event queue. Support for this has not yet been implemented.',
-  );
+
+  if (eventQueue) {
+    throw new Error(
+      'processEventQueue(): Additional events were enqueued while processing ' +
+        'an event queue. Support for this has not yet been implemented.',
+    );
+  }
+
   // This would be a good time to rethrow if any of the event handlers threw.
   rethrowCaughtError();
 }
diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js
index ee3d9c53a37e1..3737d2c073b61 100644
--- a/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js
+++ b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js
@@ -14,8 +14,6 @@ import type {
   LegacyPluginModule,
 } from './PluginModuleType';
 
-import invariant from 'shared/invariant';
-
 type NamesToPlugins = {
   [key: PluginName]: LegacyPluginModule<AnyNativeEvent>,
   ...,
@@ -45,34 +43,39 @@ function recomputePluginOrdering(): void {
   for (const pluginName in namesToPlugins) {
     const pluginModule = namesToPlugins[pluginName];
     const pluginIndex = eventPluginOrder.indexOf(pluginName);
-    invariant(
-      pluginIndex > -1,
-      'EventPluginRegistry: Cannot inject event plugins that do not exist in ' +
-        'the plugin ordering, `%s`.',
-      pluginName,
-    );
+
+    if (pluginIndex <= -1) {
+      throw new Error(
+        'EventPluginRegistry: Cannot inject event plugins that do not exist in ' +
+          `the plugin ordering, \`${pluginName}\`.`,
+      );
+    }
+
     if (plugins[pluginIndex]) {
       continue;
     }
-    invariant(
-      pluginModule.extractEvents,
-      'EventPluginRegistry: Event plugins must implement an `extractEvents` ' +
-        'method, but `%s` does not.',
-      pluginName,
-    );
+
+    if (!pluginModule.extractEvents) {
+      throw new Error(
+        'EventPluginRegistry: Event plugins must implement an `extractEvents` ' +
+          `method, but \`${pluginName}\` does not.`,
+      );
+    }
+
     plugins[pluginIndex] = pluginModule;
     const publishedEvents = pluginModule.eventTypes;
     for (const eventName in publishedEvents) {
-      invariant(
-        publishEventForPlugin(
+      if (
+        !publishEventForPlugin(
           publishedEvents[eventName],
           pluginModule,
           eventName,
-        ),
-        'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.',
-        eventName,
-        pluginName,
-      );
+        )
+      ) {
+        throw new Error(
+          `EventPluginRegistry: Failed to publish event \`${eventName}\` for plugin \`${pluginName}\`.`,
+        );
+      }
     }
   }
 }
@@ -90,12 +93,13 @@ function publishEventForPlugin(
   pluginModule: LegacyPluginModule<AnyNativeEvent>,
   eventName: string,
 ): boolean {
-  invariant(
-    !eventNameDispatchConfigs.hasOwnProperty(eventName),
-    'EventPluginRegistry: More than one plugin attempted to publish the same ' +
-      'event name, `%s`.',
-    eventName,
-  );
+  if (eventNameDispatchConfigs.hasOwnProperty(eventName)) {
+    throw new Error(
+      'EventPluginRegistry: More than one plugin attempted to publish the same ' +
+        `event name, \`${eventName}\`.`,
+    );
+  }
+
   eventNameDispatchConfigs[eventName] = dispatchConfig;
 
   const phasedRegistrationNames = dispatchConfig.phasedRegistrationNames;
@@ -134,12 +138,13 @@ function publishRegistrationName(
   pluginModule: LegacyPluginModule<AnyNativeEvent>,
   eventName: string,
 ): void {
-  invariant(
-    !registrationNameModules[registrationName],
-    'EventPluginRegistry: More than one plugin attempted to publish the same ' +
-      'registration name, `%s`.',
-    registrationName,
-  );
+  if (registrationNameModules[registrationName]) {
+    throw new Error(
+      'EventPluginRegistry: More than one plugin attempted to publish the same ' +
+        `registration name, \`${registrationName}\`.`,
+    );
+  }
+
   registrationNameModules[registrationName] = pluginModule;
   registrationNameDependencies[registrationName] =
     pluginModule.eventTypes[eventName].dependencies;
@@ -198,11 +203,13 @@ export const possibleRegistrationNames = __DEV__ ? {} : (null: any);
 export function injectEventPluginOrder(
   injectedEventPluginOrder: EventPluginOrder,
 ): void {
-  invariant(
-    !eventPluginOrder,
-    'EventPluginRegistry: Cannot inject event plugin ordering more than ' +
-      'once. You are likely trying to load more than one copy of React.',
-  );
+  if (eventPluginOrder) {
+    throw new Error(
+      'EventPluginRegistry: Cannot inject event plugin ordering more than ' +
+        'once. You are likely trying to load more than one copy of React.',
+    );
+  }
+
   // Clone the ordering so it cannot be dynamically mutated.
   eventPluginOrder = Array.prototype.slice.call(injectedEventPluginOrder);
   recomputePluginOrdering();
@@ -230,12 +237,13 @@ export function injectEventPluginsByName(
       !namesToPlugins.hasOwnProperty(pluginName) ||
       namesToPlugins[pluginName] !== pluginModule
     ) {
-      invariant(
-        !namesToPlugins[pluginName],
-        'EventPluginRegistry: Cannot inject two different event plugins ' +
-          'using the same name, `%s`.',
-        pluginName,
-      );
+      if (namesToPlugins[pluginName]) {
+        throw new Error(
+          'EventPluginRegistry: Cannot inject two different event plugins ' +
+            `using the same name, \`${pluginName}\`.`,
+        );
+      }
+
       namesToPlugins[pluginName] = pluginModule;
       isOrderingDirty = true;
     }
diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
index 381ebafc59bb3..382656992addf 100644
--- a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
+++ b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
@@ -6,7 +6,6 @@
  */
 
 import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 export let getFiberCurrentPropsFromNode = null;
@@ -150,10 +149,11 @@ export function executeDirectDispatch(event) {
   }
   const dispatchListener = event._dispatchListeners;
   const dispatchInstance = event._dispatchInstances;
-  invariant(
-    !isArray(dispatchListener),
-    'executeDirectDispatch(...): Invalid `event`.',
-  );
+
+  if (isArray(dispatchListener)) {
+    throw new Error('executeDirectDispatch(...): Invalid `event`.');
+  }
+
   event.currentTarget = dispatchListener
     ? getNodeFromInstance(dispatchInstance)
     : null;
diff --git a/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js b/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js
index 78bef3bbcee99..2b3cbb347882c 100644
--- a/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js
+++ b/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js
@@ -29,7 +29,6 @@ import {
 import accumulateInto from './accumulateInto';
 import forEachAccumulated from './forEachAccumulated';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
-import invariant from 'shared/invariant';
 
 /**
  * Instance of element that should respond to touch/move types of interactions,
@@ -249,12 +248,13 @@ function getListener(inst, registrationName) {
     return null;
   }
   const listener = props[registrationName];
-  invariant(
-    !listener || typeof listener === 'function',
-    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
-    registrationName,
-    typeof listener,
-  );
+
+  if (listener && typeof listener !== 'function') {
+    throw new Error(
+      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
+    );
+  }
+
   return listener;
 }
 
diff --git a/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
index 24d35b52a45d0..af63b1fb21e20 100644
--- a/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
+++ b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 import {isStartish, isMoveish, isEndish} from './ResponderTopLevelEventTypes';
 
 /**
@@ -94,7 +92,10 @@ function resetTouchRecord(touchRecord: TouchRecord, touch: Touch): void {
 }
 
 function getTouchIdentifier({identifier}: Touch): number {
-  invariant(identifier != null, 'Touch object is missing identifier.');
+  if (identifier == null) {
+    throw new Error('Touch object is missing identifier.');
+  }
+
   if (__DEV__) {
     if (identifier > MAX_TOUCH_BANK) {
       console.error(
diff --git a/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js b/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
index 329d89ec9f7d2..84d39bbd603d2 100644
--- a/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
+++ b/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
@@ -7,8 +7,6 @@
 
 /* eslint valid-typeof: 0 */
 
-import invariant from 'shared/invariant';
-
 const EVENT_POOL_SIZE = 10;
 
 /**
@@ -325,10 +323,13 @@ function createOrGetPooledEvent(
 
 function releasePooledEvent(event) {
   const EventConstructor = this;
-  invariant(
-    event instanceof EventConstructor,
-    'Trying to release an event instance into a pool of a different type.',
-  );
+
+  if (!(event instanceof EventConstructor)) {
+    throw new Error(
+      'Trying to release an event instance into a pool of a different type.',
+    );
+  }
+
   event.destructor();
   if (EventConstructor.eventPool.length < EVENT_POOL_SIZE) {
     EventConstructor.eventPool.push(event);
diff --git a/packages/react-native-renderer/src/legacy-events/accumulate.js b/packages/react-native-renderer/src/legacy-events/accumulate.js
index af4da853934b0..0e19adc919e57 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulate.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulate.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 /**
@@ -21,10 +20,11 @@ function accumulate<T>(
   current: ?(T | Array<T>),
   next: T | Array<T>,
 ): T | Array<T> {
-  invariant(
-    next != null,
-    'accumulate(...): Accumulated items must not be null or undefined.',
-  );
+  if (next == null) {
+    throw new Error(
+      'accumulate(...): Accumulated items must not be null or undefined.',
+    );
+  }
 
   if (current == null) {
     return next;
diff --git a/packages/react-native-renderer/src/legacy-events/accumulateInto.js b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
index d704733d9d455..974c0143a5504 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulateInto.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 /**
@@ -27,10 +26,11 @@ function accumulateInto<T>(
   current: ?(Array<T> | T),
   next: T | Array<T>,
 ): T | Array<T> {
-  invariant(
-    next != null,
-    'accumulateInto(...): Accumulated items must not be null or undefined.',
-  );
+  if (next == null) {
+    throw new Error(
+      'accumulateInto(...): Accumulated items must not be null or undefined.',
+    );
+  }
 
   if (current == null) {
     return next;
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index c530649ac5072..214561a788604 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -21,8 +21,6 @@ import {
   stringToPrecomputedChunk,
 } from 'react-server/src/ReactServerStreamConfig';
 
-import invariant from 'shared/invariant';
-
 export const isPrimaryRenderer = true;
 
 // Every list of children or string is null terminated.
@@ -116,10 +114,12 @@ export type OpaqueIDType = number;
 export function makeServerID(
   responseState: null | ResponseState,
 ): OpaqueIDType {
-  invariant(
-    responseState !== null,
-    'Invalid hook call. Hooks can only be called inside of the body of a function component.',
-  );
+  if (responseState === null) {
+    throw new Error(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
+    );
+  }
+
   // TODO: This is not deterministic since it's created during render.
   return responseState.nextOpaqueID++;
 }
@@ -167,8 +167,7 @@ export function pushEndInstance(
 // IDs are formatted as little endian Uint16
 function formatID(id: number): Uint8Array {
   if (id > 0xffff) {
-    invariant(
-      false,
+    throw new Error(
       'More boundaries or placeholders than we expected to ever emit.',
     );
   }
diff --git a/packages/react-pg/src/ReactPostgres.js b/packages/react-pg/src/ReactPostgres.js
index ec49f8c043238..fc23025788780 100644
--- a/packages/react-pg/src/ReactPostgres.js
+++ b/packages/react-pg/src/ReactPostgres.js
@@ -12,7 +12,6 @@ import type {Wakeable} from 'shared/ReactTypes';
 import {unstable_getCacheForType} from 'react';
 import {Pool as PostgresPool} from 'pg';
 import {prepareValue} from 'pg/lib/utils';
-import invariant from 'shared/invariant';
 
 const Pending = 0;
 const Resolved = 1;
@@ -92,8 +91,7 @@ Pool.prototype.query = function(query: string, values?: Array<mixed>) {
         nextMap = new Map();
         innerMap.set(key, nextMap);
       } else if (!(nextMap instanceof Map)) {
-        invariant(
-          false,
+        throw new Error(
           'This query has received more parameters than the last time ' +
             'the same query was used. Always pass the exact number of ' +
             'parameters that the query needs.',
@@ -113,8 +111,7 @@ Pool.prototype.query = function(query: string, values?: Array<mixed>) {
     record = createRecordFromThenable(thenable);
     innerMap.set(key, record);
   } else if (record instanceof Map) {
-    invariant(
-      false,
+    throw new Error(
       'This query has received fewer parameters than the last time ' +
         'the same query was used. Always pass the exact number of ' +
         'parameters that the query needs.',
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 91dcff903a63a..9071edc24f7a2 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -22,7 +22,6 @@ import {
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {
   warnAboutStringRefs,
@@ -69,11 +68,14 @@ if (__DEV__) {
     if (!child._store || child._store.validated || child.key != null) {
       return;
     }
-    invariant(
-      typeof child._store === 'object',
-      'React Component in warnForMissingKey should have a _store. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+
+    if (typeof child._store !== 'object') {
+      throw new Error(
+        'React Component in warnForMissingKey should have a _store. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
+
     child._store.validated = true;
 
     const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
@@ -149,21 +151,28 @@ function coerceRef(
       let inst;
       if (owner) {
         const ownerFiber = ((owner: any): Fiber);
-        invariant(
-          ownerFiber.tag === ClassComponent,
-          'Function components cannot have string refs. ' +
-            'We recommend using useRef() instead. ' +
-            'Learn more about using refs safely here: ' +
-            'https://reactjs.org/link/strict-mode-string-ref',
-        );
+
+        if (ownerFiber.tag !== ClassComponent) {
+          throw new Error(
+            'Function components cannot have string refs. ' +
+              'We recommend using useRef() instead. ' +
+              'Learn more about using refs safely here: ' +
+              'https://reactjs.org/link/strict-mode-string-ref',
+          );
+        }
+
         inst = ownerFiber.stateNode;
       }
-      invariant(
-        inst,
-        'Missing owner for string ref %s. This error is likely caused by a ' +
-          'bug in React. Please file an issue.',
-        mixedRef,
-      );
+
+      if (!inst) {
+        throw new Error(
+          `Missing owner for string ref ${mixedRef}. This error is likely caused by a ` +
+            'bug in React. Please file an issue.',
+        );
+      }
+      // Assigning this to a const so Flow knows it won't change in the closure
+      const resolvedInst = inst;
+
       if (__DEV__) {
         checkPropStringCoercion(mixedRef, 'ref');
       }
@@ -178,10 +187,10 @@ function coerceRef(
         return current.ref;
       }
       const ref = function(value) {
-        let refs = inst.refs;
+        let refs = resolvedInst.refs;
         if (refs === emptyRefsObject) {
           // This is a lazy pooled frozen object, so we need to initialize.
-          refs = inst.refs = {};
+          refs = resolvedInst.refs = {};
         }
         if (value === null) {
           delete refs[stringRef];
@@ -192,20 +201,22 @@ function coerceRef(
       ref._stringRef = stringRef;
       return ref;
     } else {
-      invariant(
-        typeof mixedRef === 'string',
-        'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
-      );
-      invariant(
-        element._owner,
-        'Element ref was specified as a string (%s) but no owner was set. This could happen for one of' +
-          ' the following reasons:\n' +
-          '1. You may be adding a ref to a function component\n' +
-          "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
-          '3. You have multiple copies of React loaded\n' +
-          'See https://reactjs.org/link/refs-must-have-owner for more information.',
-        mixedRef,
-      );
+      if (typeof mixedRef !== 'string') {
+        throw new Error(
+          'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
+        );
+      }
+
+      if (!element._owner) {
+        throw new Error(
+          `Element ref was specified as a string (${mixedRef}) but no owner was set. This could happen for one of` +
+            ' the following reasons:\n' +
+            '1. You may be adding a ref to a function component\n' +
+            "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
+            '3. You have multiple copies of React loaded\n' +
+            'See https://reactjs.org/link/refs-must-have-owner for more information.',
+        );
+      }
     }
   }
   return mixedRef;
@@ -213,14 +224,15 @@ function coerceRef(
 
 function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
   const childString = Object.prototype.toString.call(newChild);
-  invariant(
-    false,
-    'Objects are not valid as a React child (found: %s). ' +
+
+  throw new Error(
+    `Objects are not valid as a React child (found: ${
+      childString === '[object Object]'
+        ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
+        : childString
+    }). ` +
       'If you meant to render a collection of children, use an array ' +
       'instead.',
-    childString === '[object Object]'
-      ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
-      : childString,
   );
 }
 
@@ -887,11 +899,13 @@ function ChildReconciler(shouldTrackSideEffects) {
     // but using the iterator instead.
 
     const iteratorFn = getIteratorFn(newChildrenIterable);
-    invariant(
-      typeof iteratorFn === 'function',
-      'An object is not an iterable. This error is likely caused by a bug in ' +
-        'React. Please file an issue.',
-    );
+
+    if (typeof iteratorFn !== 'function') {
+      throw new Error(
+        'An object is not an iterable. This error is likely caused by a bug in ' +
+          'React. Please file an issue.',
+      );
+    }
 
     if (__DEV__) {
       // We don't support rendering Generators because it's a mutation.
@@ -938,7 +952,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
 
     const newChildren = iteratorFn.call(newChildrenIterable);
-    invariant(newChildren != null, 'An iterable object provided no iterator.');
+
+    if (newChildren == null) {
+      throw new Error('An iterable object provided no iterator.');
+    }
 
     let resultingFirstChild: Fiber | null = null;
     let previousNewFiber: Fiber | null = null;
@@ -1313,10 +1330,9 @@ export function cloneChildFibers(
   current: Fiber | null,
   workInProgress: Fiber,
 ): void {
-  invariant(
-    current === null || workInProgress.child === current.child,
-    'Resuming work not yet implemented.',
-  );
+  if (current !== null && workInProgress.child !== current.child) {
+    throw new Error('Resuming work not yet implemented.');
+  }
 
   if (workInProgress.child === null) {
     return;
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 9fafdf05f67a6..0128ca8f36f3d 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -22,7 +22,6 @@ import {
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {
   warnAboutStringRefs,
@@ -69,11 +68,14 @@ if (__DEV__) {
     if (!child._store || child._store.validated || child.key != null) {
       return;
     }
-    invariant(
-      typeof child._store === 'object',
-      'React Component in warnForMissingKey should have a _store. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+
+    if (typeof child._store !== 'object') {
+      throw new Error(
+        'React Component in warnForMissingKey should have a _store. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
+
     child._store.validated = true;
 
     const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
@@ -149,21 +151,28 @@ function coerceRef(
       let inst;
       if (owner) {
         const ownerFiber = ((owner: any): Fiber);
-        invariant(
-          ownerFiber.tag === ClassComponent,
-          'Function components cannot have string refs. ' +
-            'We recommend using useRef() instead. ' +
-            'Learn more about using refs safely here: ' +
-            'https://reactjs.org/link/strict-mode-string-ref',
-        );
+
+        if (ownerFiber.tag !== ClassComponent) {
+          throw new Error(
+            'Function components cannot have string refs. ' +
+              'We recommend using useRef() instead. ' +
+              'Learn more about using refs safely here: ' +
+              'https://reactjs.org/link/strict-mode-string-ref',
+          );
+        }
+
         inst = ownerFiber.stateNode;
       }
-      invariant(
-        inst,
-        'Missing owner for string ref %s. This error is likely caused by a ' +
-          'bug in React. Please file an issue.',
-        mixedRef,
-      );
+
+      if (!inst) {
+        throw new Error(
+          `Missing owner for string ref ${mixedRef}. This error is likely caused by a ` +
+            'bug in React. Please file an issue.',
+        );
+      }
+      // Assigning this to a const so Flow knows it won't change in the closure
+      const resolvedInst = inst;
+
       if (__DEV__) {
         checkPropStringCoercion(mixedRef, 'ref');
       }
@@ -178,10 +187,10 @@ function coerceRef(
         return current.ref;
       }
       const ref = function(value) {
-        let refs = inst.refs;
+        let refs = resolvedInst.refs;
         if (refs === emptyRefsObject) {
           // This is a lazy pooled frozen object, so we need to initialize.
-          refs = inst.refs = {};
+          refs = resolvedInst.refs = {};
         }
         if (value === null) {
           delete refs[stringRef];
@@ -192,20 +201,22 @@ function coerceRef(
       ref._stringRef = stringRef;
       return ref;
     } else {
-      invariant(
-        typeof mixedRef === 'string',
-        'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
-      );
-      invariant(
-        element._owner,
-        'Element ref was specified as a string (%s) but no owner was set. This could happen for one of' +
-          ' the following reasons:\n' +
-          '1. You may be adding a ref to a function component\n' +
-          "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
-          '3. You have multiple copies of React loaded\n' +
-          'See https://reactjs.org/link/refs-must-have-owner for more information.',
-        mixedRef,
-      );
+      if (typeof mixedRef !== 'string') {
+        throw new Error(
+          'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
+        );
+      }
+
+      if (!element._owner) {
+        throw new Error(
+          `Element ref was specified as a string (${mixedRef}) but no owner was set. This could happen for one of` +
+            ' the following reasons:\n' +
+            '1. You may be adding a ref to a function component\n' +
+            "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
+            '3. You have multiple copies of React loaded\n' +
+            'See https://reactjs.org/link/refs-must-have-owner for more information.',
+        );
+      }
     }
   }
   return mixedRef;
@@ -213,14 +224,15 @@ function coerceRef(
 
 function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
   const childString = Object.prototype.toString.call(newChild);
-  invariant(
-    false,
-    'Objects are not valid as a React child (found: %s). ' +
+
+  throw new Error(
+    `Objects are not valid as a React child (found: ${
+      childString === '[object Object]'
+        ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
+        : childString
+    }). ` +
       'If you meant to render a collection of children, use an array ' +
       'instead.',
-    childString === '[object Object]'
-      ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
-      : childString,
   );
 }
 
@@ -887,11 +899,13 @@ function ChildReconciler(shouldTrackSideEffects) {
     // but using the iterator instead.
 
     const iteratorFn = getIteratorFn(newChildrenIterable);
-    invariant(
-      typeof iteratorFn === 'function',
-      'An object is not an iterable. This error is likely caused by a bug in ' +
-        'React. Please file an issue.',
-    );
+
+    if (typeof iteratorFn !== 'function') {
+      throw new Error(
+        'An object is not an iterable. This error is likely caused by a bug in ' +
+          'React. Please file an issue.',
+      );
+    }
 
     if (__DEV__) {
       // We don't support rendering Generators because it's a mutation.
@@ -938,7 +952,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
 
     const newChildren = iteratorFn.call(newChildrenIterable);
-    invariant(newChildren != null, 'An iterable object provided no iterator.');
+
+    if (newChildren == null) {
+      throw new Error('An iterable object provided no iterator.');
+    }
 
     let resultingFirstChild: Fiber | null = null;
     let previousNewFiber: Fiber | null = null;
@@ -1313,10 +1330,9 @@ export function cloneChildFibers(
   current: Fiber | null,
   workInProgress: Fiber,
 ): void {
-  invariant(
-    current === null || workInProgress.child === current.child,
-    'Resuming work not yet implemented.',
-  );
+  if (current !== null && workInProgress.child !== current.child) {
+    throw new Error('Resuming work not yet implemented.');
+  }
 
   if (workInProgress.child === null) {
     return;
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index cbbbaa623385e..2e5c40c220a71 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -17,7 +17,6 @@ import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseInstance, Props} from './ReactFiberHostConfig';
 import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
-import invariant from 'shared/invariant';
 import {
   createRootStrictEffectsByDefault,
   enableCache,
@@ -565,13 +564,11 @@ export function createFiberFromTypeAndProps(
             info += '\n\nCheck the render method of `' + ownerName + '`.';
           }
         }
-        invariant(
-          false,
+
+        throw new Error(
           'Element type is invalid: expected a string (for built-in ' +
             'components) or a class/function (for composite components) ' +
-            'but got: %s.%s',
-          type == null ? type : typeof type,
-          info,
+            `but got: ${type == null ? type : typeof type}.${info}`,
         );
       }
     }
@@ -604,7 +601,7 @@ export function createOffscreenHostContainerFiber(
     return fiber;
   } else {
     // Only implemented in persistent mode
-    invariant(false, 'Not implemented.');
+    throw new Error('Not implemented.');
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 6d99c6837ed21..9d559a3f7afb0 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -17,7 +17,6 @@ import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseInstance, Props} from './ReactFiberHostConfig';
 import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
-import invariant from 'shared/invariant';
 import {
   createRootStrictEffectsByDefault,
   enableCache,
@@ -565,13 +564,11 @@ export function createFiberFromTypeAndProps(
             info += '\n\nCheck the render method of `' + ownerName + '`.';
           }
         }
-        invariant(
-          false,
+
+        throw new Error(
           'Element type is invalid: expected a string (for built-in ' +
             'components) or a class/function (for composite components) ' +
-            'but got: %s.%s',
-          type == null ? type : typeof type,
-          info,
+            `but got: ${type == null ? type : typeof type}.${info}`,
         );
       }
     }
@@ -604,7 +601,7 @@ export function createOffscreenHostContainerFiber(
     return fiber;
   } else {
     // Only implemented in persistent mode
-    invariant(false, 'Not implemented.');
+    throw new Error('Not implemented.');
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 6ad63ae763c2a..4fe648bc3e767 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -92,7 +92,6 @@ import {
   enableSchedulingProfiler,
   enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -1050,6 +1049,7 @@ function updateClassComponent(
       case true: {
         workInProgress.flags |= DidCapture;
         workInProgress.flags |= ShouldCapture;
+        // eslint-disable-next-line react-internal/prod-error-codes
         const error = new Error('Simulated error coming from DevTools');
         const lane = pickArbitraryLane(renderLanes);
         workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
@@ -1264,12 +1264,15 @@ function pushHostRootContext(workInProgress) {
 function updateHostRoot(current, workInProgress, renderLanes) {
   pushHostRootContext(workInProgress);
   const updateQueue = workInProgress.updateQueue;
-  invariant(
-    current !== null && updateQueue !== null,
-    'If the root does not have an updateQueue, we should have already ' +
-      'bailed out. This error is likely caused by a bug in React. Please ' +
-      'file an issue.',
-  );
+
+  if (current === null || updateQueue === null) {
+    throw new Error(
+      'If the root does not have an updateQueue, we should have already ' +
+        'bailed out. This error is likely caused by a bug in React. Please ' +
+        'file an issue.',
+    );
+  }
+
   const nextProps = workInProgress.pendingProps;
   const prevState = workInProgress.memoizedState;
   const prevChildren = prevState.element;
@@ -1496,15 +1499,13 @@ function mountLazyComponent(
       hint = ' Did you wrap a component in React.lazy() more than once?';
     }
   }
+
   // This message intentionally doesn't mention ForwardRef or MemoComponent
   // because the fact that it's a separate type of work is an
   // implementation detail.
-  invariant(
-    false,
-    'Element type is invalid. Received a promise that resolves to: %s. ' +
-      'Lazy element type must resolve to a class or function.%s',
-    Component,
-    hint,
+  throw new Error(
+    `Element type is invalid. Received a promise that resolves to: ${Component}. ` +
+      `Lazy element type must resolve to a class or function.${hint}`,
   );
 }
 
@@ -3317,6 +3318,7 @@ function remountFiber(
   if (__DEV__) {
     const returnFiber = oldWorkInProgress.return;
     if (returnFiber === null) {
+      // eslint-disable-next-line react-internal/prod-error-codes
       throw new Error('Cannot swap the root fiber.');
     }
 
@@ -3337,11 +3339,13 @@ function remountFiber(
     } else {
       let prevSibling = returnFiber.child;
       if (prevSibling === null) {
+        // eslint-disable-next-line react-internal/prod-error-codes
         throw new Error('Expected parent to have a child.');
       }
       while (prevSibling.sibling !== oldWorkInProgress) {
         prevSibling = prevSibling.sibling;
         if (prevSibling === null) {
+          // eslint-disable-next-line react-internal/prod-error-codes
           throw new Error('Expected to find the previous sibling.');
         }
       }
@@ -3836,11 +3840,10 @@ function beginWork(
       break;
     }
   }
-  invariant(
-    false,
-    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
       'React. Please file an issue.',
-    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index ffa753593e1a4..f116897a8661b 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -92,7 +92,6 @@ import {
   enableSchedulingProfiler,
   enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -1050,6 +1049,7 @@ function updateClassComponent(
       case true: {
         workInProgress.flags |= DidCapture;
         workInProgress.flags |= ShouldCapture;
+        // eslint-disable-next-line react-internal/prod-error-codes
         const error = new Error('Simulated error coming from DevTools');
         const lane = pickArbitraryLane(renderLanes);
         workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
@@ -1264,12 +1264,15 @@ function pushHostRootContext(workInProgress) {
 function updateHostRoot(current, workInProgress, renderLanes) {
   pushHostRootContext(workInProgress);
   const updateQueue = workInProgress.updateQueue;
-  invariant(
-    current !== null && updateQueue !== null,
-    'If the root does not have an updateQueue, we should have already ' +
-      'bailed out. This error is likely caused by a bug in React. Please ' +
-      'file an issue.',
-  );
+
+  if (current === null || updateQueue === null) {
+    throw new Error(
+      'If the root does not have an updateQueue, we should have already ' +
+        'bailed out. This error is likely caused by a bug in React. Please ' +
+        'file an issue.',
+    );
+  }
+
   const nextProps = workInProgress.pendingProps;
   const prevState = workInProgress.memoizedState;
   const prevChildren = prevState.element;
@@ -1496,15 +1499,13 @@ function mountLazyComponent(
       hint = ' Did you wrap a component in React.lazy() more than once?';
     }
   }
+
   // This message intentionally doesn't mention ForwardRef or MemoComponent
   // because the fact that it's a separate type of work is an
   // implementation detail.
-  invariant(
-    false,
-    'Element type is invalid. Received a promise that resolves to: %s. ' +
-      'Lazy element type must resolve to a class or function.%s',
-    Component,
-    hint,
+  throw new Error(
+    `Element type is invalid. Received a promise that resolves to: ${Component}. ` +
+      `Lazy element type must resolve to a class or function.${hint}`,
   );
 }
 
@@ -3317,6 +3318,7 @@ function remountFiber(
   if (__DEV__) {
     const returnFiber = oldWorkInProgress.return;
     if (returnFiber === null) {
+      // eslint-disable-next-line react-internal/prod-error-codes
       throw new Error('Cannot swap the root fiber.');
     }
 
@@ -3337,11 +3339,13 @@ function remountFiber(
     } else {
       let prevSibling = returnFiber.child;
       if (prevSibling === null) {
+        // eslint-disable-next-line react-internal/prod-error-codes
         throw new Error('Expected parent to have a child.');
       }
       while (prevSibling.sibling !== oldWorkInProgress) {
         prevSibling = prevSibling.sibling;
         if (prevSibling === null) {
+          // eslint-disable-next-line react-internal/prod-error-codes
           throw new Error('Expected to find the previous sibling.');
         }
       }
@@ -3836,11 +3840,10 @@ function beginWork(
       break;
     }
   }
-  invariant(
-    false,
-    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
       'React. Please file an issue.',
-    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 3cb67d045d410..18e56db09313c 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -35,7 +35,6 @@ import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
@@ -148,8 +147,7 @@ if (__DEV__) {
   Object.defineProperty(fakeInternalInstance, '_processChildContext', {
     enumerable: false,
     value: function() {
-      invariant(
-        false,
+      throw new Error(
         '_processChildContext is not available in React 16+. This likely ' +
           'means you have multiple copies of React and are attempting to nest ' +
           'a React 15 tree inside a React 16 tree using ' +
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index 0e30466bf82be..a54dfabfca525 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -35,7 +35,6 @@ import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
@@ -148,8 +147,7 @@ if (__DEV__) {
   Object.defineProperty(fakeInternalInstance, '_processChildContext', {
     enumerable: false,
     value: function() {
-      invariant(
-        false,
+      throw new Error(
         '_processChildContext is not available in React 16+. This likely ' +
           'means you have multiple copies of React and are attempting to nest ' +
           'a React 15 tree inside a React 16 tree using ' +
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 699c6867fa103..95c2f3753bfd7 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -78,7 +78,6 @@ import {
   Visibility,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
@@ -473,8 +472,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
         // Nothing to do for these component types
         break;
       default: {
-        invariant(
-          false,
+        throw new Error(
           'This unit of work tag should not have side-effects. This error is ' +
             'likely caused by a bug in React. Please file an issue.',
         );
@@ -945,8 +943,7 @@ function commitLayoutEffectOnFiber(
       case LegacyHiddenComponent:
         break;
       default:
-        invariant(
-          false,
+        throw new Error(
           'This unit of work tag should not have side-effects. This error is ' +
             'likely caused by a bug in React. Please file an issue.',
         );
@@ -1432,8 +1429,8 @@ function commitContainer(finishedWork: Fiber) {
       return;
     }
   }
-  invariant(
-    false,
+
+  throw new Error(
     'This unit of work tag should not have side-effects. This error is ' +
       'likely caused by a bug in React. Please file an issue.',
   );
@@ -1447,8 +1444,8 @@ function getHostParentFiber(fiber: Fiber): Fiber {
     }
     parent = parent.return;
   }
-  invariant(
-    false,
+
+  throw new Error(
     'Expected to find a host parent. This error is likely caused by a bug ' +
       'in React. Please file an issue.',
   );
@@ -1535,8 +1532,7 @@ function commitPlacement(finishedWork: Fiber): void {
       break;
     // eslint-disable-next-line-no-fallthrough
     default:
-      invariant(
-        false,
+      throw new Error(
         'Invalid host parent fiber. This error is likely caused by a bug ' +
           'in React. Please file an issue.',
       );
@@ -1641,11 +1637,13 @@ function unmountHostComponents(
     if (!currentParentIsValid) {
       let parent = node.return;
       findParent: while (true) {
-        invariant(
-          parent !== null,
-          'Expected to find a host parent. This error is likely caused by ' +
-            'a bug in React. Please file an issue.',
-        );
+        if (parent === null) {
+          throw new Error(
+            'Expected to find a host parent. This error is likely caused by ' +
+              'a bug in React. Please file an issue.',
+          );
+        }
+
         const parentStateNode = parent.stateNode;
         switch (parent.tag) {
           case HostComponent:
@@ -1915,11 +1913,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       return;
     }
     case HostText: {
-      invariant(
-        finishedWork.stateNode !== null,
-        'This should have a text node initialized. This error is likely ' +
-          'caused by a bug in React. Please file an issue.',
-      );
+      if (finishedWork.stateNode === null) {
+        throw new Error(
+          'This should have a text node initialized. This error is likely ' +
+            'caused by a bug in React. Please file an issue.',
+        );
+      }
+
       const textInstance: TextInstance = finishedWork.stateNode;
       const newText: string = finishedWork.memoizedProps;
       // For hydration we reuse the update path but we treat the oldProps
@@ -1965,8 +1965,8 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       break;
     }
   }
-  invariant(
-    false,
+
+  throw new Error(
     'This unit of work tag should not have side-effects. This error is ' +
       'likely caused by a bug in React. Please file an issue.',
   );
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 53294e67498b0..8057c415e7459 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -78,7 +78,6 @@ import {
   Visibility,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
@@ -473,8 +472,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
         // Nothing to do for these component types
         break;
       default: {
-        invariant(
-          false,
+        throw new Error(
           'This unit of work tag should not have side-effects. This error is ' +
             'likely caused by a bug in React. Please file an issue.',
         );
@@ -945,8 +943,7 @@ function commitLayoutEffectOnFiber(
       case LegacyHiddenComponent:
         break;
       default:
-        invariant(
-          false,
+        throw new Error(
           'This unit of work tag should not have side-effects. This error is ' +
             'likely caused by a bug in React. Please file an issue.',
         );
@@ -1432,8 +1429,8 @@ function commitContainer(finishedWork: Fiber) {
       return;
     }
   }
-  invariant(
-    false,
+
+  throw new Error(
     'This unit of work tag should not have side-effects. This error is ' +
       'likely caused by a bug in React. Please file an issue.',
   );
@@ -1447,8 +1444,8 @@ function getHostParentFiber(fiber: Fiber): Fiber {
     }
     parent = parent.return;
   }
-  invariant(
-    false,
+
+  throw new Error(
     'Expected to find a host parent. This error is likely caused by a bug ' +
       'in React. Please file an issue.',
   );
@@ -1535,8 +1532,7 @@ function commitPlacement(finishedWork: Fiber): void {
       break;
     // eslint-disable-next-line-no-fallthrough
     default:
-      invariant(
-        false,
+      throw new Error(
         'Invalid host parent fiber. This error is likely caused by a bug ' +
           'in React. Please file an issue.',
       );
@@ -1641,11 +1637,13 @@ function unmountHostComponents(
     if (!currentParentIsValid) {
       let parent = node.return;
       findParent: while (true) {
-        invariant(
-          parent !== null,
-          'Expected to find a host parent. This error is likely caused by ' +
-            'a bug in React. Please file an issue.',
-        );
+        if (parent === null) {
+          throw new Error(
+            'Expected to find a host parent. This error is likely caused by ' +
+              'a bug in React. Please file an issue.',
+          );
+        }
+
         const parentStateNode = parent.stateNode;
         switch (parent.tag) {
           case HostComponent:
@@ -1915,11 +1913,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       return;
     }
     case HostText: {
-      invariant(
-        finishedWork.stateNode !== null,
-        'This should have a text node initialized. This error is likely ' +
-          'caused by a bug in React. Please file an issue.',
-      );
+      if (finishedWork.stateNode === null) {
+        throw new Error(
+          'This should have a text node initialized. This error is likely ' +
+            'caused by a bug in React. Please file an issue.',
+        );
+      }
+
       const textInstance: TextInstance = finishedWork.stateNode;
       const newText: string = finishedWork.memoizedProps;
       // For hydration we reuse the update path but we treat the oldProps
@@ -1965,8 +1965,8 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       break;
     }
   }
-  invariant(
-    false,
+
+  throw new Error(
     'This unit of work tag should not have side-effects. This error is ' +
       'likely caused by a bug in React. Please file an issue.',
   );
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 03136ce30ba7b..a15702985e9a0 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -73,7 +73,6 @@ import {
   StaticMask,
   MutationMask,
 } from './ReactFiberFlags';
-import invariant from 'shared/invariant';
 
 import {
   createInstance,
@@ -897,11 +896,13 @@ function completeWork(
         }
       } else {
         if (!newProps) {
-          invariant(
-            workInProgress.stateNode !== null,
-            'We must have new props for new mounts. This error is likely ' +
-              'caused by a bug in React. Please file an issue.',
-          );
+          if (workInProgress.stateNode === null) {
+            throw new Error(
+              'We must have new props for new mounts. This error is likely ' +
+                'caused by a bug in React. Please file an issue.',
+            );
+          }
+
           // This can happen when we abort work.
           bubbleProperties(workInProgress);
           return null;
@@ -973,11 +974,12 @@ function completeWork(
         updateHostText(current, workInProgress, oldText, newText);
       } else {
         if (typeof newText !== 'string') {
-          invariant(
-            workInProgress.stateNode !== null,
-            'We must have new props for new mounts. This error is likely ' +
-              'caused by a bug in React. Please file an issue.',
-          );
+          if (workInProgress.stateNode === null) {
+            throw new Error(
+              'We must have new props for new mounts. This error is likely ' +
+                'caused by a bug in React. Please file an issue.',
+            );
+          }
           // This can happen when we abort work.
         }
         const rootContainerInstance = getRootHostContainer();
@@ -1007,11 +1009,14 @@ function completeWork(
         if (nextState !== null && nextState.dehydrated !== null) {
           if (current === null) {
             const wasHydrated = popHydrationState(workInProgress);
-            invariant(
-              wasHydrated,
-              'A dehydrated suspense component was completed without a hydrated node. ' +
-                'This is probably a bug in React.',
-            );
+
+            if (!wasHydrated) {
+              throw new Error(
+                'A dehydrated suspense component was completed without a hydrated node. ' +
+                  'This is probably a bug in React.',
+              );
+            }
+
             prepareToHydrateHostSuspenseInstance(workInProgress);
             bubbleProperties(workInProgress);
             if (enableProfilerTimer) {
@@ -1478,11 +1483,10 @@ function completeWork(
       }
     }
   }
-  invariant(
-    false,
-    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
       'React. Please file an issue.',
-    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 1155a817d61b6..89b8b980bc3e3 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -73,7 +73,6 @@ import {
   StaticMask,
   MutationMask,
 } from './ReactFiberFlags';
-import invariant from 'shared/invariant';
 
 import {
   createInstance,
@@ -897,11 +896,13 @@ function completeWork(
         }
       } else {
         if (!newProps) {
-          invariant(
-            workInProgress.stateNode !== null,
-            'We must have new props for new mounts. This error is likely ' +
-              'caused by a bug in React. Please file an issue.',
-          );
+          if (workInProgress.stateNode === null) {
+            throw new Error(
+              'We must have new props for new mounts. This error is likely ' +
+                'caused by a bug in React. Please file an issue.',
+            );
+          }
+
           // This can happen when we abort work.
           bubbleProperties(workInProgress);
           return null;
@@ -973,11 +974,12 @@ function completeWork(
         updateHostText(current, workInProgress, oldText, newText);
       } else {
         if (typeof newText !== 'string') {
-          invariant(
-            workInProgress.stateNode !== null,
-            'We must have new props for new mounts. This error is likely ' +
-              'caused by a bug in React. Please file an issue.',
-          );
+          if (workInProgress.stateNode === null) {
+            throw new Error(
+              'We must have new props for new mounts. This error is likely ' +
+                'caused by a bug in React. Please file an issue.',
+            );
+          }
           // This can happen when we abort work.
         }
         const rootContainerInstance = getRootHostContainer();
@@ -1007,11 +1009,14 @@ function completeWork(
         if (nextState !== null && nextState.dehydrated !== null) {
           if (current === null) {
             const wasHydrated = popHydrationState(workInProgress);
-            invariant(
-              wasHydrated,
-              'A dehydrated suspense component was completed without a hydrated node. ' +
-                'This is probably a bug in React.',
-            );
+
+            if (!wasHydrated) {
+              throw new Error(
+                'A dehydrated suspense component was completed without a hydrated node. ' +
+                  'This is probably a bug in React.',
+              );
+            }
+
             prepareToHydrateHostSuspenseInstance(workInProgress);
             bubbleProperties(workInProgress);
             if (enableProfilerTimer) {
@@ -1478,11 +1483,10 @@ function completeWork(
       }
     }
   }
-  invariant(
-    false,
-    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
       'React. Please file an issue.',
-    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberContext.new.js b/packages/react-reconciler/src/ReactFiberContext.new.js
index a7735f7b56e16..43d5e68abb05d 100644
--- a/packages/react-reconciler/src/ReactFiberContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberContext.new.js
@@ -14,7 +14,6 @@ import {isFiberMounted} from './ReactFiberTreeReflection';
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {ClassComponent, HostRoot} from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import checkPropTypes from 'shared/checkPropTypes';
 
 import {createCursor, push, pop} from './ReactFiberStack.new';
@@ -161,11 +160,12 @@ function pushTopLevelContextObject(
   if (disableLegacyContext) {
     return;
   } else {
-    invariant(
-      contextStackCursor.current === emptyContextObject,
-      'Unexpected context found on stack. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    if (contextStackCursor.current !== emptyContextObject) {
+      throw new Error(
+        'Unexpected context found on stack. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     push(contextStackCursor, context, fiber);
     push(didPerformWorkStackCursor, didChange, fiber);
@@ -205,12 +205,12 @@ function processChildContext(
 
     const childContext = instance.getChildContext();
     for (const contextKey in childContext) {
-      invariant(
-        contextKey in childContextTypes,
-        '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-        getComponentNameFromFiber(fiber) || 'Unknown',
-        contextKey,
-      );
+      if (!(contextKey in childContextTypes)) {
+        throw new Error(
+          `${getComponentNameFromFiber(fiber) ||
+            'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+        );
+      }
     }
     if (__DEV__) {
       const name = getComponentNameFromFiber(fiber) || 'Unknown';
@@ -256,11 +256,13 @@ function invalidateContextProvider(
     return;
   } else {
     const instance = workInProgress.stateNode;
-    invariant(
-      instance,
-      'Expected to have an instance by this point. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+
+    if (!instance) {
+      throw new Error(
+        'Expected to have an instance by this point. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     if (didChange) {
       // Merge parent and own context.
@@ -293,11 +295,12 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
   } else {
     // Currently this is only used with renderSubtreeIntoContainer; not sure if it
     // makes sense elsewhere
-    invariant(
-      isFiberMounted(fiber) && fiber.tag === ClassComponent,
-      'Expected subtree parent to be a mounted class component. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    if (!isFiberMounted(fiber) || fiber.tag !== ClassComponent) {
+      throw new Error(
+        'Expected subtree parent to be a mounted class component. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     let node = fiber;
     do {
@@ -314,8 +317,8 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
       }
       node = node.return;
     } while (node !== null);
-    invariant(
-      false,
+
+    throw new Error(
       'Found unexpected detached subtree parent. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
diff --git a/packages/react-reconciler/src/ReactFiberContext.old.js b/packages/react-reconciler/src/ReactFiberContext.old.js
index c4736bcbd3103..82bf05e6687c0 100644
--- a/packages/react-reconciler/src/ReactFiberContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberContext.old.js
@@ -14,7 +14,6 @@ import {isFiberMounted} from './ReactFiberTreeReflection';
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {ClassComponent, HostRoot} from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import checkPropTypes from 'shared/checkPropTypes';
 
 import {createCursor, push, pop} from './ReactFiberStack.old';
@@ -161,11 +160,12 @@ function pushTopLevelContextObject(
   if (disableLegacyContext) {
     return;
   } else {
-    invariant(
-      contextStackCursor.current === emptyContextObject,
-      'Unexpected context found on stack. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    if (contextStackCursor.current !== emptyContextObject) {
+      throw new Error(
+        'Unexpected context found on stack. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     push(contextStackCursor, context, fiber);
     push(didPerformWorkStackCursor, didChange, fiber);
@@ -205,12 +205,12 @@ function processChildContext(
 
     const childContext = instance.getChildContext();
     for (const contextKey in childContext) {
-      invariant(
-        contextKey in childContextTypes,
-        '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-        getComponentNameFromFiber(fiber) || 'Unknown',
-        contextKey,
-      );
+      if (!(contextKey in childContextTypes)) {
+        throw new Error(
+          `${getComponentNameFromFiber(fiber) ||
+            'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+        );
+      }
     }
     if (__DEV__) {
       const name = getComponentNameFromFiber(fiber) || 'Unknown';
@@ -256,11 +256,13 @@ function invalidateContextProvider(
     return;
   } else {
     const instance = workInProgress.stateNode;
-    invariant(
-      instance,
-      'Expected to have an instance by this point. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+
+    if (!instance) {
+      throw new Error(
+        'Expected to have an instance by this point. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     if (didChange) {
       // Merge parent and own context.
@@ -293,11 +295,12 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
   } else {
     // Currently this is only used with renderSubtreeIntoContainer; not sure if it
     // makes sense elsewhere
-    invariant(
-      isFiberMounted(fiber) && fiber.tag === ClassComponent,
-      'Expected subtree parent to be a mounted class component. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    if (!isFiberMounted(fiber) || fiber.tag !== ClassComponent) {
+      throw new Error(
+        'Expected subtree parent to be a mounted class component. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     let node = fiber;
     do {
@@ -314,8 +317,8 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
       }
       node = node.return;
     } while (node !== null);
-    invariant(
-      false,
+
+    throw new Error(
       'Found unexpected detached subtree parent. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index d6123454972ac..b66b62c9ade73 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -88,7 +88,6 @@ import {
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
 
-import invariant from 'shared/invariant';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import is from 'shared/objectIs';
 import isArray from 'shared/isArray';
@@ -310,8 +309,7 @@ function warnOnHookMismatchInDev(currentHookName: HookType) {
 }
 
 function throwInvalidHookError() {
-  invariant(
-    false,
+  throw new Error(
     'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
       ' one of the following reasons:\n' +
       '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
@@ -436,11 +434,13 @@ export function renderWithHooks<Props, SecondArg>(
     let numberOfReRenders: number = 0;
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
-      invariant(
-        numberOfReRenders < RE_RENDER_LIMIT,
-        'Too many re-renders. React limits the number of renders to prevent ' +
-          'an infinite loop.',
-      );
+
+      if (numberOfReRenders >= RE_RENDER_LIMIT) {
+        throw new Error(
+          'Too many re-renders. React limits the number of renders to prevent ' +
+            'an infinite loop.',
+        );
+      }
 
       numberOfReRenders += 1;
       if (__DEV__) {
@@ -516,11 +516,12 @@ export function renderWithHooks<Props, SecondArg>(
 
   didScheduleRenderPhaseUpdate = false;
 
-  invariant(
-    !didRenderTooFewHooks,
-    'Rendered fewer hooks than expected. This may be caused by an accidental ' +
-      'early return statement.',
-  );
+  if (didRenderTooFewHooks) {
+    throw new Error(
+      'Rendered fewer hooks than expected. This may be caused by an accidental ' +
+        'early return statement.',
+    );
+  }
 
   if (enableLazyContextPropagation) {
     if (current !== null) {
@@ -669,10 +670,10 @@ function updateWorkInProgressHook(): Hook {
   } else {
     // Clone from the current hook.
 
-    invariant(
-      nextCurrentHook !== null,
-      'Rendered more hooks than during the previous render.',
-    );
+    if (nextCurrentHook === null) {
+      throw new Error('Rendered more hooks than during the previous render.');
+    }
+
     currentHook = nextCurrentHook;
 
     const newHook: Hook = {
@@ -745,10 +746,12 @@ function updateReducer<S, I, A>(
 ): [S, Dispatch<A>] {
   const hook = updateWorkInProgressHook();
   const queue = hook.queue;
-  invariant(
-    queue !== null,
-    'Should have a queue. This is likely a bug in React. Please file an issue.',
-  );
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. This is likely a bug in React. Please file an issue.',
+    );
+  }
 
   queue.lastRenderedReducer = reducer;
 
@@ -900,10 +903,12 @@ function rerenderReducer<S, I, A>(
 ): [S, Dispatch<A>] {
   const hook = updateWorkInProgressHook();
   const queue = hook.queue;
-  invariant(
-    queue !== null,
-    'Should have a queue. This is likely a bug in React. Please file an issue.',
-  );
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. This is likely a bug in React. Please file an issue.',
+    );
+  }
 
   queue.lastRenderedReducer = reducer;
 
@@ -1037,8 +1042,7 @@ function readFromUnsubscribedMutableSource<Source, Snapshot>(
 
     // We expect this error not to be thrown during the synchronous retry,
     // because we blocked interleaved mutations.
-    invariant(
-      false,
+    throw new Error(
       'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
     );
   }
@@ -1051,10 +1055,12 @@ function useMutableSource<Source, Snapshot>(
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
   const root = ((getWorkInProgressRoot(): any): FiberRoot);
-  invariant(
-    root !== null,
-    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-  );
+
+  if (root === null) {
+    throw new Error(
+      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+    );
+  }
 
   const getVersion = source._getVersion;
   const version = getVersion(source._source);
@@ -1242,8 +1248,7 @@ function mountSyncExternalStore<T>(
   const isHydrating = getIsHydrating();
   if (isHydrating) {
     if (getServerSnapshot === undefined) {
-      invariant(
-        false,
+      throw new Error(
         'Missing getServerSnapshot, which is required for ' +
           'server-rendered content. Will revert to client rendering.',
       );
@@ -1279,10 +1284,13 @@ function mountSyncExternalStore<T>(
     // the content is stale, it's already visible anyway. Instead we'll patch
     // it up in a passive effect.
     const root: FiberRoot | null = getWorkInProgressRoot();
-    invariant(
-      root !== null,
-      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-    );
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
     if (!includesBlockingLane(root, renderLanes)) {
       pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
     }
@@ -1376,10 +1384,13 @@ function updateSyncExternalStore<T>(
     // Right before committing, we will walk the tree and check if any of the
     // stores were mutated.
     const root: FiberRoot | null = getWorkInProgressRoot();
-    invariant(
-      root !== null,
-      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-    );
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
     if (!includesBlockingLane(root, renderLanes)) {
       pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
     }
@@ -1532,6 +1543,7 @@ function pushEffect(tag, create, destroy, deps) {
 let stackContainsErrorMessage: boolean | null = null;
 
 function getCallerStackFrame(): string {
+  // eslint-disable-next-line react-internal/prod-error-codes
   const stackFrames = new Error('Error message').stack.split('\n');
 
   // Some browsers (e.g. Chrome) include the error message in the stack
@@ -2051,8 +2063,8 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
           setId(makeId());
         }
       }
-      invariant(
-        false,
+
+      throw new Error(
         'The object passed back from useOpaqueIdentifier is meant to be ' +
           'passed through to attributes only. Do not read the value directly.',
       );
@@ -2383,7 +2395,7 @@ function markUpdateInDevTools(fiber, lane, action) {
 
 function getCacheForType<T>(resourceType: () => T): T {
   if (!enableCache) {
-    invariant(false, 'Not implemented.');
+    throw new Error('Not implemented.');
   }
   const cache: Cache = readContext(CacheContext);
   let cacheForType: T | void = (cache.get(resourceType): any);
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index d4dacbc8833ce..af21b5f6f9da3 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -88,7 +88,6 @@ import {
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
 
-import invariant from 'shared/invariant';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import is from 'shared/objectIs';
 import isArray from 'shared/isArray';
@@ -310,8 +309,7 @@ function warnOnHookMismatchInDev(currentHookName: HookType) {
 }
 
 function throwInvalidHookError() {
-  invariant(
-    false,
+  throw new Error(
     'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
       ' one of the following reasons:\n' +
       '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
@@ -436,11 +434,13 @@ export function renderWithHooks<Props, SecondArg>(
     let numberOfReRenders: number = 0;
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
-      invariant(
-        numberOfReRenders < RE_RENDER_LIMIT,
-        'Too many re-renders. React limits the number of renders to prevent ' +
-          'an infinite loop.',
-      );
+
+      if (numberOfReRenders >= RE_RENDER_LIMIT) {
+        throw new Error(
+          'Too many re-renders. React limits the number of renders to prevent ' +
+            'an infinite loop.',
+        );
+      }
 
       numberOfReRenders += 1;
       if (__DEV__) {
@@ -516,11 +516,12 @@ export function renderWithHooks<Props, SecondArg>(
 
   didScheduleRenderPhaseUpdate = false;
 
-  invariant(
-    !didRenderTooFewHooks,
-    'Rendered fewer hooks than expected. This may be caused by an accidental ' +
-      'early return statement.',
-  );
+  if (didRenderTooFewHooks) {
+    throw new Error(
+      'Rendered fewer hooks than expected. This may be caused by an accidental ' +
+        'early return statement.',
+    );
+  }
 
   if (enableLazyContextPropagation) {
     if (current !== null) {
@@ -669,10 +670,10 @@ function updateWorkInProgressHook(): Hook {
   } else {
     // Clone from the current hook.
 
-    invariant(
-      nextCurrentHook !== null,
-      'Rendered more hooks than during the previous render.',
-    );
+    if (nextCurrentHook === null) {
+      throw new Error('Rendered more hooks than during the previous render.');
+    }
+
     currentHook = nextCurrentHook;
 
     const newHook: Hook = {
@@ -745,10 +746,12 @@ function updateReducer<S, I, A>(
 ): [S, Dispatch<A>] {
   const hook = updateWorkInProgressHook();
   const queue = hook.queue;
-  invariant(
-    queue !== null,
-    'Should have a queue. This is likely a bug in React. Please file an issue.',
-  );
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. This is likely a bug in React. Please file an issue.',
+    );
+  }
 
   queue.lastRenderedReducer = reducer;
 
@@ -900,10 +903,12 @@ function rerenderReducer<S, I, A>(
 ): [S, Dispatch<A>] {
   const hook = updateWorkInProgressHook();
   const queue = hook.queue;
-  invariant(
-    queue !== null,
-    'Should have a queue. This is likely a bug in React. Please file an issue.',
-  );
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. This is likely a bug in React. Please file an issue.',
+    );
+  }
 
   queue.lastRenderedReducer = reducer;
 
@@ -1037,8 +1042,7 @@ function readFromUnsubscribedMutableSource<Source, Snapshot>(
 
     // We expect this error not to be thrown during the synchronous retry,
     // because we blocked interleaved mutations.
-    invariant(
-      false,
+    throw new Error(
       'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
     );
   }
@@ -1051,10 +1055,12 @@ function useMutableSource<Source, Snapshot>(
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
   const root = ((getWorkInProgressRoot(): any): FiberRoot);
-  invariant(
-    root !== null,
-    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-  );
+
+  if (root === null) {
+    throw new Error(
+      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+    );
+  }
 
   const getVersion = source._getVersion;
   const version = getVersion(source._source);
@@ -1242,8 +1248,7 @@ function mountSyncExternalStore<T>(
   const isHydrating = getIsHydrating();
   if (isHydrating) {
     if (getServerSnapshot === undefined) {
-      invariant(
-        false,
+      throw new Error(
         'Missing getServerSnapshot, which is required for ' +
           'server-rendered content. Will revert to client rendering.',
       );
@@ -1279,10 +1284,13 @@ function mountSyncExternalStore<T>(
     // the content is stale, it's already visible anyway. Instead we'll patch
     // it up in a passive effect.
     const root: FiberRoot | null = getWorkInProgressRoot();
-    invariant(
-      root !== null,
-      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-    );
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
     if (!includesBlockingLane(root, renderLanes)) {
       pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
     }
@@ -1376,10 +1384,13 @@ function updateSyncExternalStore<T>(
     // Right before committing, we will walk the tree and check if any of the
     // stores were mutated.
     const root: FiberRoot | null = getWorkInProgressRoot();
-    invariant(
-      root !== null,
-      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-    );
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
     if (!includesBlockingLane(root, renderLanes)) {
       pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
     }
@@ -1532,6 +1543,7 @@ function pushEffect(tag, create, destroy, deps) {
 let stackContainsErrorMessage: boolean | null = null;
 
 function getCallerStackFrame(): string {
+  // eslint-disable-next-line react-internal/prod-error-codes
   const stackFrames = new Error('Error message').stack.split('\n');
 
   // Some browsers (e.g. Chrome) include the error message in the stack
@@ -2051,8 +2063,8 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
           setId(makeId());
         }
       }
-      invariant(
-        false,
+
+      throw new Error(
         'The object passed back from useOpaqueIdentifier is meant to be ' +
           'passed through to attributes only. Do not read the value directly.',
       );
@@ -2383,7 +2395,7 @@ function markUpdateInDevTools(fiber, lane, action) {
 
 function getCacheForType<T>(resourceType: () => T): T {
   if (!enableCache) {
-    invariant(false, 'Not implemented.');
+    throw new Error('Not implemented.');
   }
   const cache: Cache = readContext(CacheContext);
   let cacheForType: T | void = (cache.get(resourceType): any);
diff --git a/packages/react-reconciler/src/ReactFiberHostConfig.js b/packages/react-reconciler/src/ReactFiberHostConfig.js
index 49c9752540528..2829adc569256 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfig.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* eslint-disable react-internal/prod-error-codes */
 
 // We expect that our Rollup, Jest, and Flow configurations
 // always shim this module with the corresponding host config
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
index c57b313fd90fa..b95fd52d189b5 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support hydration
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support hydration. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js
index 4d88494862016..5c55d9d59b01f 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support microtasks
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support microtasks. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js
index 50e6758a8d3e1..59e8c450861f0 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support mutation
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support mutation. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
index 824cdeacc73fd..9f194fbc8a8df 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support persistence
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support persistence. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js
index 9c9c893767789..6eb3d08a4de64 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support React Scopes
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support React Scopes. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js
index b8c9777f7bd5f..964bf4b2c43d5 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support test selectors
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support test selectors. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostContext.new.js b/packages/react-reconciler/src/ReactFiberHostContext.new.js
index 298a96afecac6..e7d9433136ad9 100644
--- a/packages/react-reconciler/src/ReactFiberHostContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHostContext.new.js
@@ -11,8 +11,6 @@ import type {Fiber} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {Container, HostContext} from './ReactFiberHostConfig';
 
-import invariant from 'shared/invariant';
-
 import {getChildHostContext, getRootHostContext} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.new';
 
@@ -30,11 +28,13 @@ const rootInstanceStackCursor: StackCursor<
 > = createCursor(NO_CONTEXT);
 
 function requiredContext<Value>(c: Value | NoContextT): Value {
-  invariant(
-    c !== NO_CONTEXT,
-    'Expected host context to exist. This error is likely caused by a bug ' +
-      'in React. Please file an issue.',
-  );
+  if (c === NO_CONTEXT) {
+    throw new Error(
+      'Expected host context to exist. This error is likely caused by a bug ' +
+        'in React. Please file an issue.',
+    );
+  }
+
   return (c: any);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHostContext.old.js b/packages/react-reconciler/src/ReactFiberHostContext.old.js
index bfecfb7f525a0..667aeaf0ddefc 100644
--- a/packages/react-reconciler/src/ReactFiberHostContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHostContext.old.js
@@ -11,8 +11,6 @@ import type {Fiber} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Container, HostContext} from './ReactFiberHostConfig';
 
-import invariant from 'shared/invariant';
-
 import {getChildHostContext, getRootHostContext} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.old';
 
@@ -30,11 +28,13 @@ const rootInstanceStackCursor: StackCursor<
 > = createCursor(NO_CONTEXT);
 
 function requiredContext<Value>(c: Value | NoContextT): Value {
-  invariant(
-    c !== NO_CONTEXT,
-    'Expected host context to exist. This error is likely caused by a bug ' +
-      'in React. Please file an issue.',
-  );
+  if (c === NO_CONTEXT) {
+    throw new Error(
+      'Expected host context to exist. This error is likely caused by a bug ' +
+        'in React. Please file an issue.',
+    );
+  }
+
   return (c: any);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.new.js b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
index 4c9eaf010125c..0867ffeb78439 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.new.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+/* eslint-disable react-internal/prod-error-codes */
+
 import type {ReactElement} from 'shared/ReactElementType';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.old.js b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
index ee0616fae79c0..4a5f53d3be731 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.old.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+/* eslint-disable react-internal/prod-error-codes */
+
 import type {ReactElement} from 'shared/ReactElementType';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 2ebb1386a5684..f694d8407ecdf 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -25,7 +25,6 @@ import {
   SuspenseComponent,
 } from './ReactWorkTags';
 import {ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
-import invariant from 'shared/invariant';
 
 import {
   createFiberFromHostInstanceForDeletion,
@@ -293,8 +292,7 @@ function prepareToHydrateHostInstance(
   hostContext: HostContext,
 ): boolean {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -321,8 +319,7 @@ function prepareToHydrateHostInstance(
 
 function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostTextInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -369,8 +366,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
 
 function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -379,11 +375,14 @@ function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   const suspenseState: null | SuspenseState = fiber.memoizedState;
   const suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  if (!suspenseInstance) {
+    throw new Error(
+      'Expected to have a hydrated suspense instance. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
   hydrateSuspenseInstance(suspenseInstance, fiber);
 }
 
@@ -391,8 +390,7 @@ function skipPastDehydratedSuspenseInstance(
   fiber: Fiber,
 ): null | HydratableInstance {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected skipPastDehydratedSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -400,11 +398,14 @@ function skipPastDehydratedSuspenseInstance(
   const suspenseState: null | SuspenseState = fiber.memoizedState;
   const suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  if (!suspenseInstance) {
+    throw new Error(
+      'Expected to have a hydrated suspense instance. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
   return getNextHydratableInstanceAfterSuspenseInstance(suspenseInstance);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index c8e17e0b6374f..3918c014ca146 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -25,7 +25,6 @@ import {
   SuspenseComponent,
 } from './ReactWorkTags';
 import {ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
-import invariant from 'shared/invariant';
 
 import {
   createFiberFromHostInstanceForDeletion,
@@ -293,8 +292,7 @@ function prepareToHydrateHostInstance(
   hostContext: HostContext,
 ): boolean {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -321,8 +319,7 @@ function prepareToHydrateHostInstance(
 
 function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostTextInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -369,8 +366,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
 
 function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -379,11 +375,14 @@ function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   const suspenseState: null | SuspenseState = fiber.memoizedState;
   const suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  if (!suspenseInstance) {
+    throw new Error(
+      'Expected to have a hydrated suspense instance. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
   hydrateSuspenseInstance(suspenseInstance, fiber);
 }
 
@@ -391,8 +390,7 @@ function skipPastDehydratedSuspenseInstance(
   fiber: Fiber,
 ): null | HydratableInstance {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected skipPastDehydratedSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -400,11 +398,14 @@ function skipPastDehydratedSuspenseInstance(
   const suspenseState: null | SuspenseState = fiber.memoizedState;
   const suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  if (!suspenseInstance) {
+    throw new Error(
+      'Expected to have a hydrated suspense instance. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
   return getNextHydratableInstanceAfterSuspenseInstance(suspenseInstance);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 421351b3bda56..2f59cbec27f29 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -38,7 +38,6 @@ import {
   NeedsPropagation,
 } from './ReactFiberFlags';
 
-import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 import {createUpdate, ForceUpdate} from './ReactUpdateQueue.new';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.new';
@@ -269,10 +268,13 @@ function propagateContextChange_eager<T>(
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;
-      invariant(
-        parentSuspense !== null,
-        'We just came from a parent so we must have had a parent. This is a bug in React.',
-      );
+
+      if (parentSuspense === null) {
+        throw new Error(
+          'We just came from a parent so we must have had a parent. This is a bug in React.',
+        );
+      }
+
       parentSuspense.lanes = mergeLanes(parentSuspense.lanes, renderLanes);
       const alternate = parentSuspense.alternate;
       if (alternate !== null) {
@@ -388,10 +390,13 @@ function propagateContextChanges<T>(
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;
-      invariant(
-        parentSuspense !== null,
-        'We just came from a parent so we must have had a parent. This is a bug in React.',
-      );
+
+      if (parentSuspense === null) {
+        throw new Error(
+          'We just came from a parent so we must have had a parent. This is a bug in React.',
+        );
+      }
+
       parentSuspense.lanes = mergeLanes(parentSuspense.lanes, renderLanes);
       const alternate = parentSuspense.alternate;
       if (alternate !== null) {
@@ -493,10 +498,11 @@ function propagateParentContextChanges(
 
     if (parent.tag === ContextProvider) {
       const currentParent = parent.alternate;
-      invariant(
-        currentParent !== null,
-        'Should have a current fiber. This is a bug in React.',
-      );
+
+      if (currentParent === null) {
+        throw new Error('Should have a current fiber. This is a bug in React.');
+      }
+
       const oldProps = currentParent.memoizedProps;
       if (oldProps !== null) {
         const providerType: ReactProviderType<any> = parent.type;
@@ -631,13 +637,14 @@ export function readContext<T>(context: ReactContext<T>): T {
     };
 
     if (lastContextDependency === null) {
-      invariant(
-        currentlyRenderingFiber !== null,
-        'Context can only be read while React is rendering. ' +
-          'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
-          'In function components, you can read it directly in the function body, but not ' +
-          'inside Hooks like useReducer() or useMemo().',
-      );
+      if (currentlyRenderingFiber === null) {
+        throw new Error(
+          'Context can only be read while React is rendering. ' +
+            'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
+            'In function components, you can read it directly in the function body, but not ' +
+            'inside Hooks like useReducer() or useMemo().',
+        );
+      }
 
       // This is the first dependency for this component. Create a new list.
       lastContextDependency = contextItem;
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index 24fd5f6e4331e..0d492397afd8e 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -38,7 +38,6 @@ import {
   NeedsPropagation,
 } from './ReactFiberFlags';
 
-import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 import {createUpdate, ForceUpdate} from './ReactUpdateQueue.old';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.old';
@@ -269,10 +268,13 @@ function propagateContextChange_eager<T>(
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;
-      invariant(
-        parentSuspense !== null,
-        'We just came from a parent so we must have had a parent. This is a bug in React.',
-      );
+
+      if (parentSuspense === null) {
+        throw new Error(
+          'We just came from a parent so we must have had a parent. This is a bug in React.',
+        );
+      }
+
       parentSuspense.lanes = mergeLanes(parentSuspense.lanes, renderLanes);
       const alternate = parentSuspense.alternate;
       if (alternate !== null) {
@@ -388,10 +390,13 @@ function propagateContextChanges<T>(
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;
-      invariant(
-        parentSuspense !== null,
-        'We just came from a parent so we must have had a parent. This is a bug in React.',
-      );
+
+      if (parentSuspense === null) {
+        throw new Error(
+          'We just came from a parent so we must have had a parent. This is a bug in React.',
+        );
+      }
+
       parentSuspense.lanes = mergeLanes(parentSuspense.lanes, renderLanes);
       const alternate = parentSuspense.alternate;
       if (alternate !== null) {
@@ -493,10 +498,11 @@ function propagateParentContextChanges(
 
     if (parent.tag === ContextProvider) {
       const currentParent = parent.alternate;
-      invariant(
-        currentParent !== null,
-        'Should have a current fiber. This is a bug in React.',
-      );
+
+      if (currentParent === null) {
+        throw new Error('Should have a current fiber. This is a bug in React.');
+      }
+
       const oldProps = currentParent.memoizedProps;
       if (oldProps !== null) {
         const providerType: ReactProviderType<any> = parent.type;
@@ -631,13 +637,14 @@ export function readContext<T>(context: ReactContext<T>): T {
     };
 
     if (lastContextDependency === null) {
-      invariant(
-        currentlyRenderingFiber !== null,
-        'Context can only be read while React is rendering. ' +
-          'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
-          'In function components, you can read it directly in the function body, but not ' +
-          'inside Hooks like useReducer() or useMemo().',
-      );
+      if (currentlyRenderingFiber === null) {
+        throw new Error(
+          'Context can only be read while React is rendering. ' +
+            'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
+            'In function components, you can read it directly in the function body, but not ' +
+            'inside Hooks like useReducer() or useMemo().',
+        );
+      }
 
       // This is the first dependency for this component. Create a new list.
       lastContextDependency = contextItem;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 95844fcbf2e8d..6c42165a30347 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -33,7 +33,6 @@ import {
   SuspenseComponent,
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -153,12 +152,11 @@ function findHostInstance(component: Object): PublicInstance | null {
   const fiber = getInstance(component);
   if (fiber === undefined) {
     if (typeof component.render === 'function') {
-      invariant(false, 'Unable to find node on an unmounted component.');
+      throw new Error('Unable to find node on an unmounted component.');
     } else {
-      invariant(
-        false,
-        'Argument appears to not be a ReactComponent. Keys: %s',
-        Object.keys(component),
+      const keys = Object.keys(component).join(',');
+      throw new Error(
+        `Argument appears to not be a ReactComponent. Keys: ${keys}`,
       );
     }
   }
@@ -177,12 +175,11 @@ function findHostInstanceWithWarning(
     const fiber = getInstance(component);
     if (fiber === undefined) {
       if (typeof component.render === 'function') {
-        invariant(false, 'Unable to find node on an unmounted component.');
+        throw new Error('Unable to find node on an unmounted component.');
       } else {
-        invariant(
-          false,
-          'Argument appears to not be a ReactComponent. Keys: %s',
-          Object.keys(component),
+        const keys = Object.keys(component).join(',');
+        throw new Error(
+          `Argument appears to not be a ReactComponent. Keys: ${keys}`,
         );
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 802b1bc97111b..7693cc7fe4006 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -33,7 +33,6 @@ import {
   SuspenseComponent,
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -153,12 +152,11 @@ function findHostInstance(component: Object): PublicInstance | null {
   const fiber = getInstance(component);
   if (fiber === undefined) {
     if (typeof component.render === 'function') {
-      invariant(false, 'Unable to find node on an unmounted component.');
+      throw new Error('Unable to find node on an unmounted component.');
     } else {
-      invariant(
-        false,
-        'Argument appears to not be a ReactComponent. Keys: %s',
-        Object.keys(component),
+      const keys = Object.keys(component).join(',');
+      throw new Error(
+        `Argument appears to not be a ReactComponent. Keys: ${keys}`,
       );
     }
   }
@@ -177,12 +175,11 @@ function findHostInstanceWithWarning(
     const fiber = getInstance(component);
     if (fiber === undefined) {
       if (typeof component.render === 'function') {
-        invariant(false, 'Unable to find node on an unmounted component.');
+        throw new Error('Unable to find node on an unmounted component.');
       } else {
-        invariant(
-          false,
-          'Argument appears to not be a ReactComponent. Keys: %s',
-          Object.keys(component),
+        const keys = Object.keys(component).join(',');
+        throw new Error(
+          `Argument appears to not be a ReactComponent. Keys: ${keys}`,
         );
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 78e88f125a1aa..85728d96bb730 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -474,7 +474,8 @@ function throwException(
       return;
     } else {
       // No boundary was found. Fallthrough to error mode.
-      // TODO: Use invariant so the message is stripped in prod?
+      // TODO: We should never call getComponentNameFromFiber in production.
+      // Log a warning or something to prevent us from accidentally bundling it.
       value = new Error(
         (getComponentNameFromFiber(sourceFiber) || 'A React component') +
           ' suspended while rendering, but no fallback UI was specified.\n' +
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index d2d39793a3bc0..27b0719ba8532 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -474,7 +474,8 @@ function throwException(
       return;
     } else {
       // No boundary was found. Fallthrough to error mode.
-      // TODO: Use invariant so the message is stripped in prod?
+      // TODO: We should never call getComponentNameFromFiber in production.
+      // Log a warning or something to prevent us from accidentally bundling it.
       value = new Error(
         (getComponentNameFromFiber(sourceFiber) || 'A React component') +
           ' suspended while rendering, but no fallback UI was specified.\n' +
diff --git a/packages/react-reconciler/src/ReactFiberTreeReflection.js b/packages/react-reconciler/src/ReactFiberTreeReflection.js
index 510c58eaf2b31..4aa5a203ae3a9 100644
--- a/packages/react-reconciler/src/ReactFiberTreeReflection.js
+++ b/packages/react-reconciler/src/ReactFiberTreeReflection.js
@@ -11,8 +11,6 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Container, SuspenseInstance} from './ReactFiberHostConfig';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 
-import invariant from 'shared/invariant';
-
 import {get as getInstance} from 'shared/ReactInstanceMap';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -116,10 +114,9 @@ export function isMounted(component: React$Component<any, any>): boolean {
 }
 
 function assertIsMounted(fiber) {
-  invariant(
-    getNearestMountedFiber(fiber) === fiber,
-    'Unable to find node on an unmounted component.',
-  );
+  if (getNearestMountedFiber(fiber) !== fiber) {
+    throw new Error('Unable to find node on an unmounted component.');
+  }
 }
 
 export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
@@ -127,10 +124,11 @@ export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
   if (!alternate) {
     // If there is no alternate, then we only need to check if it is mounted.
     const nearestMounted = getNearestMountedFiber(fiber);
-    invariant(
-      nearestMounted !== null,
-      'Unable to find node on an unmounted component.',
-    );
+
+    if (nearestMounted === null) {
+      throw new Error('Unable to find node on an unmounted component.');
+    }
+
     if (nearestMounted !== fiber) {
       return null;
     }
@@ -180,9 +178,10 @@ export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
         }
         child = child.sibling;
       }
+
       // We should never have an alternate for any mounting node. So the only
       // way this could possibly happen is if this was unmounted, if at all.
-      invariant(false, 'Unable to find node on an unmounted component.');
+      throw new Error('Unable to find node on an unmounted component.');
     }
 
     if (a.return !== b.return) {
@@ -233,26 +232,30 @@ export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
           }
           child = child.sibling;
         }
-        invariant(
-          didFindChild,
-          'Child was not found in either parent set. This indicates a bug ' +
-            'in React related to the return pointer. Please file an issue.',
-        );
+
+        if (!didFindChild) {
+          throw new Error(
+            'Child was not found in either parent set. This indicates a bug ' +
+              'in React related to the return pointer. Please file an issue.',
+          );
+        }
       }
     }
 
-    invariant(
-      a.alternate === b,
-      "Return fibers should always be each others' alternates. " +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    if (a.alternate !== b) {
+      throw new Error(
+        "Return fibers should always be each others' alternates. " +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
   }
+
   // If the root is not a host container, we're in a disconnected tree. I.e.
   // unmounted.
-  invariant(
-    a.tag === HostRoot,
-    'Unable to find node on an unmounted component.',
-  );
+  if (a.tag !== HostRoot) {
+    throw new Error('Unable to find node on an unmounted component.');
+  }
+
   if (a.stateNode.current === a) {
     // We've determined that A is the current branch.
     return fiber;
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index 152837286f5d2..ba8bd4b573957 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -51,8 +51,6 @@ import {
 } from './ReactFiberCacheComponent.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
 
-import invariant from 'shared/invariant';
-
 function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
   switch (workInProgress.tag) {
     case ClassComponent: {
@@ -85,11 +83,14 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
       const flags = workInProgress.flags;
-      invariant(
-        (flags & DidCapture) === NoFlags,
-        'The root failed to unmount after an error. This is likely a bug in ' +
-          'React. Please file an issue.',
-      );
+
+      if ((flags & DidCapture) !== NoFlags) {
+        throw new Error(
+          'The root failed to unmount after an error. This is likely a bug in ' +
+            'React. Please file an issue.',
+        );
+      }
+
       workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
       return workInProgress;
     }
@@ -104,11 +105,13 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
         const suspenseState: null | SuspenseState =
           workInProgress.memoizedState;
         if (suspenseState !== null && suspenseState.dehydrated !== null) {
-          invariant(
-            workInProgress.alternate !== null,
-            'Threw in newly mounted dehydrated component. This is likely a bug in ' +
-              'React. Please file an issue.',
-          );
+          if (workInProgress.alternate === null) {
+            throw new Error(
+              'Threw in newly mounted dehydrated component. This is likely a bug in ' +
+                'React. Please file an issue.',
+            );
+          }
+
           resetHydrationState();
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index 88861db778be3..ad8e479700db0 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -51,8 +51,6 @@ import {
 } from './ReactFiberCacheComponent.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
 
-import invariant from 'shared/invariant';
-
 function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
   switch (workInProgress.tag) {
     case ClassComponent: {
@@ -85,11 +83,14 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
       const flags = workInProgress.flags;
-      invariant(
-        (flags & DidCapture) === NoFlags,
-        'The root failed to unmount after an error. This is likely a bug in ' +
-          'React. Please file an issue.',
-      );
+
+      if ((flags & DidCapture) !== NoFlags) {
+        throw new Error(
+          'The root failed to unmount after an error. This is likely a bug in ' +
+            'React. Please file an issue.',
+        );
+      }
+
       workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
       return workInProgress;
     }
@@ -104,11 +105,13 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
         const suspenseState: null | SuspenseState =
           workInProgress.memoizedState;
         if (suspenseState !== null && suspenseState.dehydrated !== null) {
-          invariant(
-            workInProgress.alternate !== null,
-            'Threw in newly mounted dehydrated component. This is likely a bug in ' +
-              'React. Please file an issue.',
-          );
+          if (workInProgress.alternate === null) {
+            throw new Error(
+              'Threw in newly mounted dehydrated component. This is likely a bug in ' +
+                'React. Please file an issue.',
+            );
+          }
+
           resetHydrationState();
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 830ae6500663e..aaeac5fdb22e1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -34,7 +34,6 @@ import {
   warnOnSubscriptionInsideStartTransition,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 
 import {
@@ -737,10 +736,9 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   currentEventTime = NoTimestamp;
   currentEventTransitionLane = NoLanes;
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   // Flush any pending passive effects before deciding which lanes to work on,
   // in case they schedule additional work.
@@ -878,7 +876,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
   switch (exitStatus) {
     case RootIncomplete:
     case RootFatalErrored: {
-      invariant(false, 'Root did not complete. This is a bug in React.');
+      throw new Error('Root did not complete. This is a bug in React.');
     }
     // Flow knows about invariant, so it complains if I add a break
     // statement, but eslint doesn't know about invariant, so it complains
@@ -981,7 +979,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
       break;
     }
     default: {
-      invariant(false, 'Unknown root exit status.');
+      throw new Error('Unknown root exit status.');
     }
   }
 }
@@ -1055,10 +1053,9 @@ function performSyncWorkOnRoot(root) {
     syncNestedUpdateFlag();
   }
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   flushPassiveEffects();
 
@@ -1525,8 +1522,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
 
   if (workInProgress !== null) {
     // This is a sync render, so we should have finished the whole tree.
-    invariant(
-      false,
+    throw new Error(
       'Cannot commit an incomplete root. This error is likely caused by a ' +
         'bug in React. Please file an issue.',
     );
@@ -1796,10 +1792,9 @@ function commitRootImpl(root, renderPriorityLevel) {
   } while (rootWithPendingPassiveEffects !== null);
   flushRenderPhaseStrictModeWarningsInDEV();
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   const finishedWork = root.finishedWork;
   const lanes = root.finishedLanes;
@@ -1839,11 +1834,12 @@ function commitRootImpl(root, renderPriorityLevel) {
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
 
-  invariant(
-    finishedWork !== root.current,
-    'Cannot commit the same tree as before. This error is likely caused by ' +
-      'a bug in React. Please file an issue.',
-  );
+  if (finishedWork === root.current) {
+    throw new Error(
+      'Cannot commit the same tree as before. This error is likely caused by ' +
+        'a bug in React. Please file an issue.',
+    );
+  }
 
   // commitRoot never returns a continuation; it always finishes synchronously.
   // So we can clear these now to allow a new callback to be scheduled.
@@ -2154,10 +2150,9 @@ function flushPassiveEffectsImpl() {
   // because it's only used for profiling), but it's a refactor hazard.
   pendingPassiveEffectsLanes = NoLanes;
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Cannot flush passive effects while already rendering.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Cannot flush passive effects while already rendering.');
+  }
 
   if (__DEV__) {
     if (enableDebugTracing) {
@@ -2418,8 +2413,7 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
         retryCache = boundaryFiber.stateNode;
         break;
       default:
-        invariant(
-          false,
+        throw new Error(
           'Pinged unknown suspense boundary type. ' +
             'This is probably a bug in React.',
         );
@@ -2466,8 +2460,8 @@ function checkForNestedUpdates() {
   if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
     nestedUpdateCount = 0;
     rootWithNestedUpdates = null;
-    invariant(
-      false,
+
+    throw new Error(
       'Maximum update depth exceeded. This can happen when a component ' +
         'repeatedly calls setState inside componentWillUpdate or ' +
         'componentDidUpdate. React limits the number of nested updates to ' +
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 9cfea1563a18e..67984298a5dea 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -34,7 +34,6 @@ import {
   warnOnSubscriptionInsideStartTransition,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 
 import {
@@ -737,10 +736,9 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   currentEventTime = NoTimestamp;
   currentEventTransitionLane = NoLanes;
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   // Flush any pending passive effects before deciding which lanes to work on,
   // in case they schedule additional work.
@@ -878,7 +876,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
   switch (exitStatus) {
     case RootIncomplete:
     case RootFatalErrored: {
-      invariant(false, 'Root did not complete. This is a bug in React.');
+      throw new Error('Root did not complete. This is a bug in React.');
     }
     // Flow knows about invariant, so it complains if I add a break
     // statement, but eslint doesn't know about invariant, so it complains
@@ -981,7 +979,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
       break;
     }
     default: {
-      invariant(false, 'Unknown root exit status.');
+      throw new Error('Unknown root exit status.');
     }
   }
 }
@@ -1055,10 +1053,9 @@ function performSyncWorkOnRoot(root) {
     syncNestedUpdateFlag();
   }
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   flushPassiveEffects();
 
@@ -1525,8 +1522,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
 
   if (workInProgress !== null) {
     // This is a sync render, so we should have finished the whole tree.
-    invariant(
-      false,
+    throw new Error(
       'Cannot commit an incomplete root. This error is likely caused by a ' +
         'bug in React. Please file an issue.',
     );
@@ -1796,10 +1792,9 @@ function commitRootImpl(root, renderPriorityLevel) {
   } while (rootWithPendingPassiveEffects !== null);
   flushRenderPhaseStrictModeWarningsInDEV();
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   const finishedWork = root.finishedWork;
   const lanes = root.finishedLanes;
@@ -1839,11 +1834,12 @@ function commitRootImpl(root, renderPriorityLevel) {
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
 
-  invariant(
-    finishedWork !== root.current,
-    'Cannot commit the same tree as before. This error is likely caused by ' +
-      'a bug in React. Please file an issue.',
-  );
+  if (finishedWork === root.current) {
+    throw new Error(
+      'Cannot commit the same tree as before. This error is likely caused by ' +
+        'a bug in React. Please file an issue.',
+    );
+  }
 
   // commitRoot never returns a continuation; it always finishes synchronously.
   // So we can clear these now to allow a new callback to be scheduled.
@@ -2154,10 +2150,9 @@ function flushPassiveEffectsImpl() {
   // because it's only used for profiling), but it's a refactor hazard.
   pendingPassiveEffectsLanes = NoLanes;
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Cannot flush passive effects while already rendering.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Cannot flush passive effects while already rendering.');
+  }
 
   if (__DEV__) {
     if (enableDebugTracing) {
@@ -2418,8 +2413,7 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
         retryCache = boundaryFiber.stateNode;
         break;
       default:
-        invariant(
-          false,
+        throw new Error(
           'Pinged unknown suspense boundary type. ' +
             'This is probably a bug in React.',
         );
@@ -2466,8 +2460,8 @@ function checkForNestedUpdates() {
   if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
     nestedUpdateCount = 0;
     rootWithNestedUpdates = null;
-    invariant(
-      false,
+
+    throw new Error(
       'Maximum update depth exceeded. This can happen when a component ' +
         'repeatedly calls setState inside componentWillUpdate or ' +
         'componentDidUpdate. React limits the number of nested updates to ' +
diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js
index 58e888c168585..adadc8ed73e80 100644
--- a/packages/react-reconciler/src/ReactTestSelectors.js
+++ b/packages/react-reconciler/src/ReactTestSelectors.js
@@ -10,7 +10,6 @@
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {Instance} from './ReactFiberHostConfig';
 
-import invariant from 'shared/invariant';
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {
@@ -116,17 +115,22 @@ export function createTestNameSelector(id: string): TestNameSelector {
 function findFiberRootForHostRoot(hostRoot: Instance): Fiber {
   const maybeFiber = getInstanceFromNode((hostRoot: any));
   if (maybeFiber != null) {
-    invariant(
-      typeof maybeFiber.memoizedProps['data-testname'] === 'string',
-      'Invalid host root specified. Should be either a React container or a node with a testname attribute.',
-    );
+    if (typeof maybeFiber.memoizedProps['data-testname'] !== 'string') {
+      throw new Error(
+        'Invalid host root specified. Should be either a React container or a node with a testname attribute.',
+      );
+    }
+
     return ((maybeFiber: any): Fiber);
   } else {
     const fiberRoot = findFiberRoot(hostRoot);
-    invariant(
-      fiberRoot !== null,
-      'Could not find React container within specified host subtree.',
-    );
+
+    if (fiberRoot === null) {
+      throw new Error(
+        'Could not find React container within specified host subtree.',
+      );
+    }
+
     // The Flow type for FiberRoot is a little funky.
     // createFiberRoot() cheats this by treating the root as :any and adding stateNode lazily.
     return ((fiberRoot: any).stateNode.current: Fiber);
@@ -179,8 +183,7 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {
       }
       break;
     default:
-      invariant(null, 'Invalid selector type %s specified.', selector);
-      break;
+      throw new Error('Invalid selector type specified.');
   }
 
   return false;
@@ -200,11 +203,8 @@ function selectorToString(selector: Selector): string | null {
     case TEST_NAME_TYPE:
       return `[data-testname="${((selector: any): TestNameSelector).value}"]`;
     default:
-      invariant(null, 'Invalid selector type %s specified.', selector);
-      break;
+      throw new Error('Invalid selector type specified.');
   }
-
-  return null;
 }
 
 function findPaths(root: Fiber, selectors: Array<Selector>): Array<Fiber> {
@@ -277,7 +277,7 @@ export function findAllNodes(
   selectors: Array<Selector>,
 ): Array<Instance> {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const root = findFiberRootForHostRoot(hostRoot);
@@ -311,7 +311,7 @@ export function getFindAllNodesFailureDescription(
   selectors: Array<Selector>,
 ): string | null {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const root = findFiberRootForHostRoot(hostRoot);
@@ -376,7 +376,7 @@ export function findBoundingRects(
   selectors: Array<Selector>,
 ): Array<BoundingRect> {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const instanceRoots = findAllNodes(hostRoot, selectors);
@@ -466,7 +466,7 @@ export function focusWithin(
   selectors: Array<Selector>,
 ): boolean {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const root = findFiberRootForHostRoot(hostRoot);
@@ -516,7 +516,7 @@ export function observeVisibleRects(
   options?: IntersectionObserverOptions,
 ): {|disconnect: () => void|} {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const instanceRoots = findAllNodes(hostRoot, selectors);
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index cbfe307b903f2..c9a980890a0ad 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -112,8 +112,6 @@ import {
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
 
-import invariant from 'shared/invariant';
-
 export type Update<State> = {|
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
@@ -656,12 +654,13 @@ export function processUpdateQueue<State>(
 }
 
 function callCallback(callback, context) {
-  invariant(
-    typeof callback === 'function',
-    'Invalid argument passed as callback. Expected a function. Instead ' +
-      'received: %s',
-    callback,
-  );
+  if (typeof callback !== 'function') {
+    throw new Error(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        `received: ${callback}`,
+    );
+  }
+
   callback.call(context);
 }
 
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index ece4321d6bfdb..9ef09b17efd10 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -112,8 +112,6 @@ import {
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
 
-import invariant from 'shared/invariant';
-
 export type Update<State> = {|
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
@@ -656,12 +654,13 @@ export function processUpdateQueue<State>(
 }
 
 function callCallback(callback, context) {
-  invariant(
-    typeof callback === 'function',
-    'Invalid argument passed as callback. Expected a function. Instead ' +
-      'received: %s',
-    callback,
-  );
+  if (typeof callback !== 'function') {
+    throw new Error(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        `received: ${callback}`,
+    );
+  }
+
   callback.call(context);
 }
 
diff --git a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js
index f0bd70db61426..33fc912b90e6c 100644
--- a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js
+++ b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js
@@ -15,12 +15,11 @@ import {ClassComponent} from '../ReactWorkTags';
 // Module provided by RN:
 import {ReactFiberErrorDialog as RNImpl} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
-import invariant from 'shared/invariant';
-
-invariant(
-  typeof RNImpl.showErrorDialog === 'function',
-  'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
-);
+if (typeof RNImpl.showErrorDialog !== 'function') {
+  throw new Error(
+    'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
+  );
+}
 
 export function showErrorDialog(
   boundary: Fiber,
diff --git a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js
index f0a9d92593b1a..617e8afbde90e 100644
--- a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js
+++ b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js
@@ -12,14 +12,14 @@ import type {CapturedValue} from '../ReactCapturedValue';
 
 import {ClassComponent} from '../ReactWorkTags';
 
-import invariant from 'shared/invariant';
-
 // Provided by www
 const ReactFiberErrorDialogWWW = require('ReactFiberErrorDialog');
-invariant(
-  typeof ReactFiberErrorDialogWWW.showErrorDialog === 'function',
-  'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
-);
+
+if (typeof ReactFiberErrorDialogWWW.showErrorDialog !== 'function') {
+  throw new Error(
+    'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
+  );
+}
 
 export function showErrorDialog(
   boundary: Fiber,
diff --git a/packages/react-server/src/ReactFizzContext.js b/packages/react-server/src/ReactFizzContext.js
index 7837d15753d49..3834a6f1076ff 100644
--- a/packages/react-server/src/ReactFizzContext.js
+++ b/packages/react-server/src/ReactFizzContext.js
@@ -9,7 +9,6 @@
 
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import checkPropTypes from 'shared/checkPropTypes';
 
 let warnedAboutMissingGetChildContext;
@@ -77,12 +76,12 @@ export function processChildContext(
 
     const childContext = instance.getChildContext();
     for (const contextKey in childContext) {
-      invariant(
-        contextKey in childContextTypes,
-        '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-        getComponentNameFromType(type) || 'Unknown',
-        contextKey,
-      );
+      if (!(contextKey in childContextTypes)) {
+        throw new Error(
+          `${getComponentNameFromType(type) ||
+            'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+        );
+      }
     }
     if (__DEV__) {
       const name = getComponentNameFromType(type) || 'Unknown';
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 860dc63962dab..6370f61b37735 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -22,7 +22,6 @@ import {readContext as readContextImpl} from './ReactFizzNewContext';
 
 import {makeServerID} from './ReactServerFormatConfig';
 
-import invariant from 'shared/invariant';
 import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
@@ -64,15 +63,17 @@ let isInHookUserCodeInDev = false;
 let currentHookNameInDev: ?string;
 
 function resolveCurrentlyRenderingComponent(): Object {
-  invariant(
-    currentlyRenderingComponent !== null,
-    'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
-      ' one of the following reasons:\n' +
-      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
-      '2. You might be breaking the Rules of Hooks\n' +
-      '3. You might have more than one copy of React in the same app\n' +
-      'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
-  );
+  if (currentlyRenderingComponent === null) {
+    throw new Error(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+  }
+
   if (__DEV__) {
     if (isInHookUserCodeInDev) {
       console.error(
@@ -128,7 +129,7 @@ function areHookInputsEqual(
 
 function createHook(): Hook {
   if (numberOfReRenders > 0) {
-    invariant(false, 'Rendered more hooks than during the previous render');
+    throw new Error('Rendered more hooks than during the previous render');
   }
   return {
     memoizedState: null,
@@ -219,7 +220,7 @@ export function resetHooksState(): void {
 function getCacheForType<T>(resourceType: () => T): T {
   // TODO: This should silently mark this as client rendered since it's not necesssarily
   // considered an error. It needs to work for things like Flight though.
-  invariant(false, 'Not implemented.');
+  throw new Error('Not implemented.');
 }
 
 function readContext<T>(context: ReactContext<T>): T {
@@ -406,11 +407,12 @@ function dispatchAction<A>(
   queue: UpdateQueue<A>,
   action: A,
 ) {
-  invariant(
-    numberOfReRenders < RE_RENDER_LIMIT,
-    'Too many re-renders. React limits the number of renders to prevent ' +
-      'an infinite loop.',
-  );
+  if (numberOfReRenders >= RE_RENDER_LIMIT) {
+    throw new Error(
+      'Too many re-renders. React limits the number of renders to prevent ' +
+        'an infinite loop.',
+    );
+  }
 
   if (componentIdentity === currentlyRenderingComponent) {
     // This is a render phase update. Stash it in a lazily-created map of
@@ -467,8 +469,7 @@ function useSyncExternalStore<T>(
   getServerSnapshot?: () => T,
 ): T {
   if (getServerSnapshot === undefined) {
-    invariant(
-      false,
+    throw new Error(
       'Missing getServerSnapshot, which is required for ' +
         'server-rendered content. Will revert to client rendering.',
     );
@@ -482,7 +483,7 @@ function useDeferredValue<T>(value: T): T {
 }
 
 function unsupportedStartTransition() {
-  invariant(false, 'startTransition cannot be called during server rendering.');
+  throw new Error('startTransition cannot be called during server rendering.');
 }
 
 function useTransition(): [boolean, (callback: () => void) => void] {
@@ -495,7 +496,7 @@ function useOpaqueIdentifier(): OpaqueIDType {
 }
 
 function unsupportedRefresh() {
-  invariant(false, 'Cache cannot be refreshed during server rendering.');
+  throw new Error('Cache cannot be refreshed during server rendering.');
 }
 
 function useCacheRefresh(): <T>(?() => T, ?T) => void {
diff --git a/packages/react-server/src/ReactFizzNewContext.js b/packages/react-server/src/ReactFizzNewContext.js
index 43f364717d81f..0cb879ef780d6 100644
--- a/packages/react-server/src/ReactFizzNewContext.js
+++ b/packages/react-server/src/ReactFizzNewContext.js
@@ -11,8 +11,6 @@ import type {ReactContext} from 'shared/ReactTypes';
 
 import {isPrimaryRenderer} from './ReactServerFormatConfig';
 
-import invariant from 'shared/invariant';
-
 let rendererSigil;
 if (__DEV__) {
   // Use this to detect multiple renderers using the same context
@@ -67,15 +65,18 @@ function popToNearestCommonAncestor(
     const parentPrev = prev.parent;
     const parentNext = next.parent;
     if (parentPrev === null) {
-      invariant(
-        parentNext === null,
-        'The stacks must reach the root at the same time. This is a bug in React.',
-      );
+      if (parentNext !== null) {
+        throw new Error(
+          'The stacks must reach the root at the same time. This is a bug in React.',
+        );
+      }
     } else {
-      invariant(
-        parentNext !== null,
-        'The stacks must reach the root at the same time. This is a bug in React.',
-      );
+      if (parentNext === null) {
+        throw new Error(
+          'The stacks must reach the root at the same time. This is a bug in React.',
+        );
+      }
+
       popToNearestCommonAncestor(parentPrev, parentNext);
       // On the way back, we push the new ones that weren't common.
       pushNode(next);
@@ -105,10 +106,13 @@ function popPreviousToCommonLevel(
 ): void {
   popNode(prev);
   const parentPrev = prev.parent;
-  invariant(
-    parentPrev !== null,
-    'The depth must equal at least at zero before reaching the root. This is a bug in React.',
-  );
+
+  if (parentPrev === null) {
+    throw new Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.',
+    );
+  }
+
   if (parentPrev.depth === next.depth) {
     // We found the same level. Now we just need to find a shared ancestor.
     popToNearestCommonAncestor(parentPrev, next);
@@ -123,10 +127,13 @@ function popNextToCommonLevel(
   next: ContextNode<any>,
 ): void {
   const parentNext = next.parent;
-  invariant(
-    parentNext !== null,
-    'The depth must equal at least at zero before reaching the root. This is a bug in React.',
-  );
+
+  if (parentNext === null) {
+    throw new Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.',
+    );
+  }
+
   if (prev.depth === parentNext.depth) {
     // We found the same level. Now we just need to find a shared ancestor.
     popToNearestCommonAncestor(prev, parentNext);
@@ -221,10 +228,13 @@ export function pushProvider<T>(
 
 export function popProvider<T>(context: ReactContext<T>): ContextSnapshot {
   const prevSnapshot = currentActiveSnapshot;
-  invariant(
-    prevSnapshot !== null,
-    'Tried to pop a Context at the root of the app. This is a bug in React.',
-  );
+
+  if (prevSnapshot === null) {
+    throw new Error(
+      'Tried to pop a Context at the root of the app. This is a bug in React.',
+    );
+  }
+
   if (__DEV__) {
     if (prevSnapshot.context !== context) {
       console.error(
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index e9396c861ee4c..4ab2f06d518db 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -113,7 +113,6 @@ import {
 } from 'shared/ReactFeatureFlags';
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
@@ -984,7 +983,7 @@ function renderElement(
         renderNodeDestructive(request, task, props.children);
         return;
       }
-      invariant(false, 'ReactDOMServer does not yet support scope components.');
+      throw new Error('ReactDOMServer does not yet support scope components.');
     }
     // eslint-disable-next-line-no-fallthrough
     case REACT_SUSPENSE_TYPE: {
@@ -1039,13 +1038,11 @@ function renderElement(
         'named imports.';
     }
   }
-  invariant(
-    false,
+
+  throw new Error(
     'Element type is invalid: expected a string (for built-in ' +
       'components) or a class/function (for composite components) ' +
-      'but got: %s.%s',
-    type == null ? type : typeof type,
-    info,
+      `but got: ${type == null ? type : typeof type}.${info}`,
   );
 }
 
@@ -1106,8 +1103,7 @@ function renderNodeDestructive(
         return;
       }
       case REACT_PORTAL_TYPE:
-        invariant(
-          false,
+        throw new Error(
           'Portals are not currently supported by the server renderer. ' +
             'Render them conditionally so that they only appear on the client render.',
         );
@@ -1157,14 +1153,15 @@ function renderNodeDestructive(
     }
 
     const childString = Object.prototype.toString.call(node);
-    invariant(
-      false,
-      'Objects are not valid as a React child (found: %s). ' +
+
+    throw new Error(
+      `Objects are not valid as a React child (found: ${
+        childString === '[object Object]'
+          ? 'object with keys {' + Object.keys(node).join(', ') + '}'
+          : childString
+      }). ` +
         'If you meant to render a collection of children, use an array ' +
         'instead.',
-      childString === '[object Object]'
-        ? 'object with keys {' + Object.keys(node).join(', ') + '}'
-        : childString,
     );
   }
 
@@ -1370,10 +1367,12 @@ function finishedTask(
 ) {
   if (boundary === null) {
     if (segment.parentFlushed) {
-      invariant(
-        request.completedRootSegment === null,
-        'There can only be one root segment. This is a bug in React.',
-      );
+      if (request.completedRootSegment !== null) {
+        throw new Error(
+          'There can only be one root segment. This is a bug in React.',
+        );
+      }
+
       request.completedRootSegment = segment;
     }
     request.pendingRootTasks--;
@@ -1557,8 +1556,7 @@ function flushSubtree(
       return r;
     }
     default: {
-      invariant(
-        false,
+      throw new Error(
         'Aborted, errored or already flushed boundaries should not be flushed again. This is a bug in React.',
       );
     }
@@ -1640,10 +1638,13 @@ function flushSegment(
     writeStartCompletedSuspenseBoundary(destination, request.responseState);
 
     const completedSegments = boundary.completedSegments;
-    invariant(
-      completedSegments.length === 1,
-      'A previously unvisited boundary must have exactly one root segment. This is a bug in React.',
-    );
+
+    if (completedSegments.length !== 1) {
+      throw new Error(
+        'A previously unvisited boundary must have exactly one root segment. This is a bug in React.',
+      );
+    }
+
     const contentSegment = completedSegments[0];
     flushSegment(request, destination, contentSegment);
 
@@ -1741,10 +1742,13 @@ function flushPartiallyCompletedSegment(
     // This segment wasn't previously referred to. This happens at the root of
     // a boundary. We make kind of a leap here and assume this is the root.
     const rootSegmentID = (segment.id = boundary.rootSegmentID);
-    invariant(
-      rootSegmentID !== -1,
-      'A root segment ID must have been assigned by now. This is a bug in React.',
-    );
+
+    if (rootSegmentID === -1) {
+      throw new Error(
+        'A root segment ID must have been assigned by now. This is a bug in React.',
+      );
+    }
+
     return flushSegmentContainer(request, destination, segment);
   } else {
     flushSegmentContainer(request, destination, segment);
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 8247a904ec997..7bd7a95c25611 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -43,7 +43,6 @@ import {
 } from 'shared/ReactSymbols';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 type ReactJSONValue =
@@ -141,8 +140,7 @@ function attemptResolveElement(
     // When the ref moves to the regular props object this will implicitly
     // throw for functions. We could probably relax it to a DEV warning for other
     // cases.
-    invariant(
-      false,
+    throw new Error(
       'Refs cannot be used in server components, nor passed to client components.',
     );
   }
@@ -178,10 +176,8 @@ function attemptResolveElement(
       }
     }
   }
-  invariant(
-    false,
-    'Unsupported server component type: %s',
-    describeValueForErrorMessage(type),
+  throw new Error(
+    `Unsupported server component type: ${describeValueForErrorMessage(type)}`,
   );
 }
 
@@ -395,8 +391,7 @@ export function resolveModelToJSON(
     case REACT_ELEMENT_TYPE:
       return '$';
     case REACT_LAZY_TYPE:
-      invariant(
-        false,
+      throw new Error(
         'React Lazy Components are not yet supported on the server.',
       );
   }
@@ -537,23 +532,25 @@ export function resolveModelToJSON(
 
   if (typeof value === 'function') {
     if (/^on[A-Z]/.test(key)) {
-      invariant(
-        false,
+      throw new Error(
         'Event handlers cannot be passed to client component props. ' +
-          'Remove %s from these props if possible: %s\n' +
+          `Remove ${describeKeyForErrorMessage(
+            key,
+          )} from these props if possible: ${describeObjectForErrorMessage(
+            parent,
+          )}
+` +
           'If you need interactivity, consider converting part of this to a client component.',
-        describeKeyForErrorMessage(key),
-        describeObjectForErrorMessage(parent),
       );
     } else {
-      invariant(
-        false,
+      throw new Error(
         'Functions cannot be passed directly to client components ' +
           "because they're not serializable. " +
-          'Remove %s (%s) from this object, or avoid the entire object: %s',
-        describeKeyForErrorMessage(key),
-        value.displayName || value.name || 'function',
-        describeObjectForErrorMessage(parent),
+          `Remove ${describeKeyForErrorMessage(key)} (${value.displayName ||
+            value.name ||
+            'function'}) from this object, or avoid the entire object: ${describeObjectForErrorMessage(
+            parent,
+          )}`,
       );
     }
   }
@@ -565,15 +562,19 @@ export function resolveModelToJSON(
       return serializeByValueID(existingId);
     }
     const name = value.description;
-    invariant(
-      Symbol.for(name) === value,
-      'Only global symbols received from Symbol.for(...) can be passed to client components. ' +
-        'The symbol Symbol.for(%s) cannot be found among global symbols. ' +
-        'Remove %s from this object, or avoid the entire object: %s',
-      value.description,
-      describeKeyForErrorMessage(key),
-      describeObjectForErrorMessage(parent),
-    );
+
+    if (Symbol.for(name) !== value) {
+      throw new Error(
+        'Only global symbols received from Symbol.for(...) can be passed to client components. ' +
+          `The symbol Symbol.for(${value.description}) cannot be found among global symbols. ` +
+          `Remove ${describeKeyForErrorMessage(
+            key,
+          )} from this object, or avoid the entire object: ${describeObjectForErrorMessage(
+            parent,
+          )}`,
+      );
+    }
+
     request.pendingChunks++;
     const symbolId = request.nextChunkId++;
     emitSymbolChunk(request, symbolId, name);
@@ -583,23 +584,23 @@ export function resolveModelToJSON(
 
   // $FlowFixMe: bigint isn't added to Flow yet.
   if (typeof value === 'bigint') {
-    invariant(
-      false,
-      'BigInt (%s) is not yet supported in client component props. ' +
-        'Remove %s from this object or use a plain number instead: %s',
-      value,
-      describeKeyForErrorMessage(key),
-      describeObjectForErrorMessage(parent),
+    throw new Error(
+      `BigInt (${value}) is not yet supported in client component props. ` +
+        `Remove ${describeKeyForErrorMessage(
+          key,
+        )} from this object or use a plain number instead: ${describeObjectForErrorMessage(
+          parent,
+        )}`,
     );
   }
 
-  invariant(
-    false,
-    'Type %s is not supported in client component props. ' +
-      'Remove %s from this object, or avoid the entire object: %s',
-    typeof value,
-    describeKeyForErrorMessage(key),
-    describeObjectForErrorMessage(parent),
+  throw new Error(
+    `Type ${typeof value} is not supported in client component props. ` +
+      `Remove ${describeKeyForErrorMessage(
+        key,
+      )} from this object, or avoid the entire object: ${describeObjectForErrorMessage(
+        parent,
+      )}`,
   );
 }
 
@@ -799,14 +800,15 @@ export function startFlowing(request: Request, destination: Destination): void {
 }
 
 function unsupportedHook(): void {
-  invariant(false, 'This Hook is not supported in Server Components.');
+  throw new Error('This Hook is not supported in Server Components.');
 }
 
 function unsupportedRefresh(): void {
-  invariant(
-    currentCache,
-    'Refreshing the cache is not supported in Server Components.',
-  );
+  if (!currentCache) {
+    throw new Error(
+      'Refreshing the cache is not supported in Server Components.',
+    );
+  }
 }
 
 let currentCache: Map<Function, mixed> | null = null;
@@ -822,10 +824,10 @@ const Dispatcher: DispatcherType = {
   useDeferredValue: (unsupportedHook: any),
   useTransition: (unsupportedHook: any),
   getCacheForType<T>(resourceType: () => T): T {
-    invariant(
-      currentCache,
-      'Reading the cache is only supported while rendering.',
-    );
+    if (!currentCache) {
+      throw new Error('Reading the cache is only supported while rendering.');
+    }
+
     let entry: T | void = (currentCache.get(resourceType): any);
     if (entry === undefined) {
       entry = resourceType();
diff --git a/packages/react-server/src/ReactFlightServerConfig.js b/packages/react-server/src/ReactFlightServerConfig.js
index 49c9752540528..2829adc569256 100644
--- a/packages/react-server/src/ReactFlightServerConfig.js
+++ b/packages/react-server/src/ReactFlightServerConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* eslint-disable react-internal/prod-error-codes */
 
 // We expect that our Rollup, Jest, and Flow configurations
 // always shim this module with the corresponding host config
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-server/src/ReactServerFormatConfig.js b/packages/react-server/src/ReactServerFormatConfig.js
index 49c9752540528..2829adc569256 100644
--- a/packages/react-server/src/ReactServerFormatConfig.js
+++ b/packages/react-server/src/ReactServerFormatConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* eslint-disable react-internal/prod-error-codes */
 
 // We expect that our Rollup, Jest, and Flow configurations
 // always shim this module with the corresponding host config
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-server/src/ReactServerStreamConfig.js b/packages/react-server/src/ReactServerStreamConfig.js
index 49c9752540528..2829adc569256 100644
--- a/packages/react-server/src/ReactServerStreamConfig.js
+++ b/packages/react-server/src/ReactServerStreamConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* eslint-disable react-internal/prod-error-codes */
 
 // We expect that our Rollup, Jest, and Flow configurations
 // always shim this module with the corresponding host config
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index b4b57c68b5f56..a3fe873729828 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -9,12 +9,11 @@
 
 import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import invariant from 'shared/invariant';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
 function unsupported() {
-  invariant(false, 'This feature is not supported by ReactSuspenseTestUtils.');
+  throw new Error('This feature is not supported by ReactSuspenseTestUtils.');
 }
 
 export function waitForSuspense<T>(fn: () => T): Promise<T> {
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index b6d047e0e4810..2e49968e85ded 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -40,7 +40,6 @@ import {
   IncompleteClassComponent,
   ScopeComponent,
 } from 'react-reconciler/src/ReactWorkTags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactVersion from 'shared/ReactVersion';
@@ -219,10 +218,8 @@ function toTree(node: ?Fiber) {
     case ScopeComponent:
       return childrenToTree(node.child);
     default:
-      invariant(
-        false,
-        'toTree() does not yet know how to handle nodes with tag=%s',
-        node.tag,
+      throw new Error(
+        `toTree() does not yet know how to handle nodes with tag=${node.tag}`,
       );
   }
 }
@@ -282,21 +279,25 @@ class ReactTestInstance {
   _currentFiber(): Fiber {
     // Throws if this component has been unmounted.
     const fiber = findCurrentFiberUsingSlowPath(this._fiber);
-    invariant(
-      fiber !== null,
-      "Can't read from currently-mounting component. This error is likely " +
-        'caused by a bug in React. Please file an issue.',
-    );
+
+    if (fiber === null) {
+      throw new Error(
+        "Can't read from currently-mounting component. This error is likely " +
+          'caused by a bug in React. Please file an issue.',
+      );
+    }
+
     return fiber;
   }
 
   constructor(fiber: Fiber) {
-    invariant(
-      validWrapperTypes.has(fiber.tag),
-      'Unexpected object passed to ReactTestInstance constructor (tag: %s). ' +
-        'This is probably a bug in React.',
-      fiber.tag,
-    );
+    if (!validWrapperTypes.has(fiber.tag)) {
+      throw new Error(
+        `Unexpected object passed to ReactTestInstance constructor (tag: ${fiber.tag}). ` +
+          'This is probably a bug in React.',
+      );
+    }
+
     this._fiber = fiber;
   }
 
@@ -471,7 +472,11 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     isStrictMode,
     concurrentUpdatesByDefault,
   );
-  invariant(root != null, 'something went wrong');
+
+  if (root == null) {
+    throw new Error('something went wrong');
+  }
+
   updateContainer(element, root, null, null);
 
   const entry = {
diff --git a/packages/react/src/ReactAct.js b/packages/react/src/ReactAct.js
index 586c99d2a3758..25456f7f1ec1e 100644
--- a/packages/react/src/ReactAct.js
+++ b/packages/react/src/ReactAct.js
@@ -9,7 +9,6 @@
 
 import type {Thenable} from 'shared/ReactTypes';
 import ReactCurrentActQueue from './ReactCurrentActQueue';
-import invariant from 'shared/invariant';
 import enqueueTask from 'shared/enqueueTask';
 
 let actScopeDepth = 0;
@@ -151,10 +150,7 @@ export function act<T>(callback: () => T | Thenable<T>): Thenable<T> {
       }
     }
   } else {
-    invariant(
-      false,
-      'act(...) is not supported in production builds of React.',
-    );
+    throw new Error('act(...) is not supported in production builds of React.');
   }
 }
 
diff --git a/packages/react/src/ReactBaseClasses.js b/packages/react/src/ReactBaseClasses.js
index 94dbd19eb8110..e2a004bcc0467 100644
--- a/packages/react/src/ReactBaseClasses.js
+++ b/packages/react/src/ReactBaseClasses.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 import ReactNoopUpdateQueue from './ReactNoopUpdateQueue';
 
 const emptyObject = {};
@@ -55,13 +53,17 @@ Component.prototype.isReactComponent = {};
  * @protected
  */
 Component.prototype.setState = function(partialState, callback) {
-  invariant(
-    typeof partialState === 'object' ||
-      typeof partialState === 'function' ||
-      partialState == null,
-    'setState(...): takes an object of state variables to update or a ' +
-      'function which returns an object of state variables.',
-  );
+  if (
+    typeof partialState !== 'object' &&
+    typeof partialState !== 'function' &&
+    partialState != null
+  ) {
+    throw new Error(
+      'setState(...): takes an object of state variables to update or a ' +
+        'function which returns an object of state variables.',
+    );
+  }
+
   this.updater.enqueueSetState(this, partialState, callback, 'setState');
 };
 
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index dab75998bb8e0..d0562f53e3bc9 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -9,7 +9,6 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {
   getIteratorFn,
@@ -205,14 +204,17 @@ function mapIntoArray(
     } else if (type === 'object') {
       // eslint-disable-next-line react-internal/safe-string-coercion
       const childrenString = String((children: any));
-      invariant(
-        false,
-        'Objects are not valid as a React child (found: %s). ' +
+
+      throw new Error(
+        `Objects are not valid as a React child (found: ${
+          childrenString === '[object Object]'
+            ? 'object with keys {' +
+              Object.keys((children: any)).join(', ') +
+              '}'
+            : childrenString
+        }). ` +
           'If you meant to render a collection of children, use an array ' +
           'instead.',
-        childrenString === '[object Object]'
-          ? 'object with keys {' + Object.keys((children: any)).join(', ') + '}'
-          : childrenString,
       );
     }
   }
@@ -323,10 +325,12 @@ function toArray(children: ?ReactNodeList): Array<React$Node> {
  * structure.
  */
 function onlyChild<T>(children: T): T {
-  invariant(
-    isValidElement(children),
-    'React.Children.only expected to receive a single React element child.',
-  );
+  if (!isValidElement(children)) {
+    throw new Error(
+      'React.Children.only expected to receive a single React element child.',
+    );
+  }
+
   return children;
 }
 
diff --git a/packages/react/src/ReactElement.js b/packages/react/src/ReactElement.js
index 25179e2b2c4f1..e87f31d1ae36c 100644
--- a/packages/react/src/ReactElement.js
+++ b/packages/react/src/ReactElement.js
@@ -6,7 +6,6 @@
  */
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
@@ -484,11 +483,11 @@ export function cloneAndReplaceKey(oldElement, newKey) {
  * See https://reactjs.org/docs/react-api.html#cloneelement
  */
 export function cloneElement(element, config, children) {
-  invariant(
-    !(element === null || element === undefined),
-    'React.cloneElement(...): The argument must be a React element, but you passed %s.',
-    element,
-  );
+  if (element === null || element === undefined) {
+    throw new Error(
+      `React.cloneElement(...): The argument must be a React element, but you passed ${element}.`,
+    );
+  }
 
   let propName;
 
diff --git a/packages/react/unstable-shared-subset.js b/packages/react/unstable-shared-subset.js
index e2ae4ad2f62d6..a91fe77a1dc0d 100644
--- a/packages/react/unstable-shared-subset.js
+++ b/packages/react/unstable-shared-subset.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+// eslint-disable-next-line react-internal/prod-error-codes
 throw new Error(
   'This entry point is not yet supported outside of experimental channels',
 );
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
index 21c258a6b528c..5f7c8dc8e83aa 100644
--- a/packages/scheduler/src/forks/SchedulerMock.js
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -7,6 +7,7 @@
  */
 
 /* eslint-disable no-var */
+/* eslint-disable react-internal/prod-error-codes */
 
 import {
   enableSchedulerDebugging,
diff --git a/packages/shared/ReactErrorUtils.js b/packages/shared/ReactErrorUtils.js
index 1742788778b4d..ae344d302f441 100644
--- a/packages/shared/ReactErrorUtils.js
+++ b/packages/shared/ReactErrorUtils.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import invokeGuardedCallbackImpl from './invokeGuardedCallbackImpl';
 
 // Used by Fiber to simulate a try-catch.
@@ -117,8 +116,7 @@ export function clearCaughtError() {
     caughtError = null;
     return error;
   } else {
-    invariant(
-      false,
+    throw new Error(
       'clearCaughtError was called but no error was captured. This error ' +
         'is likely caused by a bug in React. Please file an issue.',
     );
diff --git a/packages/shared/checkPropTypes.js b/packages/shared/checkPropTypes.js
index 1558a407c3888..5aee8fede8330 100644
--- a/packages/shared/checkPropTypes.js
+++ b/packages/shared/checkPropTypes.js
@@ -52,6 +52,7 @@ export default function checkPropTypes(
           // This is intentionally an invariant that gets caught. It's the same
           // behavior as without this statement except with a better message.
           if (typeof typeSpecs[typeSpecName] !== 'function') {
+            // eslint-disable-next-line react-internal/prod-error-codes
             const err = Error(
               (componentName || 'React class') +
                 ': ' +
diff --git a/packages/shared/forks/invokeGuardedCallbackImpl.www.js b/packages/shared/forks/invokeGuardedCallbackImpl.www.js
index 01005167e5fcc..72c21bb8b788f 100644
--- a/packages/shared/forks/invokeGuardedCallbackImpl.www.js
+++ b/packages/shared/forks/invokeGuardedCallbackImpl.www.js
@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 // Provided by www
 const ReactFbErrorUtils = require('ReactFbErrorUtils');
-invariant(
-  typeof ReactFbErrorUtils.invokeGuardedCallback === 'function',
-  'Expected ReactFbErrorUtils.invokeGuardedCallback to be a function.',
-);
+
+if (typeof ReactFbErrorUtils.invokeGuardedCallback !== 'function') {
+  throw new Error(
+    'Expected ReactFbErrorUtils.invokeGuardedCallback to be a function.',
+  );
+}
 
 const invokeGuardedCallbackImpl = function<A, B, C, D, E, F, Context>(
   name: string | null,
diff --git a/packages/shared/invariant.js b/packages/shared/invariant.js
index 747961671f1ea..68a1928c02d38 100644
--- a/packages/shared/invariant.js
+++ b/packages/shared/invariant.js
@@ -18,6 +18,7 @@
  */
 
 export default function invariant(condition, format, a, b, c, d, e, f) {
+  // eslint-disable-next-line react-internal/prod-error-codes
   throw new Error(
     'Internal React error: invariant() is meant to be replaced at compile ' +
       'time. There is no runtime version.',
diff --git a/packages/shared/invokeGuardedCallbackImpl.js b/packages/shared/invokeGuardedCallbackImpl.js
index 215a8ae91c513..c33820080054a 100644
--- a/packages/shared/invokeGuardedCallbackImpl.js
+++ b/packages/shared/invokeGuardedCallbackImpl.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 function invokeGuardedCallbackProd<A, B, C, D, E, F, Context>(
   name: string | null,
   func: (a: A, b: B, c: C, d: D, e: E, f: F) => mixed,
@@ -83,16 +81,18 @@ if (__DEV__) {
       // when we call document.createEvent(). However this can cause confusing
       // errors: https://github.com/facebook/create-react-app/issues/3482
       // So we preemptively throw with a better message instead.
-      invariant(
-        typeof document !== 'undefined',
-        'The `document` global was defined when React was initialized, but is not ' +
-          'defined anymore. This can happen in a test environment if a component ' +
-          'schedules an update from an asynchronous callback, but the test has already ' +
-          'finished running. To solve this, you can either unmount the component at ' +
-          'the end of your test (and ensure that any asynchronous operations get ' +
-          'canceled in `componentWillUnmount`), or you can change the test itself ' +
-          'to be asynchronous.',
-      );
+      if (typeof document === 'undefined') {
+        throw new Error(
+          'The `document` global was defined when React was initialized, but is not ' +
+            'defined anymore. This can happen in a test environment if a component ' +
+            'schedules an update from an asynchronous callback, but the test has already ' +
+            'finished running. To solve this, you can either unmount the component at ' +
+            'the end of your test (and ensure that any asynchronous operations get ' +
+            'canceled in `componentWillUnmount`), or you can change the test itself ' +
+            'to be asynchronous.',
+        );
+      }
+
       const evt = document.createEvent('Event');
 
       let didCall = false;
@@ -201,6 +201,7 @@ if (__DEV__) {
       if (didCall && didError) {
         if (!didSetError) {
           // The callback errored, but the error event never fired.
+          // eslint-disable-next-line react-internal/prod-error-codes
           error = new Error(
             'An error was thrown inside one of your components, but React ' +
               "doesn't know what it was. This is likely due to browser " +
@@ -212,6 +213,7 @@ if (__DEV__) {
               'actually an issue with React, please file an issue.',
           );
         } else if (isCrossOriginError) {
+          // eslint-disable-next-line react-internal/prod-error-codes
           error = new Error(
             "A cross-origin error was thrown. React doesn't have access to " +
               'the actual error object in development. ' +
diff --git a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
index f93b31a659dd2..bfb80ab375562 100644
--- a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
+++ b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
@@ -1,5 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`error transform handles escaped backticks in template string 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? \\"Expected \`\\" + listener + \\"\` listener to be a function, instead got a value of \`\\" + type + \\"\` type.\\" : _formatProdErrorMessage(231, listener, type));"
+`;
+
 exports[`error transform should correctly transform invariants that are not in the error codes map 1`] = `
 "import invariant from 'shared/invariant';
 
@@ -18,6 +23,21 @@ if (!condition) {
 }"
 `;
 
+exports[`error transform should not touch other calls or new expressions 1`] = `
+"new NotAnError();
+NotAnError();"
+`;
+
+exports[`error transform should replace error constructors (no new) 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? 'Do not override existing functions.' : _formatProdErrorMessage(16));"
+`;
+
+exports[`error transform should replace error constructors 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? 'Do not override existing functions.' : _formatProdErrorMessage(16));"
+`;
+
 exports[`error transform should replace simple invariant calls 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
 import invariant from 'shared/invariant';
@@ -29,6 +49,21 @@ if (!condition) {
 }"
 `;
 
+exports[`error transform should support error constructors with concatenated messages 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? \\"Expected \\" + foo + \\" target to \\" + (\\"be an array; got \\" + bar) : _formatProdErrorMessage(7, foo, bar));"
+`;
+
+exports[`error transform should support interpolating arguments with concatenation 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? 'Expected ' + foo + ' target to be an array; got ' + bar : _formatProdErrorMessage(7, foo, bar));"
+`;
+
+exports[`error transform should support interpolating arguments with template strings 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? \\"Expected \\" + foo + \\" target to be an array; got \\" + bar : _formatProdErrorMessage(7, foo, bar));"
+`;
+
 exports[`error transform should support invariant calls with a concatenated template string and args 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
 import invariant from 'shared/invariant';
diff --git a/scripts/error-codes/__tests__/transform-error-messages.js b/scripts/error-codes/__tests__/transform-error-messages.js
index 4da00ac656b95..2bca7366321e2 100644
--- a/scripts/error-codes/__tests__/transform-error-messages.js
+++ b/scripts/error-codes/__tests__/transform-error-messages.js
@@ -93,4 +93,61 @@ invariant(condition, 'Do not override existing functions.');
       )
     ).toMatchSnapshot();
   });
+
+  it('should replace error constructors', () => {
+    expect(
+      transform(`
+new Error('Do not override existing functions.');
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should replace error constructors (no new)', () => {
+    expect(
+      transform(`
+Error('Do not override existing functions.');
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should not touch other calls or new expressions', () => {
+    expect(
+      transform(`
+new NotAnError();
+NotAnError();
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should support interpolating arguments with template strings', () => {
+    expect(
+      transform(`
+new Error(\`Expected \${foo} target to be an array; got \${bar}\`);
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should support interpolating arguments with concatenation', () => {
+    expect(
+      transform(`
+new Error('Expected ' + foo + ' target to be an array; got ' + bar);
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should support error constructors with concatenated messages', () => {
+    expect(
+      transform(`
+new Error(\`Expected \${foo} target to \` + \`be an array; got \${bar}\`);
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('handles escaped backticks in template string', () => {
+    expect(
+      transform(`
+new Error(\`Expected \\\`\$\{listener\}\\\` listener to be a function, instead got a value of \\\`\$\{type\}\\\` type.\`);
+`)
+    ).toMatchSnapshot();
+  });
 });
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 3206efa41349c..3920d0aa51c35 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -287,12 +287,10 @@
   "288": "It is not supported to run the profiling version of a renderer (for example, `react-dom/profiling`) without also replacing the `schedule/tracing` module with `schedule/tracing-profiling`. Your bundler might have a setting for aliasing both modules. Learn more at https://reactjs.org/link/profiling",
   "289": "Function components cannot have refs.",
   "290": "Element ref was specified as a string (%s) but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a function component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://reactjs.org/link/refs-must-have-owner for more information.",
-  "291": "Log of yielded values is not empty. Call expect(Scheduler).toHaveYielded(...) first.",
   "292": "The matcher `toHaveYielded` expects an instance of React Test Renderer.\n\nTry: expect(Scheduler).toHaveYielded(expectedYields)",
   "293": "Context can only be read while React is rendering, e.g. inside the render method or getDerivedStateFromProps.",
   "294": "ReactDOMServer does not yet support Suspense.",
   "295": "ReactDOMServer does not yet support lazy-loaded components.",
-  "296": "Log of yielded values is not empty. Call expect(ReactTestRenderer).unstable_toHaveYielded(...) first.",
   "297": "The matcher `unstable_toHaveYielded` expects an instance of React Test Renderer.\n\nTry: expect(ReactTestRenderer).unstable_toHaveYielded(expectedYields)",
   "298": "Hooks can only be called inside the body of a function component.",
   "299": "createRoot(...): Target container is not a DOM element.",
@@ -353,7 +351,7 @@
   "362": "Could not find React container within specified host subtree.",
   "363": "Test selector API is not supported by this renderer.",
   "364": "Invalid host root specified. Should be either a React container or a node with a testname attribute.",
-  "365": "Invalid selector type %s specified.",
+  "365": "Invalid selector type specified.",
   "366": "ReactDOM.createEventHandle: setListener called on an target that did not have a corresponding root. This is likely a bug in React.",
   "367": "ReactDOM.createEventHandle: setListener called on an element target that is not managed by React. Ensure React rendered the DOM element.",
   "368": "ReactDOM.createEventHandle: setListener called on an invalid target. Provide a valid EventTarget or an element managed by React.",
@@ -397,5 +395,12 @@
   "406": "act(...) is not supported in production builds of React.",
   "407": "Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.",
   "408": "Missing getServerSnapshot, which is required for server-rendered content.",
-  "409": "Cannot update an unmounted root."
+  "409": "Cannot update an unmounted root.",
+  "410": "%s suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.",
+  "411": "%s suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.",
+  "412": "Connection closed.",
+  "413": "Expected finished root and lanes to be set. This is a bug in React.",
+  "414": "Did not expect this call in production. This is a bug in React. Please file an issue.",
+  "415": "Error parsing the data. It's probably an error code or network corruption.",
+  "416": "This environment don't support binary chunks."
 }
diff --git a/scripts/error-codes/extract-errors.js b/scripts/error-codes/extract-errors.js
index 58823cbe16873..d60ffe308cdbe 100644
--- a/scripts/error-codes/extract-errors.js
+++ b/scripts/error-codes/extract-errors.js
@@ -10,7 +10,7 @@ const parser = require('@babel/parser');
 const fs = require('fs');
 const path = require('path');
 const traverse = require('@babel/traverse').default;
-const evalToString = require('../shared/evalToString');
+const {evalStringConcat} = require('../shared/evalToString');
 const invertObject = require('./invertObject');
 
 const babylonOptions = {
@@ -75,7 +75,7 @@ module.exports = function(opts) {
 
             // error messages can be concatenated (`+`) at runtime, so here's a
             // trivial partial evaluator that interprets the literal value
-            const errorMsgLiteral = evalToString(node.arguments[1]);
+            const errorMsgLiteral = evalStringConcat(node.arguments[1]);
             addToErrorMap(errorMsgLiteral);
           }
         },
diff --git a/scripts/error-codes/transform-error-messages.js b/scripts/error-codes/transform-error-messages.js
index 6ebb68731f860..2baf4baa1c1a7 100644
--- a/scripts/error-codes/transform-error-messages.js
+++ b/scripts/error-codes/transform-error-messages.js
@@ -7,20 +7,114 @@
 'use strict';
 
 const fs = require('fs');
-const evalToString = require('../shared/evalToString');
+const {
+  evalStringConcat,
+  evalStringAndTemplateConcat,
+} = require('../shared/evalToString');
 const invertObject = require('./invertObject');
 const helperModuleImports = require('@babel/helper-module-imports');
 
+const errorMap = invertObject(
+  JSON.parse(fs.readFileSync(__dirname + '/codes.json', 'utf-8'))
+);
+
+const SEEN_SYMBOL = Symbol('transform-error-messages.seen');
+
 module.exports = function(babel) {
   const t = babel.types;
 
+  // TODO: Instead of outputting __DEV__ conditions, only apply this transform
+  // in production.
   const DEV_EXPRESSION = t.identifier('__DEV__');
 
+  function CallOrNewExpression(path, file) {
+    // Turns this code:
+    //
+    // new Error(`A ${adj} message that contains ${noun}`);
+    //
+    // or this code (no constructor):
+    //
+    // Error(`A ${adj} message that contains ${noun}`);
+    //
+    // into this:
+    //
+    // Error(
+    //   __DEV__
+    //     ? `A ${adj} message that contains ${noun}`
+    //     : formatProdErrorMessage(ERR_CODE, adj, noun)
+    // );
+    const node = path.node;
+    if (node[SEEN_SYMBOL]) {
+      return;
+    }
+    node[SEEN_SYMBOL] = true;
+
+    const errorMsgNode = node.arguments[0];
+    if (errorMsgNode === undefined) {
+      return;
+    }
+
+    const errorMsgExpressions = [];
+    const errorMsgLiteral = evalStringAndTemplateConcat(
+      errorMsgNode,
+      errorMsgExpressions
+    );
+
+    let prodErrorId = errorMap[errorMsgLiteral];
+    if (prodErrorId === undefined) {
+      // There is no error code for this message. We use a lint rule to
+      // enforce that messages can be minified, so assume this is
+      // intentional and exit gracefully.
+      return;
+    }
+    prodErrorId = parseInt(prodErrorId, 10);
+
+    // Import formatProdErrorMessage
+    const formatProdErrorMessageIdentifier = helperModuleImports.addDefault(
+      path,
+      'shared/formatProdErrorMessage',
+      {nameHint: 'formatProdErrorMessage'}
+    );
+
+    // Outputs:
+    //   formatProdErrorMessage(ERR_CODE, adj, noun);
+    const prodMessage = t.callExpression(formatProdErrorMessageIdentifier, [
+      t.numericLiteral(prodErrorId),
+      ...errorMsgExpressions,
+    ]);
+
+    // Outputs:
+    // Error(
+    //   __DEV__
+    //     ? `A ${adj} message that contains ${noun}`
+    //     : formatProdErrorMessage(ERR_CODE, adj, noun)
+    // );
+    path.replaceWith(t.callExpression(t.identifier('Error'), [prodMessage]));
+    path.replaceWith(
+      t.callExpression(t.identifier('Error'), [
+        t.conditionalExpression(DEV_EXPRESSION, errorMsgNode, prodMessage),
+      ])
+    );
+  }
+
   return {
     visitor: {
+      NewExpression(path, file) {
+        const noMinify = file.opts.noMinify;
+        if (!noMinify && path.get('callee').isIdentifier({name: 'Error'})) {
+          CallOrNewExpression(path, file);
+        }
+      },
+
       CallExpression(path, file) {
         const node = path.node;
         const noMinify = file.opts.noMinify;
+
+        if (!noMinify && path.get('callee').isIdentifier({name: 'Error'})) {
+          CallOrNewExpression(path, file);
+          return;
+        }
+
         if (path.get('callee').isIdentifier({name: 'invariant'})) {
           // Turns this code:
           //
@@ -40,7 +134,7 @@ module.exports = function(babel) {
           // string) that references a verbose error message. The mapping is
           // stored in `scripts/error-codes/codes.json`.
           const condition = node.arguments[0];
-          const errorMsgLiteral = evalToString(node.arguments[1]);
+          const errorMsgLiteral = evalStringConcat(node.arguments[1]);
           const errorMsgExpressions = Array.from(node.arguments.slice(2));
           const errorMsgQuasis = errorMsgLiteral
             .split('%s')
@@ -81,12 +175,6 @@ module.exports = function(babel) {
             return;
           }
 
-          // Avoid caching because we write it as we go.
-          const existingErrorMap = JSON.parse(
-            fs.readFileSync(__dirname + '/codes.json', 'utf-8')
-          );
-          const errorMap = invertObject(existingErrorMap);
-
           let prodErrorId = errorMap[errorMsgLiteral];
 
           if (prodErrorId === undefined) {
@@ -117,7 +205,7 @@ module.exports = function(babel) {
           }
           prodErrorId = parseInt(prodErrorId, 10);
 
-          // Import ReactErrorProd
+          // Import formatProdErrorMessage
           const formatProdErrorMessageIdentifier = helperModuleImports.addDefault(
             path,
             'shared/formatProdErrorMessage',
diff --git a/scripts/eslint-rules/__tests__/prod-error-codes-test.internal.js b/scripts/eslint-rules/__tests__/prod-error-codes-test.internal.js
new file mode 100644
index 0000000000000..674d952e9582c
--- /dev/null
+++ b/scripts/eslint-rules/__tests__/prod-error-codes-test.internal.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const rule = require('../prod-error-codes');
+const {RuleTester} = require('eslint');
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2017,
+  },
+});
+
+ruleTester.run('eslint-rules/prod-error-codes', rule, {
+  valid: [
+    'arbitraryFunction(a, b)',
+    'Error(`Expected ${foo} target to be an array; got ${bar}`)',
+    "Error('Expected ' + foo + ' target to be an array; got ' + bar)",
+    'Error(`Expected ${foo} target to ` + `be an array; got ${bar}`)',
+  ],
+  invalid: [
+    {
+      code: "Error('Not in error map')",
+      errors: [
+        {
+          message:
+            'Error message does not have a corresponding production error ' +
+            'code. Add the following message to codes.json so it can be stripped from ' +
+            'the production builds:\n\n' +
+            'Not in error map',
+        },
+      ],
+    },
+    {
+      code: "Error('Not in ' + 'error map')",
+      errors: [
+        {
+          message:
+            'Error message does not have a corresponding production error ' +
+            'code. Add the following message to codes.json so it can be stripped from ' +
+            'the production builds:\n\n' +
+            'Not in error map',
+        },
+      ],
+    },
+    {
+      code: 'Error(`Not in ` + `error map`)',
+      errors: [
+        {
+          message:
+            'Error message does not have a corresponding production error ' +
+            'code. Add the following message to codes.json so it can be stripped from ' +
+            'the production builds:\n\n' +
+            'Not in error map',
+        },
+      ],
+    },
+    {
+      code: "Error(`Not in ${'error'} map`)",
+      errors: [
+        {
+          message:
+            'Error message does not have a corresponding production error ' +
+            'code. Add the following message to codes.json so it can be stripped from ' +
+            'the production builds:\n\n' +
+            'Not in %s map',
+        },
+      ],
+    },
+  ],
+});
diff --git a/scripts/eslint-rules/index.js b/scripts/eslint-rules/index.js
index 0e86334d26331..7dfac457ec062 100644
--- a/scripts/eslint-rules/index.js
+++ b/scripts/eslint-rules/index.js
@@ -6,6 +6,7 @@ module.exports = {
     'no-to-warn-dev-within-to-throw': require('./no-to-warn-dev-within-to-throw'),
     'warning-args': require('./warning-args'),
     'invariant-args': require('./invariant-args'),
+    'prod-error-codes': require('./prod-error-codes'),
     'no-production-logging': require('./no-production-logging'),
     'no-cross-fork-imports': require('./no-cross-fork-imports'),
     'no-cross-fork-types': require('./no-cross-fork-types'),
diff --git a/scripts/eslint-rules/prod-error-codes.js b/scripts/eslint-rules/prod-error-codes.js
new file mode 100644
index 0000000000000..2c9815fb9ab12
--- /dev/null
+++ b/scripts/eslint-rules/prod-error-codes.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const errorMap = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, '../error-codes/codes.json'))
+);
+const errorMessages = new Set();
+Object.keys(errorMap).forEach(key => errorMessages.add(errorMap[key]));
+
+function nodeToErrorTemplate(node) {
+  if (node.type === 'Literal' && typeof node.value === 'string') {
+    return node.value;
+  } else if (node.type === 'BinaryExpression' && node.operator === '+') {
+    const l = nodeToErrorTemplate(node.left);
+    const r = nodeToErrorTemplate(node.right);
+    return l + r;
+  } else if (node.type === 'TemplateLiteral') {
+    let elements = [];
+    for (let i = 0; i < node.quasis.length; i++) {
+      const elementNode = node.quasis[i];
+      if (elementNode.type !== 'TemplateElement') {
+        throw new Error('Unsupported type ' + node.type);
+      }
+      elements.push(elementNode.value.cooked);
+    }
+    return elements.join('%s');
+  } else {
+    return '%s';
+  }
+}
+
+module.exports = {
+  meta: {
+    schema: [],
+  },
+  create(context) {
+    function ErrorCallExpression(node) {
+      const errorMessageNode = node.arguments[0];
+      if (errorMessageNode === undefined) {
+        return;
+      }
+      const errorMessage = nodeToErrorTemplate(errorMessageNode);
+      if (errorMessages.has(errorMessage)) {
+        return;
+      }
+      context.report({
+        node,
+        message:
+          'Error message does not have a corresponding production error code. Add ' +
+          'the following message to codes.json so it can be stripped ' +
+          'from the production builds:\n\n' +
+          errorMessage,
+      });
+    }
+
+    return {
+      NewExpression(node) {
+        if (node.callee.type === 'Identifier' && node.callee.name === 'Error') {
+          ErrorCallExpression(node);
+        }
+      },
+      CallExpression(node) {
+        if (node.callee.type === 'Identifier' && node.callee.name === 'Error') {
+          ErrorCallExpression(node);
+        }
+      },
+    };
+  },
+};
diff --git a/scripts/print-warnings/print-warnings.js b/scripts/print-warnings/print-warnings.js
index 9bdd6543d2a3d..8e23dd880e92b 100644
--- a/scripts/print-warnings/print-warnings.js
+++ b/scripts/print-warnings/print-warnings.js
@@ -12,7 +12,7 @@ const through = require('through2');
 const traverse = require('@babel/traverse').default;
 const gs = require('glob-stream');
 
-const evalToString = require('../shared/evalToString');
+const {evalStringConcat} = require('../shared/evalToString');
 
 const parserOptions = {
   sourceType: 'module',
@@ -64,7 +64,7 @@ function transform(file, enc, cb) {
             // warning messages can be concatenated (`+`) at runtime, so here's
             // a trivial partial evaluator that interprets the literal value
             try {
-              const warningMsgLiteral = evalToString(node.arguments[0]);
+              const warningMsgLiteral = evalStringConcat(node.arguments[0]);
               warnings.add(JSON.stringify(warningMsgLiteral));
             } catch (error) {
               console.error(
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index 41b0685098fa0..4f7d26cddbec9 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -149,7 +149,8 @@ function getBabelConfig(
   bundleType,
   packageName,
   externals,
-  isDevelopment
+  isDevelopment,
+  bundle
 ) {
   const canAccessReactObject =
     packageName === 'react' || externals.indexOf('react') !== -1;
@@ -179,12 +180,6 @@ function getBabelConfig(
     case FB_WWW_DEV:
     case FB_WWW_PROD:
     case FB_WWW_PROFILING:
-      return Object.assign({}, options, {
-        plugins: options.plugins.concat([
-          // Minify invariant messages
-          require('../error-codes/transform-error-messages'),
-        ]),
-      });
     case RN_OSS_DEV:
     case RN_OSS_PROD:
     case RN_OSS_PROFILING:
@@ -195,8 +190,9 @@ function getBabelConfig(
         plugins: options.plugins.concat([
           [
             require('../error-codes/transform-error-messages'),
-            // Preserve full error messages in React Native build
-            {noMinify: true},
+            // Controls whether to replace error messages with error codes
+            // in production. By default, error messages are replaced.
+            {noMinify: bundle.minifyWithProdErrorCodes === false},
           ],
         ]),
       });
@@ -390,7 +386,8 @@ function getPlugins(
         bundleType,
         packageName,
         externals,
-        !isProduction
+        !isProduction,
+        bundle
       )
     ),
     // Remove 'use strict' from individual source files.
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index b9ae507b1a305..c24281d43ef08 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -79,6 +79,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react',
     global: 'React',
+    minifyWithProdErrorCodes: false,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -88,6 +89,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/unstable-shared-subset',
     global: 'React',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -105,6 +107,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/jsx-runtime',
     global: 'JSXRuntime',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -124,6 +127,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/jsx-dev-runtime',
     global: 'JSXDEVRuntime',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -133,6 +137,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fetch/index.browser',
     global: 'ReactFetch',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -142,6 +147,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fetch/index.node',
     global: 'ReactFetch',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'http', 'https'],
   },
 
@@ -151,6 +157,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fs/index.browser.server',
     global: 'ReactFilesystem',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -160,6 +167,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fs/index.node.server',
     global: 'ReactFilesystem',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'fs/promises', 'path'],
   },
 
@@ -169,6 +177,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-pg/index.browser.server',
     global: 'ReactPostgres',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -178,6 +187,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-pg/index.node.server',
     global: 'ReactPostgres',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'pg'],
   },
 
@@ -197,6 +207,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-dom',
     global: 'ReactDOM',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -207,6 +218,7 @@ const bundles = [
     entry: 'react-dom',
     global: 'ReactDOMForked',
     enableNewReconciler: true,
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -216,15 +228,18 @@ const bundles = [
     bundleTypes: [FB_WWW_DEV, NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     entry: 'react-dom/test-utils',
     global: 'ReactTestUtils',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'react-dom'],
   },
 
+  // TODO: We don't use this bundle anymore
   /******* React DOM - www - Testing *******/
   {
     moduleType: RENDERER,
     bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
     entry: 'react-dom/testing',
     global: 'ReactDOMTesting',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -237,6 +252,7 @@ const bundles = [
     entry: 'react-dom/src/server/ReactDOMLegacyServerBrowser',
     name: 'react-dom-server-legacy.browser',
     global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
     babel: opts =>
       Object.assign({}, opts, {
@@ -251,6 +267,7 @@ const bundles = [
     entry: 'react-dom/src/server/ReactDOMLegacyServerNode',
     name: 'react-dom-server-legacy.node',
     externals: ['react', 'stream'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -266,6 +283,7 @@ const bundles = [
     entry: 'react-dom/src/server/ReactDOMFizzServerBrowser',
     name: 'react-dom-server.browser',
     global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
   {
@@ -274,6 +292,7 @@ const bundles = [
     entry: 'react-dom/src/server/ReactDOMFizzServerNode',
     name: 'react-dom-server.node',
     global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
   {
@@ -281,6 +300,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-relay/src/ReactDOMServerFB',
     global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -290,6 +310,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/writer.browser.server',
     global: 'ReactServerDOMWriter',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
   {
@@ -297,6 +318,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/writer.node.server',
     global: 'ReactServerDOMWriter',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -306,6 +328,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack',
     global: 'ReactServerDOMReader',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -315,6 +338,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-webpack/plugin',
     global: 'ReactServerWebpackPlugin',
+    minifyWithProdErrorCodes: false,
     externals: ['fs', 'path', 'url', 'neo-async'],
   },
 
@@ -324,6 +348,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-webpack/node-loader',
     global: 'ReactServerWebpackNodeLoader',
+    minifyWithProdErrorCodes: false,
     externals: ['acorn'],
   },
 
@@ -333,6 +358,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-webpack/node-register',
     global: 'ReactFlightWebpackNodeRegister',
+    minifyWithProdErrorCodes: false,
     externals: ['url', 'module'],
   },
 
@@ -342,6 +368,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-relay/server',
     global: 'ReactFlightDOMRelayServer', // TODO: Rename to Writer
+    minifyWithProdErrorCodes: false,
     externals: [
       'react',
       'ReactFlightDOMRelayServerIntegration',
@@ -355,6 +382,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-relay',
     global: 'ReactFlightDOMRelayClient', // TODO: Rename to Reader
+    minifyWithProdErrorCodes: true,
     externals: [
       'react',
       'ReactFlightDOMRelayClientIntegration',
@@ -368,6 +396,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-native-relay/server',
     global: 'ReactFlightNativeRelayServer', // TODO: Rename to Writer
+    minifyWithProdErrorCodes: false,
     externals: [
       'react',
       'ReactFlightNativeRelayServerIntegration',
@@ -382,6 +411,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-native-relay',
     global: 'ReactFlightNativeRelayClient', // TODO: Rename to Reader
+    minifyWithProdErrorCodes: true,
     externals: [
       'react',
       'ReactFlightNativeRelayClientIntegration',
@@ -396,6 +426,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-suspense-test-utils',
     global: 'ReactSuspenseTestUtils',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -413,6 +444,7 @@ const bundles = [
     entry: 'react-art',
     global: 'ReactART',
     externals: ['react'],
+    minifyWithProdErrorCodes: true,
     babel: opts =>
       Object.assign({}, opts, {
         // Include JSX
@@ -435,6 +467,7 @@ const bundles = [
     entry: 'react-native-renderer',
     global: 'ReactNativeRenderer',
     externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -448,6 +481,7 @@ const bundles = [
     entry: 'react-native-renderer',
     global: 'ReactNativeRenderer',
     externals: ['react-native'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -465,6 +499,7 @@ const bundles = [
     entry: 'react-native-renderer/fabric',
     global: 'ReactFabric',
     externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -478,6 +513,7 @@ const bundles = [
     entry: 'react-native-renderer/fabric',
     global: 'ReactFabric',
     externals: ['react-native'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -507,6 +543,7 @@ const bundles = [
       'scheduler/unstable_mock',
       'ReactNativeInternalFeatureFlags',
     ],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -521,6 +558,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer',
     global: 'ReactNoopRenderer',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'scheduler', 'scheduler/unstable_mock', 'expect'],
   },
 
@@ -530,6 +568,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/persistent',
     global: 'ReactNoopRendererPersistent',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'scheduler', 'expect'],
   },
 
@@ -539,6 +578,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/server',
     global: 'ReactNoopRendererServer',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'scheduler', 'expect'],
   },
 
@@ -548,6 +588,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/flight-server',
     global: 'ReactNoopFlightServer',
+    minifyWithProdErrorCodes: false,
     externals: [
       'react',
       'scheduler',
@@ -562,6 +603,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/flight-client',
     global: 'ReactNoopFlightClient',
+    minifyWithProdErrorCodes: false,
     externals: [
       'react',
       'scheduler',
@@ -576,6 +618,7 @@ const bundles = [
     moduleType: RECONCILER,
     entry: 'react-reconciler',
     global: 'ReactReconciler',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -585,6 +628,7 @@ const bundles = [
     moduleType: RECONCILER,
     entry: 'react-server',
     global: 'ReactServer',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -594,6 +638,7 @@ const bundles = [
     moduleType: RECONCILER,
     entry: 'react-server/flight',
     global: 'ReactFlightServer',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -603,6 +648,7 @@ const bundles = [
     moduleType: RECONCILER,
     entry: 'react-client/flight',
     global: 'ReactFlightClient',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -612,6 +658,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     entry: 'react-reconciler/reflection',
     global: 'ReactFiberTreeReflection',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -621,6 +668,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     entry: 'react-reconciler/constants',
     global: 'ReactReconcilerConstants',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -637,6 +685,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-is',
     global: 'ReactIs',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -646,6 +695,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-debug-tools',
     global: 'ReactDebugTools',
+    minifyWithProdErrorCodes: false,
     externals: [],
   },
 
@@ -657,6 +707,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-cache',
     global: 'ReactCacheOld',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'scheduler'],
   },
 
@@ -667,6 +718,7 @@ const bundles = [
     entry: 'create-subscription',
     global: 'createSubscription',
     externals: ['react'],
+    minifyWithProdErrorCodes: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -681,6 +733,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'use-subscription',
     global: 'useSubscription',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -690,6 +743,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'use-sync-external-store',
     global: 'useSyncExternalStore',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -699,6 +753,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'use-sync-external-store/extra',
     global: 'useSyncExternalStoreExtra',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'use-sync-external-store'],
   },
 
@@ -708,6 +763,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'use-sync-external-store/index.native',
     global: 'useSyncExternalStoreNative',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -726,6 +782,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'scheduler',
     global: 'Scheduler',
+    minifyWithProdErrorCodes: true,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -744,6 +801,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'scheduler/unstable_mock',
     global: 'SchedulerMock',
+    minifyWithProdErrorCodes: false,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -759,6 +817,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'scheduler/unstable_post_task',
     global: 'SchedulerPostTask',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -768,6 +827,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'jest-react',
     global: 'JestReact',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
   },
 
@@ -781,6 +841,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'eslint-plugin-react-hooks',
     global: 'ESLintPluginReactHooks',
+    minifyWithProdErrorCodes: false,
     externals: [],
   },
 
@@ -790,6 +851,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-refresh/babel',
     global: 'ReactFreshBabelPlugin',
+    minifyWithProdErrorCodes: false,
     externals: [],
   },
   {
@@ -797,6 +859,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-refresh/runtime',
     global: 'ReactFreshRuntime',
+    minifyWithProdErrorCodes: false,
     externals: [],
   },
 ];
diff --git a/scripts/shared/__tests__/evalToString-test.js b/scripts/shared/__tests__/evalToString-test.js
index 3f6c3adbb372a..bc0cb600d57e4 100644
--- a/scripts/shared/__tests__/evalToString-test.js
+++ b/scripts/shared/__tests__/evalToString-test.js
@@ -6,12 +6,12 @@
  */
 'use strict';
 
-const evalToString = require('../evalToString');
+const {evalStringConcat} = require('../evalToString');
 const parser = require('@babel/parser');
 
 const parse = source => parser.parse(`(${source});`).program.body[0].expression; // quick way to get an exp node
 
-const parseAndEval = source => evalToString(parse(source));
+const parseAndEval = source => evalStringConcat(parse(source));
 
 describe('evalToString', () => {
   it('should support StringLiteral', () => {
diff --git a/scripts/shared/evalToString.js b/scripts/shared/evalToString.js
index aad199da5d75b..318925cc0969e 100644
--- a/scripts/shared/evalToString.js
+++ b/scripts/shared/evalToString.js
@@ -8,7 +8,7 @@
  */
 'use strict';
 
-function evalToString(ast /* : Object */) /* : string */ {
+function evalStringConcat(ast /* : Object */) /* : string */ {
   switch (ast.type) {
     case 'StringLiteral':
     case 'Literal': // ESLint
@@ -17,10 +17,44 @@ function evalToString(ast /* : Object */) /* : string */ {
       if (ast.operator !== '+') {
         throw new Error('Unsupported binary operator ' + ast.operator);
       }
-      return evalToString(ast.left) + evalToString(ast.right);
+      return evalStringConcat(ast.left) + evalStringConcat(ast.right);
     default:
       throw new Error('Unsupported type ' + ast.type);
   }
 }
+exports.evalStringConcat = evalStringConcat;
 
-module.exports = evalToString;
+function evalStringAndTemplateConcat(
+  ast /* : Object */,
+  args /* : Array<mixed> */
+) /* : string */ {
+  switch (ast.type) {
+    case 'StringLiteral':
+      return ast.value;
+    case 'BinaryExpression': // `+`
+      if (ast.operator !== '+') {
+        throw new Error('Unsupported binary operator ' + ast.operator);
+      }
+      return (
+        evalStringAndTemplateConcat(ast.left, args) +
+        evalStringAndTemplateConcat(ast.right, args)
+      );
+    case 'TemplateLiteral': {
+      let elements = [];
+      for (let i = 0; i < ast.quasis.length; i++) {
+        const elementNode = ast.quasis[i];
+        if (elementNode.type !== 'TemplateElement') {
+          throw new Error('Unsupported type ' + ast.type);
+        }
+        elements.push(elementNode.value.cooked);
+      }
+      args.push(...ast.expressions);
+      return elements.join('%s');
+    }
+    default:
+      // Anything that's not a string is interpreted as an argument.
+      args.push(ast);
+      return '%s';
+  }
+}
+exports.evalStringAndTemplateConcat = evalStringAndTemplateConcat;
diff --git a/yarn.lock b/yarn.lock
index 9deb96000d4e5..0055fc9a6d2f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6442,7 +6442,6 @@ eslint-plugin-no-unsanitized@3.1.2:
 
 "eslint-plugin-react-internal@link:./scripts/eslint-rules":
   version "0.0.0"
-  uid ""
 
 eslint-plugin-react@^6.7.1:
   version "6.10.3"