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

Jawaban:


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.


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)


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';

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';

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.


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';

0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.