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

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

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.

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)

Pour ceux qui travaillent ReactJS avec TypeScript.

import * as React from 'react';

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.

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

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

React est exporté par défaut dans ce module, pas besoin {}.