বাড়ীতে হোম নামে একটি রফতানি থাকে না

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

অথবা আপনি একটি নামী রফতানিও করতে পারেন। যাত্রা। এক্সপোর্ট {হোম {;

— অভিনব সিঙ্গি

@ অভিনবসিংগি হ্যাঁ, তবে এটি একটি মডিউলের ডিফল্ট রফতানি হিসাবে কোনও উপাদান রফতানি করার জন্য কনভেনশন এবং ব্যাপক অনুশীলন। এছাড়াও অন্য কোনও রফতানি নেই।

— অ্যান্ড্রু লি

হ্যাঁ, ঠিক @ অ্যান্ড্রুলি, আমরাও একই অনুশীলনটি অনুসরণ করি :)

— অভিনব সিংগি

বিস্ময়কর তাই একাধিক এখানে কোঁকড়ানো বন্ধনী সঙ্গে তুলনায় কোঁকড়া বন্ধনী আবৃত হবে।

— দ্য

@ দ্য ব্ল্যাকবেঞ্জকিড হ্যাঁ, আপনার যদি একাধিক রফতানি থাকে তবে নামকরণকৃত ব্যবহার করুন। তারপরে লিঙ্কযুক্ত 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 ইলেক্ট্রেজে 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'; 

ডিফল্ট এক্সপোর্ট ক্লাস class

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

উভয় ক্ষেত্রেই লেখার দরকার নেই

export default Home;

ক্লাসের পরে.

Answer 6

আপনি এই সমস্যাটি সমাধান করার জন্য দুটি উপায় ব্যবহার করতে পারেন, প্রথমত যে আমি এটি সবচেয়ে ভাল উপায় হিসাবে মনে করি তা হল আপনার কোডের আমদানি করা অংশটি বেলো দিয়ে প্রতিস্থাপন করা:

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

এটি কোনও উত্তরের মতো বলে মনে হচ্ছে না এবং সম্ভবত এটি হ্রাস করা উচিত। আপনি অন্য অ্যানোয়ার পোস্ট করার আগে দয়া করে কীভাবে উত্তর দিন তা পড়ুন । সাধারণত, আপনার অন্যান্য পুরানো প্রশ্নের উত্তরও অন্য অনেক জবাব দিয়ে দেওয়া উচিত নয় - আপনি নতুন কিছু যুক্ত করতে না পারলে অন্য উত্তরগুলি দিতে পারে না। কোডও অন্তর্ভুক্ত করুন।

— ফিনিমগ্লাস