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

101

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

javascript reactjs npm react-jsx Algum cara
fonte

Respostas:

195

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.

Kafo
fonte
17
Não sei por que ainda, mas para mim eraimport * as React from "react"
Clintm
8
Tecnicamente falando, import React from 'react'não é válido porque React não é a exportação padrão, mas funciona devido ao uso do ES6 em conjunto com o babel. Talvez sua configuração do babel seja diferente, forçando você a usar a sintaxe válida correta, que é import * as React from 'react'. Para mais informações: github.com/DefinitelyTyped/DefinitelyTyped/issues/5128
Kafo
Outra coisa importante que esqueci de mencionar é que o JSX exige que o React esteja no escopo para funcionar. No entanto, você realmente não precisa do React além do Component e talvez de outras exportações nomeadas. Talvez no futuro você não importe o React.
Kafo
1
Estou usando o babel-preset-expo react
Clintm
2
Se estiver usando esModuleInteropo texto digitado , o estilo de importação também será afetado pela configuração de no tsconfig. O tsconfig deve ser aplicado aos arquivos de teste (marque includee files).
Matthias de
32 
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)

TJ Allen
fonte
Esse era o problema que eu estava tendo, ao tentar importar memo, useEffect, useState, além de reagir. Originalmente vi o erro "Não é possível ler a propriedade 'memo' de undefined", mas isso corrigiu
SeanMC
Isso também corrigiu para mim (embora em vez de Component eu importe useState). Agora estou muito curioso sobre a diferença com o meu original, com defeito import { React, useState } from 'react';
JosFabre
1
@JosFabre estava com defeito porque 'react'não exporta Reactcomo padrão por sé. No entanto export useState, export Componentetc.
c4k
17

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

import * as React from 'react';
Khuong
fonte
3
Esse era o meu problema. Obrigado!
Joseph Fehrman
2
Por que isso é necessário? Eu recebo esse erro em toda a minha base de código ao executar jest.
Nate Glenn de
Existe uma maneira de tornar a importação "bonita de novo". Adicione "esModuleInterop: true" ao seu tsconfig.json. E aproveite seu "import React from 'react'"! - Shulyk Volodymyr
Shulyk Volodymyr
0

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.

Saran MS
fonte
0

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';
Sasi Kumar M
fonte
0

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';
Vimal Kurien Sam
fonte
Se você tiver uma nova pergunta, faça-a clicando no botão Fazer pergunta . Inclua um link para esta pergunta se ajudar a fornecer contexto. - Da avaliação
MartenCatcher
0

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

Aggestor Mhl
fonte