Reaguj na plik JSX podając błąd „Nie można odczytać właściwości„ createElement ”o wartości undefined”

Mam plik test_stuff.js, z którym pracuję npm test

Wygląda to mniej więcej tak:

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

Niestety pojawia się błąd

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

Co to znaczy? Importuję Reacta z polecenia „reaguj”, więc dlaczego React miałby być niezdefiniowany? To jest _react. React, cokolwiek to znaczy ...

Aby zaimportować Reacta, należy import React from 'react'dodać nawiasy, gdy importowany element nie jest domyślnym eksportem w tym module lub pliku. W przypadku reakcji jest to domyślny eksport.

Może to dotyczyć innych importów, w zależności od tego, jak je zdefiniowałeś.

import React, { Component } from 'react'

To zadziałało dla mnie. Nie jestem jednak pewien, dlaczego naprawiło to moją wersję tego problemu. Więc jeśli jesteś kimś, kto natknął się na ten problem i używasz aplikacji create-react-jako swojego początkowego schematu, ten sposób importowania React załatwi sprawę. (od października '18, lol)

Dla tych, którzy pracują w ReactJS z TypeScript.

import * as React from 'react';

Zmiana: importuj {React} z „reaguj”, aby importować Reaguj z „reaguj” Ponieważ React jest domyślnym eksportem i nie potrzebujesz nawiasów klamrowych do żadnego domyślnego eksportu.

Jeśli chcesz zaimportować wiele klas z 'React', możesz mieć dla nich alias z wyjątkiem React. Coś jak,

import React, * as react from 'react';

Ten błąd wystąpił mi z powodu nieostrożności. Właściwie to

import React from 'react';

Nawiasy dotyczą nazwanych eksportów, takich jak ten:

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

React jest eksportowany domyślnie w tym module, nie ma potrzeby {}.