isnative-boolean-called-as-function

name	isNative-boolean-called-as-function
description	When a utility exports a boolean constant but a component imports and calls it as a function — `isNative()` instead of `isNative` — causes "is not a function" at render time
source	auto-skill
extracted_at	2026-06-06T09:50:00.000Z

The trap

A platform detection utility exports a boolean value (not a function):

// src/utils/platform.js
export const PLATFORM = {
  isNative: typeof window !== 'undefined' && !!window.Capacitor,
}
export const isNative = PLATFORM.isNative  // ← boolean, not a function

But a component imports and calls it like a function:

// Dashboard.jsx
import { isNative } from '../utils/platform.js'
// ...
{isNative() && (   // ❌ TypeError: isNative is not a function
  <CameraButton />
)}

Why this is deceptive: A different file (nativeAPI.js) exports isNative as an actual function, and other files (electronAPI.js) import from there correctly. So isNative() works in some places and crashes in others, depending on which file provides the import.

How to diagnose

1. The error points to a specific line: TypeError: isNative is not a function at Dashboard (Dashboard.jsx:141:10)
2. Check the import source — it traces to platform.js, not nativeAPI.js
3. Read the export: export const isNative = PLATFORM.isNative — it's a property access, not a function

How to fix

Change isNative() to isNative (remove parentheses):

{isNative && (   // ✅ boolean check, no function call
  <CameraButton />
)}

Prevention

When a codebase has two modules exporting the same name but different types, use grep to audit all callers before renaming or refactoring:

grep -rn "isNative()" src/

If some callers import from a module where it IS a function and others from where it's a boolean, pick a consistent name (e.g., rename the boolean to IS_NATIVE or the function to checkIsNative).