fix(warning): replace __DEV__ with process.env.NODE_ENV condition (#18978)

tay1orjones · web-flow · commit 9d3bbd163966 · 2025-04-01T14:08:25.000Z
* fix(warning): replace __DEV__ with process.env.NODE_ENV condition

* chore: update dev docs
diff --git a/config/eslint-config-carbon/base.js b/config/eslint-config-carbon/base.js
@@ -39,7 +39,4 @@ module.exports = {
     jest: true,
     jasmine: true,
   },
-  globals: {
-    __DEV__: true,
-  },
 };
diff --git a/config/eslint-config-carbon/rules/best-practices.js b/config/eslint-config-carbon/rules/best-practices.js
@@ -11,5 +11,12 @@ module.exports = {
   rules: {
     // @see https://eslint.org/docs/rules/curly
     curly: 'error',
+    'no-restricted-globals': [
+      'error',
+      {
+        name: '__DEV__',
+        message: "Use process.env.NODE_ENV !== 'production' instead",
+      },
+    ],
   },
 };
diff --git a/config/jest-config-carbon/setup/setup.js b/config/jest-config-carbon/setup/setup.js
@@ -7,8 +7,6 @@
 
 'use strict';
 
-global.__DEV__ = true;
-
 jest.setTimeout(20000);
 
 global.requestAnimationFrame = function requestAnimationFrame(callback) {
diff --git a/docs/developer-handbook.md b/docs/developer-handbook.md
@@ -660,7 +660,7 @@ import { warning } from '../../internal/warning';
 let didWarnAboutDeprecation = false;
 
 function SomeComponent() {
-  if (__DEV__) {
+  if (process.env.NODE_ENV !== 'production') {
     warning(
       didWarnAboutDeprecation,
       'The `SomeComponent` component has been deprecated and will be removed ' +
@@ -671,6 +671,10 @@ function SomeComponent() {
 }
 ```
 
+_Note: even though warning() has a process.env.NODE_ENV condition internal to
+itself, an additional one is needed above to ensure `didWarnAboutDeprecation` is
+not modified in non-development environments._
+
 _Note: if available, you should add a closing sentence specifying what component
 to use instead, or share a link for more information. This may look like:_
 
diff --git a/packages/icon-build-helpers/src/builders/react/builder.js b/packages/icon-build-helpers/src/builders/react/builder.js
@@ -236,7 +236,7 @@ function formatAttributes(attrs) {
 function createIconFlatExport(moduleName, descriptor, isDeprecated = false) {
   const deprecatedBlock = isDeprecated
     ? `
-    if (__DEV__) {
+    if (process.env.NODE_ENV !== "production") {
       if (!didWarnAboutDeprecation['${moduleName}']) {
         didWarnAboutDeprecation['${moduleName}'] = true;
         console.warn(
@@ -256,7 +256,7 @@ function createIconEntrypoint(moduleName, descriptor, isDeprecated = false) {
     : '';
   const deprecatedBlock = isDeprecated
     ? `
-    if (__DEV__) {
+    if (process.env.NODE_ENV !== "production") {
       if (!didWarnAboutDeprecation) {
         didWarnAboutDeprecation = true;
         console.warn(
diff --git a/packages/icon-build-helpers/src/builders/react/next/templates.js b/packages/icon-build-helpers/src/builders/react/next/templates.js
@@ -40,7 +40,7 @@ const component = template(
       }
     );
 
-    if (__DEV__) {
+    if (process.env.NODE_ENV !== "production") {
       %%moduleName%%.propTypes = iconPropTypes;
     }
   `,
@@ -51,7 +51,7 @@ const component = template(
 
 const deprecatedBlock = template(
   `
-    if (__DEV__) {
+    if (process.env.NODE_ENV !== "production") {
       if (!%%check%%) {
         %%check%% = true;
         console.warn(%%warning%%);
diff --git a/packages/react/src/components/ContainedList/index.ts b/packages/react/src/components/ContainedList/index.ts
@@ -11,7 +11,7 @@ import ContainedListItem from './ContainedListItem';
 
 ContainedList.ContainedListItem = ContainedListItem;
 
-if (__DEV__) {
+if (process.env.NODE_ENV !== 'production') {
   deprecateFieldOnObject(ContainedList, 'ContainedListItem', ContainedListItem);
 }
 export { ContainedListItem };
diff --git a/packages/react/src/components/ModalWrapper/ModalWrapper.tsx b/packages/react/src/components/ModalWrapper/ModalWrapper.tsx
@@ -45,12 +45,13 @@ interface ModelWrapperState {
 }
 
 let didWarnAboutDeprecation = false;
+let isDev = process.env.NODE_ENV !== 'production';
 
 export default class ModalWrapper extends React.Component<
   ModalWrapperProps,
   ModelWrapperState
 > {
-  if(__DEV__) {
+  if(isDev) {
     warning(
       didWarnAboutDeprecation,
       '`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`'
diff --git a/packages/react/src/components/Notification/Notification.tsx b/packages/react/src/components/Notification/Notification.tsx
@@ -1436,7 +1436,7 @@ let didWarnAboutDeprecation = false;
 export const StaticNotification: React.FC<StaticNotificationProps> = (
   props
 ) => {
-  if (__DEV__) {
+  if (process.env.NODE_ENV !== 'production') {
     warning(
       didWarnAboutDeprecation,
       '`StaticNotification` has been renamed to `Callout`.' +
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.tsx b/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
@@ -94,7 +94,7 @@ export const getMenuOffset: MenuOffset = (
 ) => {
   const triggerButtonPositionProp = triggerButtonPositionProps[direction];
   const triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
-  if (__DEV__) {
+  if (process.env.NODE_ENV !== 'production') {
     invariant(
       triggerButtonPositionProp && triggerButtonPositionFactor,
       '[OverflowMenu] wrong floating menu direction: `%s`',
diff --git a/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.tsx b/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.tsx
@@ -124,14 +124,12 @@ const OverflowMenuItem: OverflowMenuItemComponent = React.forwardRef(
       }
     }
 
-    if (__DEV__) {
-      warning(
-        !!closeMenu,
-        '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' +
-          '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' +
-          'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.'
-      );
-    }
+    warning(
+      !!closeMenu,
+      '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' +
+        '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' +
+        'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.'
+    );
 
     const overflowMenuBtnClasses = cx(
       `${prefix}--overflow-menu-options__btn`,
diff --git a/packages/react/src/components/OverflowMenuV2/index.js b/packages/react/src/components/OverflowMenuV2/index.js
@@ -15,7 +15,7 @@ import { OverflowMenu } from '../OverflowMenu';
 let didWarnAboutDeprecation = false;
 
 function OverflowMenuV2(props) {
-  if (__DEV__) {
+  if (process.env.NODE_ENV !== 'production') {
     warning(
       didWarnAboutDeprecation,
       '`<OverflowMenuV2>` is deprecated and will be removed in the next major version. Use `<OverflowMenu>` with the `enable-v12-overflowmenu` feature flag instead.'
diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
@@ -489,7 +489,7 @@ export const Popover: PopoverComponent & {
 
 // Note: this displayName is temporarily set so that Storybook ArgTable
 // correctly displays the name of this component
-if (__DEV__) {
+if (process.env.NODE_ENV !== 'production') {
   Popover.displayName = 'Popover';
 }
 
diff --git a/packages/react/src/components/Text/createTextComponent.tsx b/packages/react/src/components/Text/createTextComponent.tsx
@@ -22,7 +22,7 @@ export const createTextComponent = (
     return <Text as={element} {...props} />;
   };
 
-  if (__DEV__) {
+  if (process.env.NODE_ENV !== 'production') {
     TextWrapper.displayName = displayName;
   }
 
diff --git a/packages/react/src/components/TextInput/ControlledPasswordInput.tsx b/packages/react/src/components/TextInput/ControlledPasswordInput.tsx
@@ -148,7 +148,7 @@ const ControlledPasswordInput = React.forwardRef(
   ) {
     const prefix = usePrefix();
     const controlledPasswordInstanceId = useId();
-    if (__DEV__) {
+    if (process.env.NODE_ENV !== 'production') {
       warning(
         didWarnAboutDeprecation,
         '`<TextInput.ControlledPasswordInput>` has been deprecated in favor of `<TextInput.PasswordInput />` and will be removed in the next major release of `carbon-components-react`'
diff --git a/packages/react/src/components/TextInput/index.ts b/packages/react/src/components/TextInput/index.ts
@@ -11,7 +11,7 @@ import PasswordInput from './PasswordInput';
 import TextInput, { type TextInputProps } from './TextInput';
 import { type TextInputSkeletonProps } from './TextInput.Skeleton';
 
-if (__DEV__) {
+if (process.env.NODE_ENV !== 'production') {
   deprecateFieldOnObject(
     TextInput,
     'ControlledPasswordInput',
diff --git a/packages/react/src/internal/FloatingMenu.tsx b/packages/react/src/internal/FloatingMenu.tsx
@@ -356,7 +356,7 @@ export const FloatingMenu = ({
 
     focusTarget.focus();
 
-    if (focusTarget === menuBody && __DEV__) {
+    if (focusTarget === menuBody) {
       warning(
         focusableNode === null,
         'Floating Menus must have at least a programmatically focusable child. This can be accomplished by adding tabIndex="-1" to the content element.'
diff --git a/packages/react/src/internal/useNoInteractiveChildren.js b/packages/react/src/internal/useNoInteractiveChildren.js
@@ -11,7 +11,7 @@ export function useNoInteractiveChildren(
   ref,
   message = 'component should have no interactive child nodes'
 ) {
-  if (__DEV__) {
+  if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;
@@ -29,7 +29,7 @@ export function useInteractiveChildrenNeedDescription(
   ref,
   message = `interactive child node(s) should have an \`aria-describedby\` property`
 ) {
-  if (__DEV__) {
+  if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;
diff --git a/packages/react/src/internal/warning.ts b/packages/react/src/internal/warning.ts
@@ -10,24 +10,25 @@ import { noopFn } from './noopFn';
 /**
  * Logs a warning.
  *
- * The warning is only logged if the condition is not met and  `__DEV__` is
- * truthy.
+ * The warning is only logged if the condition is not met and
+ * `process.env.NODE_ENV !== 'production'` is truthy.
  *
  * @param condition - Condition to evaluate.
  * @param message - Warning message.
  * @throws Error if no `message` is provided.
  */
-export const warning: (condition: boolean, message: string) => void = __DEV__
-  ? (condition, message) => {
-      if (typeof message === 'undefined') {
-        throw new Error(
-          '`warning(condition, message)` requires a warning ' +
-            'format argument'
-        );
-      }
+export const warning: (condition: boolean, message: string) => void =
+  process.env.NODE_ENV !== 'production'
+    ? (condition, message) => {
+        if (typeof message === 'undefined') {
+          throw new Error(
+            '`warning(condition, message)` requires a warning ' +
+              'format argument'
+          );
+        }
 
-      if (!condition) {
-        console.warn('Warning: ' + message);
+        if (!condition) {
+          console.warn('Warning: ' + message);
+        }
       }
-    }
-  : noopFn;
+    : noopFn;
diff --git a/packages/react/src/internal/wrapFocus.js b/packages/react/src/internal/wrapFocus.js
@@ -101,7 +101,7 @@ function wrapFocusWithoutSentinels({
 }) {
   if (
     ['blur', 'focusout', 'focusin', 'focus'].includes(event.type) &&
-    __DEV__
+    process.env.NODE_ENV !== 'production'
   ) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
diff --git a/packages/react/src/prop-types/isRequiredOneOf.js b/packages/react/src/prop-types/isRequiredOneOf.js
@@ -17,7 +17,7 @@ export default function isRequiredOneOf(propTypes) {
     (propType) =>
     (props, propName, componentName, ...rest) => {
       if (
-        __DEV__ &&
+        process.env.NODE_ENV !== 'production' &&
         names.every((name) => typeof props[name] === 'undefined')
       ) {
         return new Error(
diff --git a/packages/react/src/prop-types/requiredIfGivenPropIsTruthy.js b/packages/react/src/prop-types/requiredIfGivenPropIsTruthy.js
@@ -14,7 +14,11 @@
  */
 export default function requiredIfGivenPropIsTruthy(name, propType) {
   return function check(props, propName, componentName, ...rest) {
-    if (__DEV__ && props[name] == true && props[propName] == null) {
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      props[name] == true &&
+      props[propName] == null
+    ) {
       return new Error(
         `You must provide a value for \`${propName}\` in \`${componentName}\` if \`${name}\` exists.`
       );
diff --git a/packages/react/src/prop-types/requiredIfValueExists.js b/packages/react/src/prop-types/requiredIfValueExists.js
@@ -14,7 +14,12 @@ export default function requiredIfValueExists(propType) {
     const { [propName]: onChange, value, readOnly } = props;
     const exists = onChange !== undefined;
     const valueExists = value !== undefined;
-    if (__DEV__ && !exists && valueExists && !readOnly) {
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      !exists &&
+      valueExists &&
+      !readOnly
+    ) {
       return new Error(
         `You provided a value prop to \`${componentName}\` without an \`onChange\` handler. ` +
           'This will render a read-only field. ' +
diff --git a/packages/react/src/types/globals.d.ts b/packages/react/src/types/globals.d.ts
@@ -1 +0,0 @@
-declare const __DEV__: boolean;
diff --git a/packages/utilities-react/src/useNoInteractiveChildren/index.jsx b/packages/utilities-react/src/useNoInteractiveChildren/index.jsx
@@ -11,7 +11,7 @@ export function useNoInteractiveChildren(
   ref,
   message = 'component should have no interactive child nodes'
 ) {
-  if (__DEV__) {
+  if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;
@@ -29,7 +29,7 @@ export function useInteractiveChildrenNeedDescription(
   ref,
   message = `interactive child node(s) should have an \`aria-describedby\` property`
 ) {
-  if (__DEV__) {
+  if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ const component = template(`
`40`	`40`	`}`
`41`	`41`	`);`
`42`	`42`
`43`		`- if (__DEV__) {`
	`43`	`+ if (process.env.NODE_ENV !== "production") {`
`44`	`44`	`%%moduleName%%.propTypes = iconPropTypes;`
`45`	`45`	`}`
`46`	`46`	`,
`@@ -51,7 +51,7 @@ const component = template(`
`51`	`51`
`52`	`52`	`const deprecatedBlock = template(`
`53`	`53`	`
`54`		`- if (__DEV__) {`
	`54`	`+ if (process.env.NODE_ENV !== "production") {`
`55`	`55`	`if (!%%check%%) {`
`56`	`56`	`%%check%% = true;`
`57`	`57`	`console.warn(%%warning%%);`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ import ContainedListItem from './ContainedListItem';`
`11`	`11`
`12`	`12`	`ContainedList.ContainedListItem = ContainedListItem;`
`13`	`13`
`14`		`-if (__DEV__) {`
	`14`	`+if (process.env.NODE_ENV !== 'production') {`
`15`	`15`	`deprecateFieldOnObject(ContainedList, 'ContainedListItem', ContainedListItem);`
`16`	`16`	`}`
`17`	`17`	`export { ContainedListItem };`