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-10T12:27:07.820

284

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 '16 at 12:27

answered Sep 10 '16 at 06:01

Kafo

3,568
1
12
19

27

I'm not sure why just yet but for me it was `import * as React from "react"` – Clintm Aug 30 '17 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: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/5128 – Kafo Aug 31 '17 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 '17 at 15:42
2

I'm using react-native with expo and my babel preset is `babel-preset-expo` https://github.com/expo/babel-preset-expo/blob/master/index.js – Clintm Aug 31 '17 at 21:17
@Clintm as a test you could add `babel-preset-es2015` to your presets and change import statement to `import React from 'react'`. You can find it here: https://www.npmjs.com/package/babel-preset-es2015 – Kafo Aug 31 '17 at 21:34
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 '19 at 16:41
very so nice answer – Byeongin Yoon Jun 07 '19 at 07:38
@FranjoPintarić it was because I was using TypeScript – Clintm Jul 17 '19 at 16:29
@Clintm you can also have a look at a similar question here if that helps https://stackoverflow.com/questions/59325877/if-react-is-the-default-export-from-react-why-cant-we-use-some-other-name – Tinu Jos K Aug 04 '20 at 13:23
Running into the same issue, and having `import * as React from "react"` solving it, but not wanting to change the entire code base, adding `"esModuleInterop": true` to `tsconfig.json` solved the issue as per comment here from @Matthias. More details on that option on question [56238356](https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file) – Yves Dorfsman Nov 27 '20 at 22:32
This fixed my issue. Thanks – Anita Jayana Mar 30 '22 at 23:44

score 55 · Answer 2 · answered Oct 22 '18 at 19:05

55

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 '18 at 19:05

TJ Allen

551
4
6

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 06 '19 at 03: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 '19 at 07: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 '20 at 12:25

Twitter khuong291 · Answer 3 · 2019-05-20T04:47:02.963

37

For those who are working ReactJS with TypeScript.

import * as React from 'react';

edited May 20 '19 at 04:47

answered May 07 '19 at 04:14

Twitter khuong291

11,328
15
80
116

4

This was my problem. Thanks! – Cogwizzle May 17 '19 at 16:32
4

Why is this necessary? I get this error all over my codebase when running jest. – Nate Glenn Jun 22 '19 at 08: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 – Shulyk Volodymyr Nov 13 '19 at 14:12
it helps a lot , yes – dogdog Feb 06 '23 at 12:52

score 12 · Answer 4 · edited May 27 '20 at 12:37

12

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 '20 at 12:37

Liam

27,717
28
128
190

answered May 27 '20 at 09:21

Vimal Kurien Sam

246
4
10

score 7 · Answer 5 · answered Mar 30 '22 at 23:51

7

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 '22 at 23:51

Anita Jayana

771
6
3

score 2 · Answer 6 · answered Jun 30 '22 at 13:35

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

score 1 · Answer 7 · edited Jul 07 '21 at 12:27

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.

edited Jul 07 '21 at 12:27

pradeepradyumna

952
13
34

answered Jul 07 '21 at 06:49

Bob

11
1

score 0 · Answer 8 · answered Mar 31 '20 at 12:42

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 '20 at 12:42

Saran M S

1
1

score 0 · Answer 9 · answered Apr 10 '20 at 12:03

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 '20 at 12:03

Sasi Kumar M

2,440
1
23
23

score 0 · Answer 10 · answered Aug 24 '20 at 05:34

0

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

answered Aug 24 '20 at 05:34

Aggestor

110
1
6

score -1 · Answer 11 · answered Feb 08 '22 at 13:49

-1

This error can be occured due to carelessness. Please add

import React from 'react'

It will be resolved after that

answered Feb 08 '22 at 13:49

nikitabarnawal

42
2

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

11 Answers11