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

Kafo · Accepted Answer · 2016-09-10 12:27:07Z

292

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.

edited Sep 10, 2016 at 12:27

answered Sep 10, 2016 at 6:01

Kafo

3,6561 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Clintm Over a year ago

I'm not sure why just yet but for me it was import * as React from "react"

Kafo Over a year ago

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 Over a year ago

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.

Clintm Over a year ago

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

Matthias Over a year ago

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

|

TJ Allen · Accepted Answer · 2018-10-22 19:05:31Z

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)

answered Oct 22, 2018 at 19:05

TJ Allen

5714 silver badges6 bronze badges

3 Comments

SeanMC Over a year ago

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

Jos Over a year ago

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

c4k Over a year ago

@JosFabre it was faulty because 'react' does not export React as non default per sé. However it export useState, export Component, etc.

Twitter khuong291 · Accepted Answer · 2019-05-20 04:47:02Z

40

For those who are working ReactJS with TypeScript.

import * as React from 'react';

edited May 20, 2019 at 4:47

answered May 7, 2019 at 4:14

Twitter khuong291

11.7k16 gold badges82 silver badges118 bronze badges

3 Comments

Nate Glenn Over a year ago

Why is this necessary? I get this error all over my codebase when running jest.

Shulyk Volodymyr Over a year ago

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

dogdog Over a year ago

it helps a lot , yes

Liam · Accepted Answer · 2020-05-27 12:37:23Z

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

edited May 27, 2020 at 12:37

Liam

30k28 gold badges143 silver badges206 bronze badges

answered May 27, 2020 at 9:21

Vimal Kurien Sam

2661 gold badge5 silver badges11 bronze badges

Comments

Anita Jayana · Accepted Answer · 2022-03-30 23:51:07Z

10

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

answered Mar 30, 2022 at 23:51

Anita Jayana

8717 silver badges4 bronze badges

Comments

Neil · Accepted Answer · 2022-06-30 13:35:09Z

3

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

answered Jun 30, 2022 at 13:35

Neil

2,7597 gold badges36 silver badges60 bronze badges

Comments

pradeepradyumna · Accepted Answer · 2021-07-07 12:27:49Z

2

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.

edited Jul 7, 2021 at 12:27

pradeepradyumna

1,09017 silver badges37 bronze badges

answered Jul 7, 2021 at 6:49

Bob

211 bronze badge

Comments

Aggestor · Accepted Answer · 2020-08-24 05:34:04Z

1

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

answered Aug 24, 2020 at 5:34

Aggestor

1301 silver badge6 bronze badges

Comments

Saran M S · Accepted Answer · 2020-03-31 12:42:34Z

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.

answered Mar 31, 2020 at 12:42

Saran M S

11 bronze badge

Comments

Sasi Kumar M · Accepted Answer · 2020-04-10 12:03:17Z

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

answered Apr 10, 2020 at 12:03

Sasi Kumar M

2,6501 gold badge26 silver badges26 bronze badges

Comments

nikitabarnawal · Accepted Answer · 2022-02-08 13:49:55Z

0

This error can be occured due to carelessness. Please add

import React from 'react'

It will be resolved after that

answered Feb 8, 2022 at 13:49

nikitabarnawal

522 bronze badges

Collectives™ on Stack Overflow

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

11 Answers 11

10 Comments

3 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

10 Comments

3 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related