Reaccionar archivo JSX dando error "No se puede leer la propiedad 'createElement' de indefinido"

101

Tengo un archivo test_stuff.js con el que estoy ejecutando npm test

Se parece mucho a esto:

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

Desafortunadamente, recibo el error.

/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é significa eso? Estoy importando React de 'react' con éxito, entonces ¿por qué React no estaría definido? Es _react.React, lo que sea que eso signifique ...

javascript reactjs npm react-jsx Algún chico
fuente

Respuestas:

195

Para importar React, import React from 'react'agregue corchetes cuando lo que está importando no es la exportación predeterminada en ese módulo o archivo. En caso de reacción, es la exportación predeterminada.

Esto podría aplicarse a sus otras importaciones dependiendo de cómo las haya definido.

Kafo
fuente
17
No estoy seguro de por qué todavía, pero para mí lo fueimport * as React from "react"
Clintm
8
Técnicamente hablando, import React from 'react'no es válido ya que React no es la exportación predeterminada, pero funciona debido al uso de ES6 junto con babel. Tal vez su configuración de babel sea diferente y lo obligue a usar la sintaxis válida correcta que es import * as React from 'react'. Para más información: github.com/DefinitelyTyped/DefinitelyTyped/issues/5128
Kafo
Otra cosa importante que olvidé mencionar es que JSX requiere que React esté dentro del alcance para funcionar. Sin embargo, realmente no necesita React además de Component y tal vez otras exportaciones con nombre. Tal vez en el futuro no importe React.
Kafo
1
Estoy usando react-native con expo y mi preajuste de babel es babel-preset-expo github.com/expo/babel-preset-expo/blob/master/index.js
Clintm
2
Si usa mecanografiado, el estilo de importación también se verá afectado por la configuración de esModuleInteropen tsconfig. El tsconfig debe aplicarse a los archivos de prueba (marque includey files).
Matthias
32 
import React, { Component } from 'react'

Esto funcionó para mí. Sin embargo, no estoy seguro de por qué solucionó mi versión de este problema. Entonces, si usted es alguien que tropezó con este problema y usa create-react-app como su plantilla inicial, esta forma de importar React funcionará. (a partir de octubre de 2018, lol)

TJ Allen
fuente
Este era el problema que estaba teniendo, al intentar importar memo, useEffect, useState, además de reaccionar. Originalmente vio el error "No se puede leer el 'memo' de propiedad de indefinido", pero esto lo solucionó
SeanMC
Esto también lo solucionó para mí (aunque en lugar de Component importo useState). Ahora tengo mucha curiosidad sobre la diferencia con mi original, defectuoso import { React, useState } from 'react';
JosFabre
1
@JosFabre fue defectuoso porque 'react'no exporta Reactcomo no predeterminado per sé. Sin embargo export useState, export Component, etc.
C4K
17

Para aquellos que están trabajando ReactJS con TypeScript.

import * as React from 'react';
Khuong
fuente
3
Este era mi problema. ¡Gracias!
Joseph Fehrman
2
¿Por qué es esto necesario? Recibo este error en todo mi código base cuando ejecuto jest.
Nate Glenn
Hay una manera de hacer que la importación sea "hermosa de nuevo". Agregue "esModuleInterop: true" a su tsconfig.json. ¡Y disfruta de tu "importación React from 'react'"! - Shulyk Volodymyr
Shulyk Volodymyr
0

Cambio: importar {React} de 'react' para importar React de 'react' porque React es una exportación predeterminada y no necesita llaves para ninguna exportación predeterminada.

Saran MS
fuente
0

Si, en caso de que necesite importar varias clases de 'react', puede tener un alias para ellas, excepto React. Algo como,

import React, * as react from 'react';
Sasi Kumar M
fuente
0

Este error se me ocurrió debido a un descuido. En realidad es

import React from 'react';

Los corchetes son para exportaciones con nombre como esta:

import React, { useState, useEffect } from 'react';
Vimal Kurien Sam
fuente
Si tiene una nueva pregunta, hágala haciendo clic en el botón Preguntar . Incluya un enlace a esta pregunta si ayuda a proporcionar contexto. - De la crítica
MartenCatcher
0

React se exporta de forma predeterminada en ese módulo, no es necesario {}.

Aggestor Mhl
fuente