File JSX React memberikan kesalahan "Tidak dapat membaca properti 'createElement' tidak terdefinisi"

Saya memiliki file test_stuff.js yang saya jalankan npm test

Ini terlihat seperti ini:

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

Sayangnya, saya mendapatkan error tersebut

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

Apa artinya? Saya berhasil mengimpor React dari 'react', jadi mengapa React tidak ditentukan? Ini adalah _react.React, apapun artinya ...

Untuk mengimpor React, import React from 'react'Anda menambahkan tanda kurung ketika hal yang Anda impor bukan ekspor default dalam modul atau file itu. Jika bereaksi, ini adalah ekspor default.

Ini mungkin berlaku untuk impor Anda yang lain, bergantung pada cara Anda menentukannya.

import React, { Component } from 'react'

Ini berhasil untuk saya. Saya tidak yakin mengapa itu memperbaiki versi saya dari masalah ini. Jadi jika Anda adalah seseorang yang menemukan masalah ini dan Anda menggunakan create-react-app sebagai boilerplate awal Anda, cara mengimpor React ini akan berhasil. (mulai Oktober 18, lol)

Bagi mereka yang bekerja ReactJS dengan TypeScript.

import * as React from 'react';

Kesalahan ini terjadi pada saya karena kecerobohan. Itu sebenarnya

import React from 'react';

Tanda kurung untuk ekspor bernama seperti ini:

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

Ubah: impor {React} dari 'react' ke import React dari 'react' Karena React adalah ekspor default dan Anda tidak memerlukan tanda kurung kurawal untuk ekspor default.

Jika seandainya Anda perlu mengimpor beberapa kelas dari 'react', Anda dapat memiliki alias untuk mereka kecuali React. Sesuatu seperti,

import React, * as react from 'react';

React diekspor secara default dalam modul itu, tidak perlu {}.