Next.js should not automatically expose the `React` global

Bug report

Describe the bug

When you use JSX in your app, we automatically expose the React global. This allows things like React.useState to work even though it’s not imported.

To Reproduce

Use React.useState in your app without an import, and see it work.

Expected behavior

It should not work, and instead, require React be imported.

[timneutkens]

would adding the ‘babel-plugin-react-require’ plugin solve this issue?

It would not

Would this mean that pages now should import React as well? What is the rational behind this? I am just curious.

Only when React is used it should be imported. Using JSX is fine without importing:

export default function Page() { return <h1>Hello</h1> }

When doing a useState however it’s non-standard that this currently works:

export default function Page() {
  // This should not be possible as it needs React to function
  const [state, setState] = React.useState(false) 
  return <button onClick={() => setState(true)}>{state ? 'State set' : 'set the state'}</button>
}

It should be written as:

import React from 'react'

export default function Page() {
  const [state, setState] = React.useState(false) 
  return <button onClick={() => setState(true)}>{state ? 'State set' : 'set the state'}</button>
}

[Timer]

Considering this fixed when you upgrade to React 17.