React is not defined

[yffufu]

The error React is not defined occurs because SWC renames the import React from 'react' to import React1 from 'react'. How can I fix this?

input:

import React from 'react'
class A extend React.Component {
  render(){
    return <div>test</div>
  }
}

expected:

import React from 'react'
class A extend React.Component {
  render(){
    return React.createElement('div','test')
  }
}

got:

import React1 from 'react'
class A extend React1.Component {
  render(){
    return React.createElement('div','test') // error here: React is not defined
  }
}

[kdy1]

Are you using custom binary?

[tdogcodes]

Try importing React as React from 'react'

[tt-a1i]

This happens because of a mismatch between JSX runtime mode and the import. You have two solutions:

Solution 1: Use the new automatic JSX runtime (recommended)

Remove the manual React import and configure SWC to use automatic runtime:

{
  "jsc": {
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    }
  }
}

Your code becomes:

// No need to import React!
class A extends React.Component {
  render() {
    return <div>test</div>
  }
}

SWC will auto-inject import { jsx } from 'react/jsx-runtime'.

Solution 2: Use classic runtime with pragma

If you must use the classic React.createElement style:

{
  "jsc": {
    "transform": {
      "react": {
        "runtime": "classic",
        "pragma": "React.createElement",
        "pragmaFrag": "React.Fragment"
      }
    }
  }
}

And keep your import:

import React from 'react';

Why this happens:

SWC's default JSX transform uses React.createElement but doesn't track that the React identifier comes from your import. When hygiene pass renames React to React1 (to avoid conflicts), the JSX output still references the original React name.

Using runtime: "automatic" is the cleanest fix since React 17+.