DEV Community

You don’t always need to import React

Sung M. Kim on November 26, 2018

r/reactjs has a Weekend Reads, which is a “‘book club’ type thing where we read something every weekend”. Last week’s topic was JSX In Depth, and ...

Read full post

Alex Young • Dec 1 '18

So here's a question I honestly don't know the answer to: why isn't import React from "react"; inserted at the transpilation step from jsx to js? Why do we need to do this manually? For the case where all you're doing in the file is using jsx tags, the import is confusing and should be unnecessary.

Sung M. Kim • Dec 1 '18 • Edited

Thanks Alex, that's a great question I haven't considered.

Inserting the import statement would require a babel plugin (babel-plugin-react-require or babel-plugin-auto-import, etc), which could relieve us from having to manually insert it where JSX is used.

I honestly didn't know "why" babel doesn't import it automatically so dug around a bit.

It's to prevent import name resolution errors according to following closed issues.

The gist is that, importing react automatically can clash with other imports already declared as "React" or when "React" is declared globally in your application (using "script" tag).

Eugene Karataev • Jun 1 '19

Here's a dirty hack to avoid importing React in every file with JSX. Just add React to window before ReactDOM.render.

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';

window.React = React;
ReactDOM.render(<App/>, document.querySelector('#mount'));

Now App.js works without throwing a React is not defined error.

// App.js 
export default function() {
  return <div>I am App!</div>
}

This hack is just to illustrate React dependency management. Don't use it in the production code! 😄

Sung M. Kim • Jun 1 '19

Holy mate... Such a convinient hack... You spoiled me 😂

Tried here and worked

Budy • Apr 6 '21

yeep that should do the trick :D, by putting React to the global window object

Amrit Raj • Jan 29 '21

Really Good Explanation.
Just wanted to add that starting from React 17 they have added support for the new JSX-transform. So if you remove the

import React from 'react'

statement for any functional component that returns even jsx (and not simple JS primitives), it will not throw the old

Uncaught ReferenceError: React is not defined

error.
You can read more about it here: reactjs.org/blog/2020/09/22/introd...

Eric Bishard • Nov 27 '18

Short and sweet! Thanks for the good read.

Sung M. Kim • Nov 27 '18

You're welcome & thanks for the feedback.

Learned a lesson from feedbacks what's lacking 😀

Desmond Naranjo • Nov 26 '18

You haven't explained why this would be valuable. There's a lot of stuff I can do that I shouldn't. This seems like one of those stuffs.

Sung M. Kim • Nov 27 '18

You are right Desmond. I wasn't being so clear why it'd be valuable.

My intention was to share what I just learned - the need to import React when it's not used in your code.

So TL;DR should have been "because JSX is transpiled to React.createElement, which requires React to be in scope".

Jenessa White • Oct 24 '19 • Edited

Thanks!
Wondering, if this can help clear up some 'unused variable warnings' even if I am using { useEffect } i don't need to also import react, right?

Sung M. Kim • Oct 25 '19 • Edited

You're welcome, Jenessa.

Yes. You can.

Just check if the module isn't using JSX or other React.* methods such as "React.useEffect" (due to "unused variable warnings")

Juan F Gonzalez • Nov 27 '18

And so if we now start to use Hooks avoiding the use of ES6 classes can we skip importing React altogether? hehe :D

Sung M. Kim • Nov 27 '18

Hooks methods such as useEffect, useState, etc are from React so one would still import from 'react' 😉.

Juan F Gonzalez • Nov 28 '18

Yeah I figured that right after I hit "Submit" and I was like "meeehh I'm not going to edit that now" ahaha silly me