necolas/react-native-web · error · Error

Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!

Error message

Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!

What it means

Touchable.render contains a debug branch that draws visible hitSlop outlines when the static flag Touchable.TOUCH_TARGET_DEBUG is enabled. If that flag is true while NODE_ENV is production, the code throws Error('Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!') because the debug overlay is meant only for development tuning of touch targets. This is a deliberate fail-fast guard so a debug-only build flag doesn't leak into production bundles.

Source

Thrown at packages/react-native-web/src/exports/Touchable/index.js:995

const Touchable = {
  Mixin: TouchableMixin,
  TOUCH_TARGET_DEBUG: false, // Highlights all touchable targets. Toggle with Inspector.
  /**
   * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).
   */
  renderDebugView: ({
    color,
    hitSlop
  }: {
    color: string | number,
    hitSlop: EdgeInsetsProp
  }): Node => {
    if (!Touchable.TOUCH_TARGET_DEBUG) {
      return null;
    }
    if (process.env.NODE_ENV !== 'production') {
      throw Error(
        'Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!'
      );
    }
    const debugHitSlopStyle = {};
    hitSlop = hitSlop || { top: 0, bottom: 0, left: 0, right: 0 };
    for (const key in hitSlop) {
      debugHitSlopStyle[key] = -hitSlop[key];
    }
    const normalizedColor = normalizeColor(color);
    if (typeof normalizedColor !== 'number') {
      return null;
    }
    const hexColor =
      '#' + ('00000000' + normalizedColor.toString(16)).substr(-8);
    return (
      <View
        pointerEvents="none"
        style={{

View on GitHub (pinned to a9de220ba9)

Solutions

1. Set Touchable.TOUCH_TARGET_DEBUG = false (or remove the assignment) in production code paths
2. Verify process.env.NODE_ENV is correctly set to 'production' during bundling (DefinePlugin / metro config) so dead dev code is stripped
3. Search the codebase for TOUCH_TARGET_DEBUG and ensure it's only enabled in dev-only modules or behind __DEV__
4. If the flag is needed in prod-like testing, run with NODE_ENV=development instead of enabling it in production

Example fix

// before
Touchable.TOUCH_TARGET_DEBUG = true;
// after
if (process.env.NODE_ENV !== 'production') {
  Touchable.TOUCH_TARGET_DEBUG = true;
}

if (Touchable.TOUCH_TARGET_DEBUG && process.env.NODE_ENV === 'production') {
  throw new Error('Disable Touchable.TOUCH_TARGET_DEBUG before a production build');
}

function isProdSafeTouchable(t) {
  return !(t.TOUCH_TARGET_DEBUG === true && process.env.NODE_ENV === 'production');
}

try {
  renderApp();
} catch (e) {
  if (e.message.includes('TOUCH_TARGET_DEBUG')) {
    Touchable.TOUCH_TARGET_DEBUG = false;
    renderApp();
  } else {
    throw e;
  }
}

When it happens

Trigger: Touchable.TOUCH_TARGET_DEBUG = true (set statically or by a devtools/debug module) while the app runs with process.env.NODE_ENV === 'production'; typically from copying a dev config into a prod build or a bundler incorrectly leaving process.env.NODE_ENV unminified/unreplaced.

Common situations: Forgot to remove TOUCH_TARGET_DEBUG after debugging touch target sizes; bundler (webpack/metro) config not defining NODE_ENV=production so the guard misfires or the flag persists; e2e/production builds sharing a constants file with the debug flag enabled.

Related errors

• Unrecognized signal `${signal}` or state `${curState}` for T
• Touchable cannot transition from `${curState}` to `${signal}

AI-assisted analysis of necolas/react-native-web@a9de220ba9 (2026-09-01). Data as JSON: /api/errors/09d5daf140065821. Report an issue: GitHub.