145

I have a file test_stuff.js that I am running with npm test

It pretty much looks like this:

import { assert } from 'assert';
import { MyProvider } from '../src/index';
import { React } from 'react';

const myProvider = (
  <MyProvider>
  </MyProvider>
);

describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal(-1, [1,2,3].indexOf(4));
    });
  });
});

Unfortunately, I get the error

/Users/me/projects/myproj/test/test_stuff.js:11
var myProvider = _react.React.createElement(_index.MyProvider, null);
                             ^

TypeError: Cannot read property 'createElement' of undefined
    at Object.<anonymous> (/Users/me/projects/myproj/test/test_stuff.js:7:7)

What does that mean? I am importing React from 'react' successfully, so why would React be undefined? It is _react.React, whatever that means...

11 Answers 11

286

To import React do import React from 'react' You add brackets when the thing you are importing is not the default export in that module or file. In case of react, it's the default export.

This might apply to your other imports depending on how you defined them.

10
  • 28
    I'm not sure why just yet but for me it was import * as React from "react"
    – Clintm
    Aug 30, 2017 at 22:49
  • 9
    Technically speaking, import React from 'react' is not valid since React is not the default export but it works due to using ES6 in conjunction with babel. Maybe your babel configuration are different forcing you to use the correct valid syntax which is import * as React from 'react'. For more info: github.com/DefinitelyTyped/DefinitelyTyped/issues/5128
    – Kafo
    Aug 31, 2017 at 15:40
  • 1
    Another important thing I forgot to mention is that JSX require React to be in scope to work. However, you don't really need React besides Component and maybe other named exports. Maybe in the future you won't be importing React.
    – Kafo
    Aug 31, 2017 at 15:42
  • 2
    I'm using react-native with expo and my babel preset is babel-preset-expo github.com/expo/babel-preset-expo/blob/master/index.js
    – Clintm
    Aug 31, 2017 at 21:17
  • 3
    If using typescript, the import style will also be affected by the setting of esModuleInterop in the tsconfig. The tsconfig must apply to the test files (check include and files).
    – Matthias
    Apr 18, 2019 at 16:41
57
import React, { Component } from 'react'

This worked for me. I'm not sure why it fixed my version of this issue, though. So if you are someone who stumbled upon this problem and you use create-react-app as your starting boilerplate, this way of importing React will do the trick. (as of Oct '18, lol)

3
  • This was the issue I was having, when trying to import memo, useEffect, useState, in addition to react. Originally saw error "Cannot read property 'memo' of undefined", but this fixed it
    – SeanMC
    Jan 6, 2019 at 3:14
  • This fixed it for me too (although instead of Component I import useState). I'm now very curious on the difference with my original, faulty import { React, useState } from 'react';
    – Jos
    Jun 26, 2019 at 7:58
  • 1
    @JosFabre it was faulty because 'react' does not export React as non default per sé. However it export useState, export Component, etc.
    – c4k
    Mar 19, 2020 at 12:25
38

For those who are working ReactJS with TypeScript.

import * as React from 'react';
4
  • 4
    This was my problem. Thanks!
    – Cogwizzle
    May 17, 2019 at 16:32
  • 4
    Why is this necessary? I get this error all over my codebase when running jest.
    – Nate Glenn
    Jun 22, 2019 at 8:28
  • 4
    There is a way to make import "beautiful again". Add "esModuleInterop: true" to your tsconfig.json. And enjoy your "import React from 'react'"! – Shulyk Volodymyr Nov 13, 2019 at 14:12
  • it helps a lot , yes
    – dogdog
    Feb 6 at 12:52
13

This error occured to me due to carelessness. It's actually

import React from 'react';

Brackets are for named exports such as this:

import React, { useState, useEffect } from 'react';
0
8

This issue occurred while importing React from react, I placed it inside curly brackets.

Please do this:

import React, {useState} from "react";

Instead of:

import {React, useState} from "react";

2

I got this when trying to mock a component when unit testing but was not setting it up correctly

What I was doing that caused the error:

jest.mock("./SomeComponent", () => {
    return <div>MockSomeComponent</div>
});

What I needed to do:

jest.mock("./SomeComponent", () => {
    return () => <div>MockSomeComponent</div>
});
1

Trying to use destructor for importing the React object may cause you problems like this import {React} from 'react';. This might be the cause of the error 90% of the time running this code above.

rather use: import React from 'react';

And then you can access any member of the React class via: React.

0

Change: import { React } from 'react' to import React from 'react' Because React is a default export and you don’t need curly braces for any default exports.

0

If in case you need to import multiple classes from 'react', you can have an alias for them except React. Something like,

import React, * as react from 'react';
0

React is exported by default in that module, no need {}.

-1

This error can be occured due to carelessness. Please add

import React from 'react'

It will be resolved after that

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.