[Flight] Warn once if eval is disabled in dev environment

Author: eps1lon

packages/react-client/src/ReactClientDebugConfigBrowser.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+let hasConfirmedEval = false;
+export function checkEvalAvailabilityOnceDev(): void {
+  if (__DEV__) {
+    if (!hasConfirmedEval) {
+      hasConfirmedEval = true;
+      try {
+        // eslint-disable-next-line no-eval
+        (0, eval)('null');
+      } catch {
+        console.error(
+          'eval() not supported in this environment. ' +
+            'If this page was served with a `Content-Security-Policy`, ' +
+            'make sure that `unsafe-eval` is included. ' +
+            'React requires eval() in development mode for various debugging features ' +
+            'like reconstructing callstacks from a different environment.\n' +
+            'React will never use eval() in production mode',
+        );
+      }
+    }
+  } else {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'checkEvalAvailabilityOnceDev should never be called in production mode. This is a bug in React.',
+    );
+  }
+}

packages/react-client/src/ReactClientDebugConfigNode.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+let hasConfirmedEval = false;
+export function checkEvalAvailabilityOnceDev(): void {
+  if (__DEV__) {
+    if (!hasConfirmedEval) {
+      hasConfirmedEval = true;
+      try {
+        // eslint-disable-next-line no-eval
+        (0, eval)('null');
+      } catch {
+        console.error(
+          'eval() not supported in this environment. ' +
+            'This can happen if you started the Node.js process with --disallow-code-generation-from-strings, ' +
+            'or if `eval` was patched by other means. ' +
+            'React requires eval() in development mode for various debugging features ' +
+            'like reconstructing callstacks from a different environment.\n' +
+            'React will never use eval() in production mode',
+        );
+      }
+    }
+  } else {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'checkEvalAvailabilityOnceDev should never be called in production mode. This is a bug in React.',
+    );
+  }
+}

packages/react-client/src/ReactClientDebugConfigPlain.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+let hasConfirmedEval = false;
+export function checkEvalAvailabilityOnceDev(): void {
+  if (__DEV__) {
+    if (!hasConfirmedEval) {
+      hasConfirmedEval = true;
+      try {
+        // eslint-disable-next-line no-eval
+        (0, eval)('null');
+      } catch {
+        console.error(
+          'eval() is not supported in this environment. ' +
+            'React requires eval() in development mode for various debugging features ' +
+            'like reconstructing callstacks from a different environment.\n' +
+            'React will never use eval() in production mode',
+        );
+      }
+    }
+  } else {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'checkEvalAvailabilityOnceDev should never be called in production mode. This is a bug in React.',
+    );
+  }
+}

packages/react-client/src/ReactFlightClient.js

@@ -61,6 +61,7 @@ import {
   bindToConsole,
   rendererVersion,
   rendererPackageName,
+  checkEvalAvailabilityOnceDev,
 } from './ReactFlightClientConfig';
 
 import {
@@ -2768,6 +2769,12 @@ export function createResponse(
   debugEndTime: void | number, // DEV-only
   debugChannel: void | DebugChannel, // DEV-only
 ): WeakResponse {
+  // We use eval to create fake function stacks which includes Component stacks.
+  // A warning would be noise if you used Flight without Components and don't encounter
+  // errors. We're warning eagerly so that you configure your environment accordingly
+  // before you encounter an error.
+  checkEvalAvailabilityOnceDev();
+
   return getWeakResponse(
     // $FlowFixMe[invalid-constructor]: the shapes are exact here but Flow doesn't like constructors
     new ResponseInstance(

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -3715,6 +3715,12 @@ describe('ReactFlight', () => {
             '\n    in b (at **)' +
             '\n    in a (at **)',
         );
+        assertConsoleErrorDev([
+          'eval() is not supported in this environment. ' +
+            'React requires eval() in development mode for various debugging features ' +
+            'like reconstructing callstacks from a different environment.\n' +
+            'React will never use eval() in production mode',
+        ]);
       } else {
         expect(receivedError.message).toEqual(
           'An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.',

packages/react-client/src/forks/ReactFlightClientConfig.custom.js

@@ -53,3 +53,5 @@ export const bindToConsole = $$$config.bindToConsole;
 
 export const rendererVersion = $$$config.rendererVersion;
 export const rendererPackageName = $$$config.rendererPackageName;
+
+export const checkEvalAvailabilityOnceDev = $$$config.checkEvalAvailabilityOnceDev;

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js

@@ -12,6 +12,7 @@ export const rendererPackageName = 'react-server-dom-esm';
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+export * from 'react-client/src/ReactClientDebugConfigBrowser';
 export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM';
 export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMBrowser';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-parcel.js

@@ -12,6 +12,7 @@ export const rendererPackageName = 'react-server-dom-parcel';
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+export * from 'react-client/src/ReactClientDebugConfigBrowser';
 export * from 'react-server-dom-parcel/src/client/ReactFlightClientConfigBundlerParcel';
 export * from 'react-server-dom-parcel/src/client/ReactFlightClientConfigTargetParcelBrowser';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js

@@ -12,6 +12,7 @@ export const rendererPackageName = 'react-server-dom-turbopack';
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+export * from 'react-client/src/ReactClientDebugConfigBrowser';
 export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';
 export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser';
 export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackBrowser';

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js

@@ -12,6 +12,7 @@ export const rendererPackageName = 'react-server-dom-webpack';
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+export * from 'react-client/src/ReactClientDebugConfigBrowser';
 export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack';
 export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser';
 export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackBrowser';