How to Fix TypeScript 'Property children is missing in type' Error with React FC<Props>

Threat/Impact Level: HIGH | Exploitability/Downtime Risk: HIGH (build-blocking compile error) | Time to Fix: 5 mins

TL;DR

• What broke: React 18 removed implicit children from React.FC. Your Props interface doesn't declare children, so TypeScript hard-fails at compile time.
• How to fix it: Explicitly add children?: React.ReactNode to your Props interface, or wrap with React.PropsWithChildren<Props>.
• Fast path: Use our Client-Side Sandbox below to auto-refactor this — paste your component and get corrected typings instantly without leaking your codebase.

The Incident (What Does the Error Mean?)

Raw compiler output:

TypeScript error in src/components/Layout.tsx:
Property 'children' is missing in type '{ title: string; }'
but required in type 'PropsWithChildren<LayoutProps>'.
  TS2741

Prior to React 18 / @types/react v18, React.FC<Props> silently injected children: ReactNode into every component's props. That implicit injection was removed as a deliberate breaking change. Any component that renders {props.children} or accepts JSX children without an explicit children field in its interface now blocks your entire build. This is not a runtime warning — it is a hard compile-time failure. Your CI pipeline stops. Your deployment stops.

The Attack Vector / Blast Radius

This error is a build-time blocker, not a runtime degradation. The blast radius:

• Immediate: tsc --noEmit exits non-zero. Every downstream job in your pipeline (test, bundle, deploy) is cancelled.
• Cascading: If you are using ts-jest, unit tests also fail to compile, masking real test failures with a type error.
• Subtle variant: Components that don't render children but are called with children by a parent (e.g., a wrapper HOC) will also fail — the error surfaces at the call site, not the definition, making it hard to trace in large monorepos.
• Migration trap: Upgrading @types/react from v17 to v18 in a large codebase triggers this error across every component that accepted children implicitly. Hundreds of files can fail simultaneously.

How to Fix It

Basic Fix — Explicit children on the Interface

- interface LayoutProps {
-   title: string;
- }
+ interface LayoutProps {
+   title: string;
+   children?: React.ReactNode;
+ }

  const Layout: React.FC<LayoutProps> = ({ title, children }) => (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );

Enterprise Best Practice — React.PropsWithChildren Wrapper

For components where children are required (not optional), use PropsWithChildren to make the contract explicit and enforce it at call sites:

- interface CardProps {
-   variant: 'outlined' | 'filled';
- }
- const Card: React.FC<CardProps> = ({ variant, children }) => (

+ interface CardProps {
+   variant: 'outlined' | 'filled';
+ }
+ const Card: React.FC<React.PropsWithChildren<CardProps>> = ({ variant, children }) => (
    <div className={`card card--${variant}`}>
      {children}
    </div>
  );

When to use which:

• children?: React.ReactNode on the interface → component optionally renders children (layout shells, containers).
• React.PropsWithChildren<Props> → children are semantically required; signals intent clearly to consumers.
• Never rely on the old implicit behavior. Even if you downgrade @types/react to v17 to silence the error, you are accruing type debt that will re-surface.

💡 Tired of pasting proprietary configs into ChatGPT? Generic AI tools log your company's ARNs, DB strings, and private keys. StackEngine is a zero-backend, pure Client-Side WASM utility. Drop your failing config into the sandbox above. We redact your secrets locally in the browser and auto-generate the refactored code using your own API key.

Prevention in CI/CD

1. Enforce strict TypeScript in tsconfig.json

  {
    "compilerOptions": {
+     "strict": true,
+     "noImplicitAny": true,
+     "exactOptionalPropertyTypes": true
    }
  }

strict: true ensures this class of error is never silently swallowed.

2. Block merges with a type-check gate in CI

# .github/workflows/ci.yml
- name: TypeScript type check
  run: npx tsc --noEmit

This must run before your test and build steps, not after.

3. ESLint rule to catch missing children early

Install eslint-plugin-react and enable:

"react/prop-types": "off",
"@typescript-eslint/no-explicit-any": "error"

Pair with the @typescript-eslint parser so ESLint operates on type-checked AST.

4. Automate the migration across a monorepo

If upgrading @types/react to v18 in a large repo, run a codemod before merging:

npx types-react-codemod preset-18 ./src

This codemod from the React team automatically adds children?: React.ReactNode to every affected interface. Run it once, commit, then enforce via CI going forward.