React JSX файл выдает ошибку «Невозможно прочитать свойство createElement of undefined»

Question 1

У меня есть файл test_stuff.js, с которым я работаю npm test

Это примерно так:

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

К сожалению, я получаю ошибку

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

Что это значит? Я успешно импортирую React из response, так почему же React не определен? Это _react.React, что бы это ни значило ...

Question 2

Чтобы импортировать React, import React from 'react'вы добавляете скобки, когда то, что вы импортируете, не является экспортом по умолчанию в этом модуле или файле. В случае реакции это экспорт по умолчанию.

Это может относиться к другим вашим импортам в зависимости от того, как вы их определили.

Question 3

import React, { Component } from 'react'

Это сработало для меня. Я не уверен, почему он исправил мою версию этой проблемы. Итак, если вы тот, кто столкнулся с этой проблемой и используете приложение create-react-app в качестве исходного шаблона, этот способ импорта React сработает. (по состоянию на октябрь 18, смеется)

Question 4

Для тех, кто работает с ReactJS с TypeScript.

import * as React from 'react';

Question 5

Эта ошибка возникла у меня по неосторожности. Это на самом деле

import React from 'react';

Скобки предназначены для именованного экспорта, например:

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

Question 6

Изменение: импортируйте {React} из response в import React из response, потому что React - это экспорт по умолчанию, и вам не нужны фигурные скобки для любого экспорта по умолчанию.

Question 7

Если в случае, если вам нужно импортировать несколько классов из response, вы можете иметь для них псевдоним, кроме React. Что-то вроде,

import React, * as react from 'react';

Question 8

React по умолчанию экспортируется в этом модуле, не требуется {}.

Answer 1

У меня есть файл test_stuff.js, с которым я работаю npm test

Это примерно так:

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

К сожалению, я получаю ошибку

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

Что это значит? Я успешно импортирую React из response, так почему же React не определен? Это _react.React, что бы это ни значило ...

Answer 2

196

Чтобы импортировать React, import React from 'react'вы добавляете скобки, когда то, что вы импортируете, не является экспортом по умолчанию в этом модуле или файле. В случае реакции это экспорт по умолчанию.

Это может относиться к другим вашим импортам в зависимости от того, как вы их определили.

Kafo
источник

18

Я не уверен, почему, но для меня это былоimport * as React from "react"

Клинтм

8

С технической точки зрения import React from 'react'это недопустимо, поскольку React не является экспортом по умолчанию, но он работает благодаря использованию ES6 в сочетании с babel. Возможно, ваша конфигурация babel отличается, заставляя вас использовать правильный допустимый синтаксис, который есть import * as React from 'react'. Для получения дополнительной информации: github.com/DefinentyTyped/DefinitiTyped/issues/5128

Kafo

Еще одна важная вещь, о которой я забыл упомянуть, - это то, что JSX требует, чтобы React работал. Однако вам действительно не нужен React, кроме Component и, возможно, других именованных экспортов. Возможно, в будущем вы не будете импортировать React.

Kafo

1

Я использую response-native с expo, и моя предустановка babel - babel-preset-expo github.com/expo/babel-preset-expo/blob/master/index.js

Clintm

2

При использовании машинописного текста на стиль импорта также повлияет параметр esModuleInteroptsconfig. Tsconfig должен применяться к тестовым файлам (отметьте includeи files).

Матиас

Answer 3

18

Я не уверен, почему, но для меня это былоimport * as React from "react"

Клинтм

Answer 4

8

С технической точки зрения import React from 'react'это недопустимо, поскольку React не является экспортом по умолчанию, но он работает благодаря использованию ES6 в сочетании с babel. Возможно, ваша конфигурация babel отличается, заставляя вас использовать правильный допустимый синтаксис, который есть import * as React from 'react'. Для получения дополнительной информации: github.com/DefinentyTyped/DefinitiTyped/issues/5128

Kafo

Answer 5

Еще одна важная вещь, о которой я забыл упомянуть, - это то, что JSX требует, чтобы React работал. Однако вам действительно не нужен React, кроме Component и, возможно, других именованных экспортов. Возможно, в будущем вы не будете импортировать React.

Kafo

Answer 6

1

Я использую response-native с expo, и моя предустановка babel - babel-preset-expo github.com/expo/babel-preset-expo/blob/master/index.js

Clintm

Answer 7

2

При использовании машинописного текста на стиль импорта также повлияет параметр esModuleInteroptsconfig. Tsconfig должен применяться к тестовым файлам (отметьте includeи files).

Матиас

Answer 8

33

import React, { Component } from 'react'

Это сработало для меня. Я не уверен, почему он исправил мою версию этой проблемы. Итак, если вы тот, кто столкнулся с этой проблемой и используете приложение create-react-app в качестве исходного шаблона, этот способ импорта React сработает. (по состоянию на октябрь 18, смеется)

TJ Allen
источник

Это была проблема, с которой я столкнулся при попытке импортировать memo, useEffect, useState в дополнение к реакции. Первоначально видел ошибку «Невозможно прочитать свойство 'memo' of undefined», но это исправило ее

SeanMC

Это тоже исправило это для меня (хотя вместо Component я импортирую useState). Мне сейчас очень любопытно, чем отличается мой оригинал от неисправного import { React, useState } from 'react';

JosFabre

1

@JosFabre был ошибочным, потому 'react'что не экспортируется Reactкак нестандартное по умолчанию. Однако export useState, export Componentи т.д.

c4k

Answer 9

Это была проблема, с которой я столкнулся при попытке импортировать memo, useEffect, useState в дополнение к реакции. Первоначально видел ошибку «Невозможно прочитать свойство 'memo' of undefined», но это исправило ее

SeanMC

Answer 10

Это тоже исправило это для меня (хотя вместо Component я импортирую useState). Мне сейчас очень любопытно, чем отличается мой оригинал от неисправного import { React, useState } from 'react';

JosFabre

Answer 11

1

@JosFabre был ошибочным, потому 'react'что не экспортируется Reactкак нестандартное по умолчанию. Однако export useState, export Componentи т.д.

c4k

Answer 12

17

Для тех, кто работает с ReactJS с TypeScript.

import * as React from 'react';

appiconhero.co
источник

3

Это была моя проблема. Спасибо!

Джозеф Ферман

2

Зачем это нужно? Я получаю эту ошибку по всей кодовой базе при запуске jest.

Nate Glenn

Есть способ сделать импорт «снова красивым». Добавьте "esModuleInterop: true" в свой tsconfig.json. И наслаждайтесь своим «импортом React из react»! - Шулик Владимир

Шулик Владимир

Answer 13

3

Это была моя проблема. Спасибо!

Джозеф Ферман

Answer 14

2

Зачем это нужно? Я получаю эту ошибку по всей кодовой базе при запуске jest.

Nate Glenn

Answer 15

Есть способ сделать импорт «снова красивым». Добавьте "esModuleInterop: true" в свой tsconfig.json. И наслаждайтесь своим «импортом React из react»! - Шулик Владимир

Шулик Владимир

Answer 16

1

Эта ошибка возникла у меня по неосторожности. Это на самом деле

import React from 'react';

Скобки предназначены для именованного экспорта, например:

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

Вимал Куриен Сэм
источник

Если у вас есть новый вопрос, задайте его, нажав кнопку « Задать вопрос» . Включите ссылку на этот вопрос, если она помогает понять контекст. - Из

отзыва

Answer 17

Если у вас есть новый вопрос, задайте его, нажав кнопку « Задать вопрос» . Включите ссылку на этот вопрос, если она помогает понять контекст. - Из

отзыва

Answer 18

Изменение: импортируйте {React} из response в import React из response, потому что React - это экспорт по умолчанию, и вам не нужны фигурные скобки для любого экспорта по умолчанию.

Answer 19

Если в случае, если вам нужно импортировать несколько классов из response, вы можете иметь для них псевдоним, кроме React. Что-то вроде,

import React, * as react from 'react';

Answer 20

0

React по умолчанию экспортируется в этом модуле, не требуется {}.

Аггестор
источник

React JSX файл выдает ошибку «Невозможно прочитать свойство createElement of undefined»

Ответы: