How to fix this.state must be initialized in constructor, not in class body in React

ReactINTERMEDIATEMEDIUMUpdated Dec 9, 2025· 98 views

This error occurs when trying to use class field syntax to initialize state without proper Babel configuration, or when the build tool doesn't support class properties. The state property must be assigned in the constructor using `this.state = {}` or class properties transform must be enabled.

Quick fix

Fixes this.state must be initialized in constructor, not in class body

# Check CRA version (should be 2.0+)
npm list react-scripts
  1. Verify your build tool and Babel configuration
  2. Install the class properties Babel plugin
  3. Use constructor-based state initialization as a workaround
  4. Update Babel preset for automatic plugin inclusion
react — error
# Check CRA version (should be 2.0+)
npm list react-scripts
this.state must be initialized in constructor, not in class body

What this error means

This error indicates that your React class component is trying to initialize state using class field syntax (`state = {}`) but your build environment doesn't support this modern JavaScript feature. Class field syntax (also called class properties) is a Stage 3 JavaScript proposal that allows you to define class properties directly in the class body without a constructor. While modern build tools like Create React App and Vite include the necessary Babel transform by default, older projects or custom build configurations may not have this feature enabled. When the class properties transform is missing, JavaScript engines treat `state = {}` as invalid syntax, requiring you to initialize state the traditional way inside the constructor using `this.state = {}`. This error commonly appears when migrating legacy codebases, using outdated build tools, or working with custom Webpack/Babel configurations that haven't been updated.

Typical symptoms

  • Build fails with syntax error about state initialization
  • Error message mentions "class body" or "constructor"
  • Component works when state is moved to constructor
  • Error occurs after upgrading build tools or dependencies
  • Missing class properties transform error from Babel

Common causes

  1. Babel class properties plugin is not installed or configured
  2. Using outdated version of @babel/preset-env without plugin-proposal-class-properties
  3. Custom Webpack configuration missing class properties support
  4. Build tool doesn't support ES2022 class fields by default
  5. Incorrect .babelrc or babel.config.js configuration
  6. Using TypeScript without proper target configuration for class fields

How to fix "this.state must be initialized in constructor, not in class body"

1Verify your build tool and Babel configuration

First, check if you're using a modern build tool that includes class properties support by default:

Create React App (CRA):

bash
# Check CRA version (should be 2.0+)
npm list react-scripts

Vite:

bash
# Check Vite version (has built-in support)
npm list vite

If using a custom Babel setup, check your .babelrc or babel.config.js:

json
{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}
2Install the class properties Babel plugin

If you have a custom Babel configuration and the plugin is missing, install it:

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

Or with Yarn:

bash
yarn add -D @babel/plugin-proposal-class-properties

Then add it to your Babel configuration:

json
{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}
3Use constructor-based state initialization as a workaround

If you can't immediately fix the build configuration, convert your component to use constructor-based initialization:

Before (class field syntax):

javascript
class MyComponent extends React.Component {
  state = {
    count: 0,
    message: 'Hello'
  };

  render() {
    return <div>{this.state.count}</div>;
  }
}

After (constructor initialization):

javascript
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      message: 'Hello'
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Remember to always call super(props) before accessing this.state or this.props in the constructor.

4Update Babel preset for automatic plugin inclusion

Modern versions of @babel/preset-env automatically include class properties support when targeting appropriate browsers. Update your preset configuration:

bash
npm install --save-dev @babel/preset-env@latest @babel/preset-react@latest

Update your babel.config.js:

javascript
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        browsers: ['last 2 versions', 'not dead']
      }
    }],
    '@babel/preset-react'
  ]
};

With recent @babel/preset-env versions, class properties are included automatically based on your target browsers.

5Configure TypeScript for class fields if using TS

If you're using TypeScript, ensure your tsconfig.json has the correct target and settings:

json
{
  "compilerOptions": {
    "target": "ES2022",
    "jsx": "react",
    "useDefineForClassFields": true
  }
}

For TypeScript 4.3+, useDefineForClassFields should be set to true to match the ES2022 class fields specification. This ensures TypeScript compiles class fields correctly.

Advanced notes

Class Fields vs Class Properties:
The official JavaScript specification now includes class fields (ES2022), which is slightly different from the Babel class properties transform proposal. The main difference is initialization timing - class fields are initialized before the constructor runs, while the Babel transform initializes them inside the constructor.

Migration Strategy:
When updating older React projects, you may encounter thousands of components using class field syntax. Instead of converting all components to use constructors, prioritize fixing your build configuration. Modern tooling (Create React App 2.0+, Next.js 9.3+, Vite) includes this support out of the box.

Function Components Alternative:
If you're starting a new project or refactoring, consider using function components with hooks instead of class components. This avoids the entire class initialization debate:

javascript
function MyComponent() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('Hello');

  return <div>{count}</div>;
}

Webpack Configuration:
If using custom Webpack setup, ensure babel-loader is properly configured:

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  }
};

Debugging Tips:
To verify if class properties are working, add a simple test component and check if it compiles. If compilation succeeds but runtime fails, the issue may be in your target browser support rather than build configuration.

Frequently asked questions

What does "this.state must be initialized in constructor, not in class body" mean?
This error indicates that your React class component is trying to initialize state using class field syntax (state = {}) but your build environment doesn't support this modern JavaScript feature. Class field syntax (also called class properties) is a Stage 3 JavaScript proposal that allows you to define class properties directly in the class body without a constructor. While modern build tools like Create React App and Vite include the necessary Babel transform by default, older projects or custom build configurations may not have this feature enabled.
How do I fix "this.state must be initialized in constructor, not in class body"?
This error occurs when trying to use class field syntax to initialize state without proper Babel configuration, or when the build tool doesn't support class properties. The state property must be assigned in the constructor using this.state = {} or class properties transform must be enabled.
What causes "this.state must be initialized in constructor, not in class body"?
Babel class properties plugin is not installed or configured Using outdated version of @babel/preset-env without plugin-proposal-class-properties Custom Webpack configuration missing class properties support
Is the "this.state must be initialized in constructor, not in class body" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading