Reagieren Sie auf die JSX-Datei mit dem Fehler "Eigenschaft 'createElement' von undefined kann nicht gelesen werden"

Ich habe eine Datei test_stuff.js, mit der ich laufe npm test

Es sieht so ziemlich so aus:

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

Leider bekomme ich den Fehler

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

Was bedeutet das? Ich importiere React aus 'Reagieren' erfolgreich. Warum sollte React also undefiniert sein? Es ist _react.React, was auch immer das bedeutet ...

So importieren Sie React do import React from 'react'Sie fügen Klammern hinzu, wenn das zu importierende Objekt nicht der Standardexport in diesem Modul oder dieser Datei ist. Im Falle einer Reaktion ist dies der Standardexport.

Dies kann für Ihre anderen Importe gelten, je nachdem, wie Sie sie definiert haben.

import React, { Component } from 'react'

Das hat bei mir funktioniert. Ich bin mir jedoch nicht sicher, warum meine Version dieses Problems behoben wurde. Wenn Sie also jemand sind, der auf dieses Problem gestoßen ist und die Create-React-App als Start-Boilerplate verwenden, reicht diese Art des Importierens von React aus. (Stand 18. Oktober, lol)

Für diejenigen, die ReactJS mit TypeScript arbeiten.

import * as React from 'react';

Ändern: import {Reagieren} von ‚reagieren‘ zu importieren Reagieren von ‚reagieren‘ Da ein Standardexport React ist und Sie brauchen keine geschweiften Klammern für alle Standard - Exporte.

Wenn Sie mehrere Klassen aus "Reagieren" importieren müssen, können Sie einen Alias ​​für diese außer Reagieren festlegen. Etwas wie,

import React, * as react from 'react';

Dieser Fehler trat mir aufgrund von Nachlässigkeit auf. Es ist eigentlich

import React from 'react';

Klammern stehen für benannte Exporte wie diese:

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