How to fix Cannot use private fields in class components without TS support in React

ReactINTERMEDIATEMEDIUM

This error occurs when using JavaScript private field syntax (#fieldName) in React class components without proper TypeScript or Babel configuration. Private fields require ECMAScript 2015+ targets and specific transpiler support to work correctly.

What this error means

This error appears when you attempt to use ECMAScript private fields (denoted with the # prefix) in React class components without the necessary build tooling configuration. Private fields were introduced in ES2021 as a way to create truly private class properties that are completely inaccessible outside the class—unlike TypeScript's private keyword, which only enforces privacy at compile time. React class components can use private fields, but your build configuration must support transpiling this modern JavaScript syntax. TypeScript requires targeting ES2015 or higher, and Babel needs the appropriate plugins to transform private field syntax into code that works in all environments. The key distinction is that TypeScript's private keyword is erased at runtime and acts like a normal property, while ECMAScript's # private fields are enforced by the JavaScript engine itself and cannot be accessed outside the class at runtime.

How to fix "Cannot use private fields in class components without TS support"

1Check your TypeScript target configuration

Open your tsconfig.json file and ensure the target is set to ES2015 or higher:

json

{
  "compilerOptions": {
    "target": "ES2015", // or ES2016, ES2020, ESNext
    "lib": ["ES2015", "DOM"],
    "useDefineForClassFields": true
  }
}

The useDefineForClassFields option ensures proper class field semantics.

2Install required Babel plugins

If using Babel, install the necessary plugins for private fields and class properties:

bash

npm install --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods

Or with yarn:

bash

yarn add -D @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods

3Configure Babel to support private fields

Update your .babelrc or babel.config.js to include the plugins:

json

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    ["@babel/preset-typescript", {
      "allowDeclareFields": true
    }]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods"
  ]
}

Note: Plugin order matters. @babel/plugin-transform-typescript must run before class-related plugins.

4Enable allowDeclareFields if using declare keyword

If you're using TypeScript's declare keyword with private fields, enable the allowDeclareFields flag:

json

{
  "presets": [
    ["@babel/preset-typescript", {
      "allowDeclareFields": true
    }]
  ]
}

This prevents the "declare fields must first be transformed" error.

5Consider using TypeScript private keyword as alternative

If you need broader compatibility, use TypeScript's private keyword instead of # syntax:

typescript

class MyComponent extends React.Component {
  private myField = 'value'; // TypeScript private

  // Instead of:
  // #myField = 'value'; // ECMAScript private
}

While TypeScript's private is only enforced at compile time, it doesn't require runtime support and works with any target.

6Rebuild and clear caches

After configuration changes, clear build caches and rebuild:

bash

# Remove node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Clear build caches
rm -rf .cache dist build

# Rebuild
npm run build

For create-react-app projects:

bash

rm -rf node_modules/.cache
npm start

How to fix Cannot use private fields in class components without TS support in React

What this error means

Typical symptoms

Common causes

How to fix "Cannot use private fields in class components without TS support"

Advanced notes

Related errors

Official resources & further reading