Reagisce al file JSX che restituisce l'errore "Impossibile leggere la proprietà 'createElement' di undefined"

Ho un file test_stuff.js con cui sto eseguendo npm test

Assomiglia più o meno a questo:

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

Purtroppo ricevo l'errore

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

Cosa significa? Sto importando React da "React" con successo, quindi perché React dovrebbe essere indefinito? È _react.React, qualunque cosa significhi ...

Per importare React devi import React from 'react'aggiungere parentesi quadre quando la cosa che stai importando non è l'esportazione predefinita in quel modulo o file. In caso di reazione, è l'esportazione predefinita.

Questo potrebbe applicarsi alle altre importazioni a seconda di come le hai definite.

import React, { Component } from 'react'

Questo ha funzionato per me. Tuttavia, non sono sicuro del motivo per cui abbia risolto la mia versione di questo problema. Quindi, se sei qualcuno che si è imbattuto in questo problema e usi create-react-app come boilerplate di partenza, questo modo di importare React farà il trucco. (a partire da ottobre '18, lol)

Per coloro che stanno lavorando ReactJS con TypeScript.

import * as React from 'react';

Modifica: importa {React} da 'reagire' per importare React da 'reagire' Perché React è un'esportazione predefinita e non hai bisogno di parentesi graffe per nessuna esportazione predefinita.

Se nel caso in cui devi importare più classi da "react", puoi avere un alias per loro tranne React. Qualcosa di simile a,

import React, * as react from 'react';

Questo errore si è verificato a causa di disattenzione. In realtà è

import React from 'react';

Le parentesi sono per esportazioni denominate come questa:

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

React viene esportato per impostazione predefinita in quel modulo, non è necessario {}.