File JSX React memberikan kesalahan "Tidak dapat membaca properti 'createElement' tidak terdefinisi"

102

Saya memiliki file test_stuff.js yang saya jalankan npm test

Ini terlihat seperti ini:

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

Sayangnya, saya mendapatkan error tersebut

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

Apa artinya? Saya berhasil mengimpor React dari 'react', jadi mengapa React tidak ditentukan? Ini adalah _react.React, apapun artinya ...

— Beberapa pria
sumber

196

Untuk mengimpor React, import React from 'react'Anda menambahkan tanda kurung ketika hal yang Anda impor bukan ekspor default dalam modul atau file itu. Jika bereaksi, ini adalah ekspor default.

Ini mungkin berlaku untuk impor Anda yang lain, bergantung pada cara Anda menentukannya.

— Kafo
sumber

18

Saya tidak yakin mengapa dulu, tetapi bagi saya ituimport * as React from "react"

— Clintm

8

Secara teknis, import React from 'react'tidak valid karena React bukan ekspor default tetapi berfungsi karena menggunakan ES6 dalam hubungannya dengan babel. Mungkin konfigurasi babel Anda berbeda sehingga memaksa Anda untuk menggunakan sintaks valid yang benar yaitu import * as React from 'react'. Untuk info lebih lanjut: github.com/DefinitelyTyped/DefinitelyTyped/issues/5128

— Kafo

Hal penting lainnya yang lupa saya sebutkan adalah bahwa BEJ memerlukan React agar dapat berfungsi. Namun, Anda tidak terlalu membutuhkan React selain Komponen dan mungkin ekspor bernama lainnya. Mungkin di masa mendatang Anda tidak akan mengimpor React.

— Kafo

1

Saya menggunakan react-native dengan expo dan preset babel saya adalah babel-preset-expo github.com/expo/babel-preset-expo/blob/master/index.js

— Clintm

2

Jika menggunakan skrip jenis, gaya impor juga akan terpengaruh oleh pengaturan esModuleInteropdi tsconfig. Tsconfig harus diterapkan ke file pengujian (centang includedan files).

— Matthias

33

import React, { Component } from 'react'

Ini berhasil untuk saya. Saya tidak yakin mengapa itu memperbaiki versi saya dari masalah ini. Jadi jika Anda adalah seseorang yang menemukan masalah ini dan Anda menggunakan create-react-app sebagai boilerplate awal Anda, cara mengimpor React ini akan berhasil. (mulai Oktober 18, lol)

— TJ Allen
sumber

Ini adalah masalah yang saya alami, ketika mencoba mengimpor memo, useEffect, useState, dan juga bereaksi. Awalnya melihat kesalahan "Tidak dapat membaca 'memo' properti tidak terdefinisi", tetapi ini memperbaikinya

— SeanMC

Ini memperbaikinya untuk saya juga (meskipun alih-alih Komponen saya mengimpor useState). Saya sekarang sangat penasaran dengan perbedaan dengan yang asli saya, yang salah import { React, useState } from 'react';

— JosFabre

1

@JosFabre itu salah karena 'react'tidak mengekspor Reactsebagai non default per sé. Namun itu export useState,, export Componentdll.

— c4k

17

Bagi mereka yang bekerja ReactJS dengan TypeScript.

import * as React from 'react';

— appiconhero.co
sumber

3

Ini adalah masalahku. Terima kasih!

— Joseph Fehrman

2

Mengapa ini perlu? Saya mendapatkan kesalahan ini di seluruh basis kode saya saat menjalankan lelucon.

— Nate Glenn

Ada cara agar import "cantik kembali". Tambahkan "esModuleInterop: true" ke tsconfig.json Anda. Dan nikmati "import React from 'react'"! - Shulyk Volodymyr

— Shulyk Volodymyr

1

Kesalahan ini terjadi pada saya karena kecerobohan. Itu sebenarnya

import React from 'react';

Tanda kurung untuk ekspor bernama seperti ini:

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

— Vimal Kurien Sam
sumber

Jika Anda memiliki pertanyaan baru, silakan tanyakan dengan mengklik tombol Ajukan Pertanyaan . Sertakan link ke pertanyaan ini jika membantu memberikan konteks. - Dari Ulasan

— MartenCatcher

0

Ubah: impor {React} dari 'react' ke import React dari 'react' Karena React adalah ekspor default dan Anda tidak memerlukan tanda kurung kurawal untuk ekspor default.

— Saran MS
sumber

0

Jika seandainya Anda perlu mengimpor beberapa kelas dari 'react', Anda dapat memiliki alias untuk mereka kecuali React. Sesuatu seperti,

import React, * as react from 'react';

— Sasi Kumar M
sumber

0

React diekspor secara default dalam modul itu, tidak perlu {}.

— Aggestor
sumber