React JSX file giving error "Cannot read property 'createElement' of undefined"

Question

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...

Answer 1

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.

Answer 2

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)

Answer 3

对于那些使用 TypeScript 使用 ReactJS 的人。

import * as React from 'react';

Answer 4

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';

Answer 5

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.

Answer 6

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";

Answer 7

更改： import { React } from 'react'到import React from 'react'因为 React 是默认导出，您不需要花括号进行任何默认导出。

Answer 8

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';

Answer 9

React默认在该模块中导出，不需要 {}。

Answer 10

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>
});

Answer 11

This error can be occured due to carelessness. Please add

import React from 'react'

It will be resolved after that