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

99

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 ...

Irgendein Typ
quelle

Antworten:

191

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.

Kafo
quelle
16
Ich bin mir noch nicht sicher warum, aber für mich war esimport * as React from "react"
Clintm
8
Technisch gesehen import React from 'react'ist dies nicht gültig, da React nicht der Standardexport ist, aber aufgrund der Verwendung von ES6 in Verbindung mit babel funktioniert. Möglicherweise unterscheidet sich Ihre Babel-Konfiguration, sodass Sie die richtige gültige Syntax verwenden müssen import * as React from 'react'. Für weitere Informationen: github.com/DefinitelyTyped/DefinitelyTyped/issues/5128
Kafo
Eine weitere wichtige Sache, die ich vergessen habe zu erwähnen, ist, dass JSX erfordert, dass React im Umfang funktioniert. Neben Component und möglicherweise anderen benannten Exporten benötigen Sie jedoch nicht wirklich React. Vielleicht werden Sie React in Zukunft nicht mehr importieren.
Kafo
1
Ich benutze babel-preset-expo
React
2
Bei Verwendung von Typoskript wird der Importstil auch durch die Einstellung esModuleInteropin der tsconfig beeinflusst. Die tsconfig muss für die Testdateien gelten (check includeand files).
Matthias
32
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)

TJ Allen
quelle
Dies war das Problem, das ich hatte, als ich versuchte, Memo, useEffect, useState zu importieren und zusätzlich zu reagieren. Ursprünglich sah Fehler "Eigenschaft 'Memo' von undefined kann nicht gelesen werden", aber dies
behebt
Dies hat es auch für mich behoben (obwohl ich anstelle von Component useState importiere). Ich bin jetzt sehr neugierig auf den Unterschied zu meinem Original, fehlerhaft import { React, useState } from 'react';
JosFabre
1
@ JosFabre es war fehlerhaft, weil 'react'nicht Reactals nicht standardmäßig per sé exportiert wird . Wie auch immer export useState, export Componentusw.
c4k
17

Für diejenigen, die ReactJS mit TypeScript arbeiten.

import * as React from 'react';
Khuong
quelle
3
Das war mein Problem. Vielen Dank!
Joseph Fehrman
2
Warum ist das notwendig? Ich erhalte diesen Fehler in meiner gesamten Codebasis, wenn ich einen Scherz mache.
Nate Glenn
Es gibt eine Möglichkeit, den Import "wieder schön" zu machen. Fügen Sie Ihrer tsconfig.json "esModuleInterop: true" hinzu. Und genießen Sie Ihren "Import React from 'react'"! - Shulyk Volodymyr
Shulyk Volodymyr
0

Ä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.

Saran MS
quelle
0

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';
Sasi Kumar M.
quelle
0

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';
Vimal Kurien Sam
quelle
Wenn Sie eine neue Frage haben, fragen Sie es bitte durch Klicken Frage stellen Taste. Fügen Sie einen Link zu dieser Frage hinzu, wenn dies zur Bereitstellung des Kontexts beiträgt. - Aus dem Review
MartenCatcher