होम में होम नाम का कोई निर्यात नहीं है

Question

मैं साथ काम कर रहा था create-react-appऔर इस मुद्दे पर आया, जहां मुझे मिलता है Home does not contain an export named Home।

यहां बताया गया है कि मैंने अपनी App.jsफ़ाइल कैसे सेट की है :

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Home } from './layouts/Home'

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello
        <Home />
      </div>
    )
  }
}

export default App;

अब मेरे layoutsफोल्डर में मेरे पास Home.jsफाइल है। जो निम्नलिखित की तरह सेटअप है।

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
        <p className="App-intro">
          Hello Man
        </p>
        )
    }
} 

export default Home;

जैसा कि आप देख सकते हैं कि मैं Homeघटक निर्यात कर रहा हूं, लेकिन मुझे यह कहते हुए मेरे कंसोल में एक त्रुटि मिलती है।

क्या हो रहा है?

Answer 1

त्रुटि आपको बता रही है कि आप गलत तरीके से आयात कर रहे हैं। अब आपके पास कोड:

import { Home } from './layouts/Home';

गलत है क्योंकि आप डिफ़ॉल्ट निर्यात के रूप में निर्यात कर रहे हैं, नामांकित निर्यात के रूप में नहीं। इस लाइन की जाँच करें:

export default Home;

आप डिफ़ॉल्ट के रूप में निर्यात कर रहे हैं , नाम के रूप में नहीं। इस प्रकार, Homeइस तरह से आयात करें:

import Home from './layouts/Home';

ध्यान दें कि कोई घुंघराले कोष्ठक नहीं हैं। पर आगे पढ़ने importऔर export।

Comments

या आप नामांकित निर्यात भी कर सकते हैं। पूर्व। निर्यात {होम};

— अभिनव सिंगी

@AbhinavSingi हाँ, लेकिन यह एक मॉड्यूल के डिफ़ॉल्ट निर्यात के रूप में एक घटक को निर्यात करने के लिए सम्मेलन और व्यापक रूप से अभ्यास किया जाता है। इसके अलावा कोई अन्य निर्यात नहीं हैं।

— एंड्रयू ली

हां, बिल्कुल @AndrewLi, हम भी उसी प्रथा का पालन करते हैं :)

— अभिनव सिंगी

विस्मयकारी के साथ तुलना में बहुत सारे घुंघराले कोष्ठक में लिपटे होंगे जैसा कि यहां देखा गया है।

— TheBlackBenzKid

@ TheBlackBenzKid हाँ, यदि आपके पास कई निर्यात हैं, तो नाम वाले का उपयोग करें। फिर उस नाम का उपयोग करके आयात करें जैसा कि लिंक किए गए MDN प्रलेखन में देखा गया है।

— एंड्रयू ली

Answer 2

उपयोग

import Home from './layouts/Home'

बजाय

import { Home } from './layouts/Home'

{}होम से निकालें

Comments

मौजूदा उत्तर में इससे और क्या जुड़ता है?

— एंड्रयू ली

Answer 3

यह एक ऐसा मामला है जहां आपने डिफ़ॉल्ट निर्यात और नामित निर्यात को मिलाया है ।

namedनिर्यात से निपटने के दौरान , यदि आप उन्हें आयात करने की कोशिश करते हैं तो आपको नीचे दिए गए कर्ली ब्रेसिज़ का उपयोग करना चाहिए,

import { Home } from './layouts/Home'; // if the Home is a named export

आपके मामले में होम को डिफ़ॉल्ट के रूप में निर्यात किया गया था। यह वह है जो मॉड्यूल से आयात किया जाएगा, जब आप एक निश्चित कोड का एक निश्चित नाम निर्दिष्ट नहीं करते हैं। जब आप आयात करते हैं, और घुंघराले ब्रेसिज़ को छोड़ देते हैं, तो यह आपके द्वारा आयात किए जा रहे मॉड्यूल में डिफ़ॉल्ट निर्यात के लिए दिखेगा। तो आपका आयात होना चाहिए,

import Home from './layouts/Home'; // if the Home is a default export

देखने के लिए कुछ संदर्भ:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
• https://medium.com/@trekinbami/a-not-so-in-depth-explanation-of-es6-modules-import-and-export-13a80300f2f0

Answer 4

मैं सिर्फ इस त्रुटि संदेश में भाग गया (अगली 9 पर अपग्रेड करने के बाद कुछ ट्रांसप्लड आयातों ने यह त्रुटि देना शुरू कर दिया)। मैं उन्हें इस तरह सिंटैक्स का उपयोग करके ठीक करने में कामयाब रहा:

import * as Home from './layouts/Home';

Answer 5

हम भी उपयोग कर सकते हैं

import { Home } from './layouts/Home'; 

क्लास कीवर्ड से पहले एक्सपोर्ट कीवर्ड का उपयोग करना।

export class Home extends React.Component{
    render(){
        ........
    }
}

डिफ़ॉल्ट रूप से

 import Home from './layouts/Home'; 

डिफ़ॉल्ट निर्यात वर्ग

 export default class Home extends React.Component{
    render(){
        ........
    }
 }

दोनों मामले को लिखने की जरूरत नहीं है

export default Home;

कक्षा के बाद।

Answer 6

आप इस समस्या को हल करने के लिए दो तरीकों का उपयोग कर सकते हैं, पहला तरीका जो मुझे लगता है कि यह सबसे अच्छा तरीका है कि आपके कोड के आयात को bellow के साथ बदल दिया जाए:

import Home from './layouts/Home'

या बिना डिफॉल्ट के अपने कंपोनेंट को एक्सपोर्ट करें जिसे इस तरह का एक्सपोर्ट कहा जाता है

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
        <p className="App-intro">
          Hello Man
        </p>
        )
    }
} 

export {Home};

Answer 7

यह उपाय है:

• अपनी फ़ाइल Home.js पर जाएं
• सुनिश्चित करें कि आप अपनी फ़ाइल को फ़ाइल के अंत में इस तरह निर्यात करें:

export default Home;

Comments

यह एक अच्छे उत्तर की तरह प्रतीत नहीं होता है और संभवतः इसे अस्वीकृत कर दिया जाना चाहिए। कृपया जवाब देने से पहले पढ़ें आम तौर पर, आपको कई अन्य उत्तरों के साथ पुराने प्रश्नों का उत्तर नहीं देना चाहिए - जब तक कि आप कुछ नया नहीं जोड़ सकते अन्य उत्तर नहीं दे सकते। कोड भी शामिल करें।

— फिनमलगस