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


101

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

Risposte:


195

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.


17
Non sono sicuro del perché, ma per me eraimport * as React from "react"
Clintm

8
Tecnicamente parlando, import React from 'react'non è valido poiché React non è l'esportazione predefinita ma funziona grazie all'uso di ES6 insieme a babel. Forse la tua configurazione di babel è diversa e ti costringe a usare la sintassi valida corretta che è import * as React from 'react'. Per maggiori informazioni: github.com/DefinitelyTyped/DefinitelyTyped/issues/5128
Kafo

Un'altra cosa importante che ho dimenticato di menzionare è che JSX richiede che React sia nell'ambito per funzionare. Tuttavia, non hai davvero bisogno di React oltre a Component e forse altre esportazioni con nome. Forse in futuro non importerai React.
Kafo

1
Sto usando react-native con expo e il mio preset babel è babel-preset-expo github.com/expo/babel-preset-expo/blob/master/index.js
Clintm

2
Se si utilizza il dattiloscritto, lo stile di importazione sarà influenzato anche dall'impostazione di esModuleInteropnel file tsconfig. Il tsconfig deve essere applicato ai file di test (controllare includee files).
Matthias

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


Questo era il problema che stavo riscontrando, durante il tentativo di importare memo, useEffect, useState, oltre a reagire. Originariamente veniva visualizzato l'errore "Impossibile leggere la proprietà 'memo' di undefined", ma questo lo ha risolto
SeanMC

Questo ha risolto il problema anche per me (anche se invece di Component ho importato useState). Ora sono molto curioso della differenza con il mio originale, difettoso import { React, useState } from 'react';
JosFabre

1
@JosFabre era difettoso perché 'react'non esporta Reactcome non predefinito di per sé. Comunque export useState, export Componentecc
C4K

17

Per coloro che stanno lavorando ReactJS con TypeScript.

import * as React from 'react';

3
Questo era il mio problema. Grazie!
Joseph Fehrman

2
Perché è necessario? Ottengo questo errore in tutta la mia base di codice durante l'esecuzione di jest.
Nate Glenn,

C'è un modo per rendere l'importazione "di nuovo bella". Aggiungi "esModuleInterop: true" al tuo tsconfig.json. E goditi il ​​tuo "import React from 'react'"! - Shulyk Volodymyr
Shulyk Volodymyr

0

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.


0

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';

0

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';

Se hai una nuova domanda, chiedila facendo clic sul pulsante Fai domanda . Includere un collegamento a questa domanda se aiuta a fornire il contesto. - Dalla recensione
MartenCatcher

0

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.