Disable consoleWithStackDev Transform except in RN/WWW (#30313)

Stacked on #30308. This is now a noop module so we can stop applying the transform of console.error using the Babel plugin in the mainline builds. I'm keeping the transform for RN/WWW for now although it might be nice if the transform moved into those systems as it gets synced instead of keeping it upstream. In jest tests we're already not running the forks for RN/WWW so we don't need it at all there.
facebook · Jul 12, 2024 · ff89ba7 · ff89ba7
1 parent 400e822
commit ff89ba7
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 95 deletions.
diff --git a/packages/react-client/src/ReactClientConsoleConfigBrowser.js b/packages/react-client/src/ReactClientConsoleConfigBrowser.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import {warn, error} from 'shared/consoleWithStackDev';
-
 const badgeFormat = '%c%s%c ';
 // Same badge styling as DevTools.
 const badgeStyle =
@@ -65,12 +63,6 @@ export function printToConsole(
     );
   }
 
-  if (methodName === 'error' && __DEV__) {
-    error.apply(console, newArgs);
-  } else if (methodName === 'warn' && __DEV__) {
-    warn.apply(console, newArgs);
-  } else {
-    // $FlowFixMe[invalid-computed-prop]
-    console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging
-  }
+  // $FlowFixMe[invalid-computed-prop]
+  console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging
 }
diff --git a/packages/react-client/src/ReactClientConsoleConfigPlain.js b/packages/react-client/src/ReactClientConsoleConfigPlain.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import {warn, error} from 'shared/consoleWithStackDev';
-
 const badgeFormat = '[%s] ';
 const pad = ' ';
 
@@ -46,12 +44,6 @@ export function printToConsole(
     newArgs.splice(offset, 0, badgeFormat, pad + badgeName + pad);
   }
 
-  if (methodName === 'error' && __DEV__) {
-    error.apply(console, newArgs);
-  } else if (methodName === 'warn' && __DEV__) {
-    warn.apply(console, newArgs);
-  } else {
-    // $FlowFixMe[invalid-computed-prop]
-    console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging
-  }
+  // $FlowFixMe[invalid-computed-prop]
+  console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging
 }
diff --git a/packages/react-client/src/ReactClientConsoleConfigServer.js b/packages/react-client/src/ReactClientConsoleConfigServer.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import {warn, error} from 'shared/consoleWithStackDev';
-
 // This flips color using ANSI, then sets a color styling, then resets.
 const badgeFormat = '\x1b[0m\x1b[7m%c%s\x1b[0m%c ';
 // Same badge styling as DevTools.
@@ -66,12 +64,6 @@ export function printToConsole(
     );
   }
 
-  if (methodName === 'error' && __DEV__) {
-    error.apply(console, newArgs);
-  } else if (methodName === 'warn' && __DEV__) {
-    warn.apply(console, newArgs);
-  } else {
-    // $FlowFixMe[invalid-computed-prop]
-    console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging
-  }
+  // $FlowFixMe[invalid-computed-prop]
+  console[methodName].apply(console, newArgs); // eslint-disable-line react-internal/no-production-logging
 }
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
@@ -2090,7 +2090,7 @@ function resolveConsoleEntry(
       task.run(callStack);
       return;
     }
-    // TODO: Set the current owner so that consoleWithStackDev adds the component
+    // TODO: Set the current owner so that captureOwnerStack() adds the component
     // stack during the replay - if needed.
   }
   const rootTask = response._debugRootTask;

diff --git a/packages/react-reconciler/src/ReactFiberErrorLogger.js b/packages/react-reconciler/src/ReactFiberErrorLogger.js
@@ -124,7 +124,7 @@ export function defaultOnCaughtError(
             error,
             componentNameMessage,
             recreateMessage,
-            // We let our consoleWithStackDev wrapper add the component stack to the end.
+            // We let DevTools or console.createTask add the component stack to the end.
           ],
           error.environmentName,
         );
@@ -134,7 +134,7 @@ export function defaultOnCaughtError(
           error,
           componentNameMessage,
           recreateMessage,
-          // We let our consoleWithStackDev wrapper add the component stack to the end.
+          // We let our DevTools or console.createTask add the component stack to the end.
         );
       }
     } finally {

diff --git a/packages/shared/consoleWithStackDev.js b/packages/shared/consoleWithStackDev.js
@@ -5,36 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export function setSuppressWarning(newSuppressWarning) {
-  // TODO: Noop. Delete.
-}
-
-// In DEV, calls to console.warn and console.error get replaced
-// by calls to these methods by a Babel plugin.
+// We expect that our Rollup, Jest, and Flow configurations
+// always shim this module with the corresponding environment
+// (either rn or www).
 //
-// In PROD (or in packages without access to React internals),
-// they are left as they are instead.
-
-export function warn(format, ...args) {
-  if (__DEV__) {
-    printWarning('warn', format, args);
-  }
-}
-
-export function error(format, ...args) {
-  if (__DEV__) {
-    printWarning('error', format, args);
-  }
-}
+// We should never resolve to this file, but it exists to make
+// sure that if we *do* accidentally break the configuration,
+// the failure isn't silent.
 
-function printWarning(level, format, args) {
-  // When changing this logic, you might want to also
-  // update consoleWithStackDev.www.js as well.
-  if (__DEV__) {
-    args.unshift(format);
-    // We intentionally don't use spread (or .apply) directly because it
-    // breaks IE9: https://github.com/facebook/react/issues/13610
-    // eslint-disable-next-line react-internal/no-production-logging
-    Function.prototype.apply.call(console[level], console, args);
-  }
+export function setSuppressWarning() {
+  // TODO: Delete this and error when even importing this module.
 }
diff --git a/scripts/jest/preprocessor.js b/scripts/jest/preprocessor.js
@@ -16,9 +16,6 @@ const pathToBabel = path.join(
   '../..',
   'package.json'
 );
-const pathToBabelPluginReplaceConsoleCalls = require.resolve(
-  '../babel/transform-replace-console-calls'
-);
 const pathToTransformInfiniteLoops = require.resolve(
   '../babel/transform-prevent-infinite-loops'
 );
@@ -73,14 +70,7 @@ module.exports = {
       const isInDevToolsPackages = !!filePath.match(
         /\/packages\/react-devtools.*\//
       );
-      const testOnlyPlugins = [];
-      const sourceOnlyPlugins = [];
-      if (process.env.NODE_ENV === 'development' && !isInDevToolsPackages) {
-        sourceOnlyPlugins.push(pathToBabelPluginReplaceConsoleCalls);
-      }
-      const plugins = (isTestFile ? testOnlyPlugins : sourceOnlyPlugins).concat(
-        babelOptions.plugins
-      );
+      const plugins = [].concat(babelOptions.plugins);
       if (isTestFile && isInDevToolsPackages) {
         plugins.push(pathToTransformReactVersionPragma);
       }

diff --git a/scripts/print-warnings/print-warnings.js b/scripts/print-warnings/print-warnings.js
@@ -68,7 +68,6 @@ function transform(file, enc, cb) {
 gs([
   'packages/**/*.js',
   '!packages/*/npm/**/*.js',
-  '!packages/shared/consoleWithStackDev.js',
   '!packages/react-devtools*/**/*.js',
   '!**/__tests__/**/*.js',
   '!**/__mocks__/**/*.js',

diff --git a/scripts/rollup/build-ghaction.js b/scripts/rollup/build-ghaction.js
@@ -149,16 +149,22 @@ function getBabelConfig(
     sourcemap: false,
   };
   if (isDevelopment) {
-    options.plugins.push(
-      ...babelToES5Plugins,
-      // Turn console.error/warn() into a custom wrapper
-      [
-        require('../babel/transform-replace-console-calls'),
-        {
-          shouldError: !canAccessReactObject,
-        },
-      ]
-    );
+    options.plugins.push(...babelToES5Plugins);
+    if (
+      bundleType === FB_WWW_DEV ||
+      bundleType === RN_OSS_DEV ||
+      bundleType === RN_FB_DEV
+    ) {
+      options.plugins.push(
+        // Turn console.error/warn() into a custom wrapper
+        [
+          require('../babel/transform-replace-console-calls'),
+          {
+            shouldError: !canAccessReactObject,
+          },
+        ]
+      );
+    }
   }
   if (updateBabelOptions) {
     options = updateBabelOptions(options);

diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
@@ -149,16 +149,22 @@ function getBabelConfig(
     sourcemap: false,
   };
   if (isDevelopment) {
-    options.plugins.push(
-      ...babelToES5Plugins,
-      // Turn console.error/warn() into a custom wrapper
-      [
-        require('../babel/transform-replace-console-calls'),
-        {
-          shouldError: !canAccessReactObject,
-        },
-      ]
-    );
+    options.plugins.push(...babelToES5Plugins);
+    if (
+      bundleType === FB_WWW_DEV ||
+      bundleType === RN_OSS_DEV ||
+      bundleType === RN_FB_DEV
+    ) {
+      options.plugins.push(
+        // Turn console.error/warn() into a custom wrapper
+        [
+          require('../babel/transform-replace-console-calls'),
+          {
+            shouldError: !canAccessReactObject,
+          },
+        ]
+      );
+    }
   }
   if (updateBabelOptions) {
     options = updateBabelOptions(options);