Reagieren Sie auf die JSX-Datei mit dem Fehler „Kann die Eigenschaft ‚createElement‘ von undefiniert nicht lesen“

Lesezeit: 4 Minuten

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

Es sieht ungefähr 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 erfolgreich aus „react“, also warum sollte React undefiniert sein? Es ist _react.React, was auch immer das bedeutet…

Benutzer-Avatar
Kafo

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

Dies gilt möglicherweise für Ihre anderen Importe, je nachdem, wie Sie sie definiert haben.

  • Ich bin mir noch nicht sicher warum, aber für mich war es so import * as React from "react"

    – Clintm

    30. August 2017 um 22:49 Uhr

  • Technisch gesehen, import React from 'react' ist nicht gültig, da React nicht der Standardexport ist, aber es funktioniert aufgrund der Verwendung von ES6 in Verbindung mit babel. Vielleicht ist Ihre babel-Konfiguration anders und zwingt Sie, die richtige gültige Syntax zu verwenden, die ist import * as React from 'react'. Für mehr Information: github.com/DefinitelyTyped/DefinitelyTyped/issues/5128

    – Kafo

    31. August 2017 um 15:40 Uhr


  • Eine weitere wichtige Sache, die ich vergessen habe zu erwähnen, ist, dass JSX React benötigt, um zu funktionieren. Abgesehen von Component und möglicherweise anderen benannten Exporten benötigen Sie React jedoch nicht wirklich. Vielleicht wirst du React in Zukunft nicht mehr importieren.

    – Kafo

    31. August 2017 um 15:42 Uhr

  • Ich verwende React-Native mit Expo und mein Babel-Preset ist babel-preset-expo github.com/expo/babel-preset-expo/blob/master/index.js

    – Clintm

    31. August 2017 um 21:17 Uhr

  • Bei der Verwendung von Typoskript wird der Importstil auch durch die Einstellung von beeinflusst esModuleInterop in der tsconfig. Die tsconfig muss für die Testdateien gelten (check include und files).

    – Mathias

    18. April 2019 um 16:41 Uhr

import React, { Component } from 'react'

Das hat bei mir funktioniert. Ich bin mir nicht sicher, warum es meine Version dieses Problems behoben hat. Wenn Sie also auf dieses Problem gestoßen sind und create-react-app als Startbaustein verwenden, reicht diese Art des Imports von React aus. (Stand Oktober ’18, lol)

  • Dies war das Problem, das ich hatte, als ich versuchte, Memo, useEffect, useState zu importieren und zu reagieren. Ursprünglich sah ich den Fehler „Kann die Eigenschaft ‚Memo‘ von undefiniert nicht lesen“, aber das hat ihn behoben

    – SeanMC

    6. Januar 2019 um 3:14 Uhr

  • Dies hat es auch für mich behoben (obwohl ich anstelle von Component useState importiere). Bin jetzt sehr gespannt auf den Unterschied zu meinem Original, defekt import { React, useState } from 'react';

    – José Faber

    26. Juni 2019 um 7:58 Uhr


  • @JosFabre es war fehlerhaft, weil 'react' exportiert nicht React als Nichtvorgabe per se. Wie auch immer, es export useState, export Componentetc.

    – c4k

    19. März 2020 um 12:25 Uhr

Benutzer-Avatar
Khuong

Für diejenigen, die ReactJS mit TypeScript arbeiten.

import * as React from 'react';

  • Das war mein Problem. Vielen Dank!

    – Cogwizzle

    17. Mai 2019 um 16:32 Uhr

  • Warum ist das notwendig? Ich erhalte diesen Fehler in meiner gesamten Codebasis, wenn ich jest ausführe.

    – Nate Glenn

    22. Juni 2019 um 8:28 Uhr

  • Es gibt eine Möglichkeit, den Import „wieder schön“ zu machen. Fügen Sie „esModuleInterop: true“ zu Ihrer tsconfig.json hinzu. Und viel Spaß beim “Import React from ‘react'”! – Shulyk Wolodymyr

    – Shulyk Wolodymyr

    13. November 2019 um 14:12 Uhr


Benutzer-Avatar
Vimal Kurien Sam

Dieser Fehler ist mir aus Unachtsamkeit passiert. Es ist eigentlich

import React from 'react';

Klammern sind für benannte Exporte wie diese:

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

Benutzer-Avatar
Bob

Der Versuch, den Destruktor zum Importieren des React-Objekts zu verwenden, kann solche Probleme verursachen import {React} from 'react';. Dies könnte in 90 % der Fälle die Ursache für den Fehler sein, wenn dieser Code oben ausgeführt wird.

lieber verwenden:
import React from 'react';

Und dann können Sie auf jedes Mitglied der React-Klasse zugreifen über:
Reagieren.

Benutzer-Avatar
Anita Jayana

Dieses Problem trat beim Importieren von React aus React auf, ich habe es in geschweifte Klammern gesetzt.

Bitte mach das:

import React, {useState} from "react";

Anstatt von:

import {React, useState} from "react";

Benutzer-Avatar
Saran MS

Veränderung:
Importiere {Reagieren} aus ‘Reagieren’ zu Reagieren von ‘reagieren’ importieren
Weil React ein Standardexport ist und Sie keine geschweiften Klammern für Standardexporte benötigen.

1257150cookie-checkReagieren Sie auf die JSX-Datei mit dem Fehler „Kann die Eigenschaft ‚createElement‘ von undefiniert nicht lesen“

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy