React JSX file giving error "Unable to read property" createElement "from undefined"

Question

I have a test_stuff.js file that I run with npm test

It looks something 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)); }); }); }); 

Sorry, I am getting an 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 it mean? I import React from "react" successfully, so why will React be undefined? This is _react.React, whatever that means ...

Answer 1

To import React do import React from 'react' you add brackets when the thing you import is not the default export in this module or file. In case of a reaction, this is the default export.

This may apply to your other import, depending on how you defined them.

Answer 2

 import React, { Component } from 'react' 

It worked for me. I am not sure why this fixed my version of this problem, though. So if you encounter this problem and use create-Reaction-app as the starting template, this React import method will help. (as of October 18, laughs)

Answer 3

For those who work with ReactJS TypeScript.

 import * as React from 'react';