Fichier React JSX donnant l'erreur "Impossible de lire la propriété 'createElement' sur undefined"


101

J'ai un fichier test_stuff.js avec lequel je cours npm test

Cela ressemble à peu près à ceci:

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

Malheureusement, j'obtiens l'erreur

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

Qu'est-ce que ça veut dire? J'importe avec succès React depuis 'react', alors pourquoi React ne serait-il pas défini? C'est _react.React, quoi que cela signifie ...

Réponses:


195

Pour importer React, import React from 'react'ajoutez des crochets lorsque l'élément que vous importez n'est pas l'exportation par défaut dans ce module ou fichier. En cas de réaction, c'est l'export par défaut.

Cela peut s'appliquer à vos autres importations en fonction de la façon dont vous les avez définies.


17
Je ne sais pas encore pourquoi mais pour moi c'étaitimport * as React from "react"
Clintm

8
Techniquement parlant, ce import React from 'react'n'est pas valide car React n'est pas l'exportation par défaut, mais cela fonctionne grâce à l'utilisation d'ES6 en conjonction avec babel. Peut-être que votre configuration babel est différente, ce qui vous oblige à utiliser la syntaxe correcte correcte qui est import * as React from 'react'. Pour plus d'informations: github.com/DefinitelyTyped/DefinitelyTyped/issues/5128
Kafo

Une autre chose importante que j'ai oublié de mentionner est que JSX nécessite que React soit dans la portée pour fonctionner. Cependant, vous n'avez pas vraiment besoin de React en plus de Component et peut-être d'autres exportations nommées. Peut-être qu'à l'avenir vous n'importerez pas React.
Kafo

1
J'utilise babel-preset-expo react
Clintm

2
Si vous utilisez dactylographié, le style d'importation sera également affecté par le paramétrage de esModuleInteropdans tsconfig. Le tsconfig doit s'appliquer aux fichiers de test (check includeet files).
Matthias

32
import React, { Component } from 'react'

Cela a fonctionné pour moi. Je ne sais pas pourquoi cela a résolu ma version de ce problème. Donc, si vous êtes quelqu'un qui est tombé sur ce problème et que vous utilisez create-react-app comme base standard de départ, cette façon d'importer React fera l'affaire. (à partir d'octobre 18, lol)


C'était le problème que j'avais, en essayant d'importer un mémo, useEffect, useState, en plus de réagir. A l'origine vu l'erreur "Impossible de lire la propriété 'memo' d'undefined", mais cela l'a corrigé
SeanMC

Cela l'a corrigé pour moi aussi (bien qu'au lieu de Component, j'importe useState). Je suis maintenant très curieux de connaître la différence avec mon original, défectueux import { React, useState } from 'react';
JosFabre

1
@JosFabre c'était défectueux car 'react'il n'exporte Reactpas par défaut par sé. Cependant, il export useState, export Componentetc.
c4k

17

Pour ceux qui travaillent ReactJS avec TypeScript.

import * as React from 'react';

3
C'était mon problème. Merci!
Joseph Fehrman

2
Pourquoi est-ce nécessaire? J'obtiens cette erreur partout dans ma base de code lorsque j'exécute jest.
Nate Glenn

Il existe un moyen de rendre l'importation "belle à nouveau". Ajoutez «esModuleInterop: true» à votre tsconfig.json. Et profitez de votre "import React de" react ""! - Shulyk Volodymyr
Shulyk Volodymyr

0

Modification: importez {React} depuis 'react' pour importer React depuis 'react' Parce que React est une exportation par défaut et que vous n'avez pas besoin d'accolades pour les exportations par défaut.


0

Si vous avez besoin d'importer plusieurs classes depuis 'react', vous pouvez avoir un alias pour elles sauf React. Quelque chose comme,

import React, * as react from 'react';

0

Cette erreur m'est venue à cause de la négligence. C'est en fait

import React from 'react';

Les crochets sont destinés aux exportations nommées telles que celle-ci:

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

Si vous avez une nouvelle question, posez-la en cliquant sur le bouton Poser une question . Incluez un lien vers cette question si cela permet de fournir un contexte. - De l'avis
MartenCatcher

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.