Arquivo JSX de reação com erro “Não é possível ler a propriedade 'createElement' de undefined”

Eu tenho um arquivo test_stuff.js com o qual estou executando npm test

É mais ou menos assim:

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

Infelizmente, recebo o erro

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

O que isso significa? Estou importando o React do 'react' com sucesso, então por que o React seria indefinido? É _react.React, o que quer que isso signifique ...

Para importar React faça import React from 'react' adicione colchetes quando o que está importando não for a exportação padrão nesse módulo ou arquivo. Em caso de reação, é a exportação padrão.

Isso pode se aplicar a suas outras importações, dependendo de como você as definiu.

import React, { Component } from 'react'

Isso funcionou para mim. Não sei por que isso corrigiu minha versão desse problema, no entanto. Portanto, se você é alguém que se deparou com esse problema e usa create-react-app como seu padrão inicial, esta maneira de importar o React resolverá o problema. (em outubro de 18, lol)

Para aqueles que estão trabalhando com ReactJS com TypeScript.

import * as React from 'react';

Alteração: import {React} de 'react' para importar React de 'react' Porque React é uma exportação padrão e você não precisa de chaves para nenhuma exportação padrão.

Se no caso de você precisar importar várias classes de 'react', você pode ter um alias para elas, exceto React. Algo como,

import React, * as react from 'react';

Este erro ocorreu-me devido ao descuido. É na verdade

import React from 'react';

Os colchetes são para exportações nomeadas, como este:

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

React é exportado por padrão nesse módulo, sem necessidade {}.