प्रतिक्रिया देते हुए JSX फ़ाइल "अपरिभाषित की संपत्ति 'createElement' नहीं पढ़ सकती है"

101

मेरे पास एक फ़ाइल है 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.React है, जो भी इसका मतलब है ...

— कोई व्यक्ति
स्रोत

195

प्रतिक्रिया को आयात करने के लिए import React from 'react'आप कोष्ठक जोड़ते हैं जब आप जिस चीज को आयात कर रहे हैं वह उस मॉड्यूल या फ़ाइल में डिफ़ॉल्ट निर्यात नहीं है। प्रतिक्रिया के मामले में, यह डिफ़ॉल्ट निर्यात है।

यह आपके अन्य आयातों पर लागू हो सकता है कि आप उन्हें कैसे परिभाषित करते हैं।

— Kafo
स्रोत

17

मुझे यकीन नहीं है कि अभी क्यों लेकिन मेरे लिए यह थाimport * as React from "react"

— क्लिंटम

8

तकनीकी रूप से बोलना import React from 'react'वैध नहीं है क्योंकि रिएक्ट डिफॉल्ट एक्सपोर्ट नहीं है, लेकिन यह ईएस 6 को बेबल के साथ मिलकर उपयोग करने के कारण काम करता है। हो सकता है कि आपका बैबल कॉन्फ़िगरेशन आपको सही मान्य सिंटैक्स का उपयोग करने के लिए मजबूर कर रहा हो import * as React from 'react'। अधिक जानकारी के लिए: github.com/DefinitelyTyped/DefinitelyTyped/issues/5128

— Kafo

एक और महत्वपूर्ण बात जिसका मैं उल्लेख करना भूल गया कि JSX को कार्य करने के लिए अभिक्रिया की आवश्यकता है। हालाँकि, आपको कंपोनेंट और शायद अन्य नामित निर्यातों के अलावा रिएक्ट की आवश्यकता नहीं है। शायद भविष्य में आप प्रतिक्रिया आयात नहीं करेंगे।

— काफो

1

मैं एक्सपो के साथ प्रतिक्रिया- babel-preset-expo

— मूलक

2

यदि टाइपस्क्रिप्ट का उपयोग किया जाता है, तो आयात शैली esModuleInteroptsconfig की सेटिंग से भी प्रभावित होगी । Tsconfig परीक्षण फ़ाइलों (जाँच includeऔर files) पर लागू होना चाहिए ।

— मथियास

32

import React, { Component } from 'react'

इसने मेरे लिए काम किया। मुझे यकीन नहीं है कि इसने इस मुद्दे के मेरे संस्करण को क्यों तय किया, हालांकि। तो अगर आप कोई है जो इस समस्या पर अड़ गए हैं और आप अपनी शुरुआती बॉयलर के रूप में क्रिएक्ट-रिएक्शन-ऐप का उपयोग करते हैं, तो रिएक्ट आयात करने का यह तरीका चाल चलेगा। (अक्टूबर 18 तक, लोल)

— टीजे एलन
स्रोत

यह वह मुद्दा था जो मैं प्रतिक्रिया के अलावा मेमो, यूज़फेक्ट, यूज़स्टेट, को आयात करने की कोशिश कर रहा था। मूल रूप से त्रुटि "अपरिभाषित की संपत्ति 'मेमो को पढ़ा नहीं जा सकता है, लेकिन यह तय

— SeanMC

यह मेरे लिए भी तय है (हालांकि घटक के बजाय मैं उपयोगState आयात)। मैं अब अपने मूल, दोषपूर्ण के साथ अंतर पर बहुत उत्सुक हूं import { React, useState } from 'react';

— जोसफ्रे

1

@JosFabre यह दोषपूर्ण था क्योंकि प्रति डिफ़ॉल्ट गैर डिफ़ॉल्ट के रूप में 'react'निर्यात नहीं करता है React। हालाँकि यह export useState, export Componentआदि

— c4k

17

जो टाइपस्क्रिप्ट के साथ ReactJS काम कर रहे हैं।

import * as React from 'react';

— Khuong
स्रोत

3

यह मेरी समस्या थी। धन्यवाद!

— जोसेफ फेहरमैन

2

यह क्यों आवश्यक है? मुझे यह त्रुटि मेरे कोडबस पर तब आती है जब वह दौड़ता है।

— नैट ग्लेन

आयात को "फिर से सुंदर" बनाने का एक तरीका है। अपने tsconfig.json में "esModuleInterop: true" जोड़ें। और 'रिएक्ट' से अपने "इंपोर्ट रिएक्ट" का आनंद लें! - शूलक वोलोडिमिर

— शूलेक वोलोडिमियर

0

परिवर्तन: आयात {प्रतिक्रिया} 'प्रतिक्रिया' से आयात करने के लिए 'प्रतिक्रिया' से प्रतिक्रिया आयात करें क्योंकि प्रतिक्रिया एक डिफ़ॉल्ट निर्यात है और आपको किसी भी डिफ़ॉल्ट निर्यात के लिए घुंघराले ब्रेस की आवश्यकता नहीं है।

— सरन एम.एस.
स्रोत

0

यदि मामले में आपको 'प्रतिक्रिया' से कई वर्गों का आयात करने की आवश्यकता है, तो आपके पास प्रतिक्रिया के अलावा उनके लिए एक उपनाम हो सकता है। कुछ इस तरह,

import React, * as react from 'react';

— ससी कुमार एम
स्रोत

0

यह त्रुटि मुझे लापरवाही के कारण हुई। यह वास्तव में है

import React from 'react';

ब्रैकेट नामित निर्यात के लिए इस तरह हैं:

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

— विमल कुरियन सैम
स्रोत

यदि आपके पास कोई नया प्रश्न है, तो कृपया प्रश्न पूछें बटन पर क्लिक करके पूछें । इस प्रश्न का लिंक शामिल करें यदि यह संदर्भ प्रदान करने में मदद करता है। - रिव्यू से

— मार्टेनकैचर

0

React उस मॉड्यूल में डिफ़ॉल्ट रूप से निर्यात किया जाता है, कोई ज़रूरत नहीं {}।

— एगेंस्टर Mhl
स्रोत