"React is not defined" when using import {Component} from 'react'

[alexgreenland]

Description

When using import {Component} from 'react' and the component class using extends Component an error "React is not defined" is returned. I have to use import React from 'react' and the component class using extends React.Component. It must depend on the whole module rather than the destructuring?

Steps to reproduce

1. import {Component} from 'react'
2. class X extends Component

Expected result

No error should be returned and the code should compile.

Actual result

"React is not defined"

[DSchau]

Hi @alexandernanberg!

That's expected. When you write JSX, e.g. consider the following:

function Hello() {
  return <h1>Hello World</h1>
}

it's transpiled to React.createElement calls like so:

function Hello() {
  return React.createElement('h1', null, 'Hello World')
}

which requires React to be in scope (and it currently is not)

What you want to do here is actually combine the two approaches, like so:

import React, { Component } from 'react'

export class SomeClass extends Component {
  render() {
    return <h1>Hello World</h1>
  }
}

Closing this out! Thanks so much for using Gatsby--and feel free to re-open if we can help further!

[alexgreenland]

Ah yes, of course. Normally the boilerplate is there but I typed this one out, thinking that if I'm not using it, why do I need it. This is not a Gatsby thing, but I don't care about the transpilation, I'm writing at this level of abstraction, so would be nice not to include it, but yeah that's Reactland stuff.

Thanks