React.js এ মডিউলটি (খুঁজে পাওয়া যায় না) সমাধান করতে পারে না

Question

আমি বিশ্বাস করতে পারি না যে আমি একটি সুস্পষ্ট প্রশ্ন জিজ্ঞাসা করছি, তবে কনসোল লগে ত্রুটিটি পেয়েছি।

কনসোল বলেছেন যে এটি ডিরেক্টরিতে মডিউলটি খুঁজে পাচ্ছে না, তবে আমি টাইপসের জন্য কমপক্ষে 10 বার পরীক্ষা করেছি। যাইহোক, এখানে উপাদান কোড।

আমি শিরোনামটি মূলত রেন্ডার করতে চাই

import React, { Component } from 'react'
import Header from './src/components/header/header'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <Header/>
    );
  }
}

export default App;

এটি Headerউপাদান

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import navBar from './src/components/header/navBar'
import './src/css/header.css'

class Header extends Component {
    render() {
        return {
            <div>
             <div id="particles-js"></div>
             <navBar/>
             <Title/>
          </div>
        };
    }
}

ReactDOM.render(<Header/>, document.getElementById('header'));

আমি কমপক্ষে 10 বার যাচাই করেছি যে মডিউলটি এই স্থানে রয়েছে ./src/components/header/headerএবং এটি (ফোল্ডার "শিরোনাম" "শিরোলেখ। Js" থাকে)।

তবুও, প্রতিক্রিয়া এখনও এই ত্রুটি ছুড়ে ফেলে:

সংকলন করতে ব্যর্থ

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

এনপিএম পরীক্ষা একই জিনিস বলে।

Comments

export default Header;আপনার 'শিরোলেখ ফাইলটিতে যোগ করুন

— রুই কস্তার

এখনও কাজ করে না।

— ভ্লাদিমির জোভানোভিć

মনে হচ্ছে আপনার import Header from './components/header/header'w / o src দরকার। ফাইল পাথ ফাইল পাথ আমদানির সাথে সম্পর্কিত। তারপর আপনি রপ্তানি প্রয়োজন Headerথেকে header.jsএবং ফিক্স App.renderপদ্ধতি।

— ইয়ুরি তারাব্যাঙ্কো

যদি আমি componentsফোল্ডারটি ফোল্ডার থেকে বাইরে নিয়ে যাই srcতবে এটি আমাকে বলে যে আমার node_modulesফাইলগুলি সংশোধন করা দরকার যা আমার মনোযোগ নয়।

— ভ্লাদিমির জোভানোভিć

আপনাকে কিছু সরানোর দরকার নেই। আপনার ভুল সম্পর্কিত আপেক্ষিক পথ রয়েছে। আপনি যদি './src/app.js' এর ভিতরে আমদানি করে import smth from './components/header/header'থাকেন তবে এই লাইনের জন্য import navBar from './src/components/header/navBar'এটি একই হওয়া উচিত এটি বর্তমান পথের সাথে তুলনামূলক হওয়া উচিতimport navBar from './navBar'

— ইয়ুরি তারাব্যাঙ্কো

Answer 1

আমরা সাধারণত যেভাবে ব্যবহার করি importতা আপেক্ষিক পথের উপর ভিত্তি করে।

.এবং ..কিভাবে আমরা নেভিগেট করতে মতই terminalমত cd ..ডিরেক্টরি বাইরে যেতে এবং mv ~/file .একটি সরাতে fileবর্তমান ডিরেক্টরির।

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

আপনার ক্ষেত্রে, App.jsহয় src/ডিরেক্টরির যখন header.jsহয় src/components। আপনি importকরতে হবে import Header from './components/header'। এটি আমার বর্তমান ডিরেক্টরিতে মোটামুটিভাবে অনুবাদ করুন, উপাদান ফোল্ডারটি শিরোনাম ফাইলটি সন্ধান করুন।

এখন থেকে যদি header.jsআপনার importকিছু থেকে প্রয়োজন হয় cardতবে আপনি এটি করবেন। import Card from '../containers/card'। এটিতে আমার বর্তমান ডিরেক্টরিটি থেকে সরানো, কোনও ফোল্ডারের নাম পাত্রে সন্ধান করুন যাতে কার্ড ফাইল রয়েছে This

হিসাবে import React, { Component } from 'react'একটি এই সঙ্গে শুরু হয় না ./বা ../বা /তাই নোড মডিউল খুঁজছেন শুরু হবে node_modulesপর্যন্ত একটি নির্দিষ্ট অনুক্রম reactপাওয়া যায়। আরও বিশদ বোঝার জন্য, এটি এখানে পড়তে পারেন ।

Comments

আমার ক্ষেত্রে এটি শুরুতে বিন্দু স্ল্যাশ ছিল যা অনুপস্থিত ছিল। ধন্যবাদ!

— রিচআর্ট

আমি আপেক্ষিক পথটি সঠিকভাবে যুক্ত করেছি। তবে, শুরুতে দুটি বিন্দু আমাকে সমস্যাটি সমাধান করতে সহায়তা করেছিল। ধন্যবাদ.

— সন্তোষ

Answer 2

আপনি যদি প্রতিক্রিয়া-তৈরি-অ্যাপ্লিকেশন দিয়ে কোনও অ্যাপ্লিকেশন তৈরি করেন তবে পরিবেশের পরিবর্তনশীল সেটটি ভুলে যাবেন না:

NODE_PATH=./src

অথবা .envআপনার মূল ফোল্ডারে ফাইল যুক্ত করুন ;

Comments

এটিই আমার জন্য সমাধান। আমি একটি সহজ যোগ App.cssকরার src/এবং করেনি import App.css। কিন্তু এটি আমাকে প্রশ্নের ত্রুটি দিয়েছে। এই উত্তরটি সমস্যার সমাধান করেছে।

— ম্যাক্সিমিলিয়ানো গুয়েরা

Answer 3

যোগ করা হচ্ছে NODE_PATHএনভায়রনমেন্ট ভেরিয়েবল হিসেবে .envঅনুমোদিত নয় এবং যোগ করার দ্বারা প্রতিস্থাপিত হয় "baseUrl": "./src", এর compilerOptionsমধ্যে jsconfig.jsonবা tsconfig.json।

রেফারেন্স

Answer 4

প্যাকেজ-লক.জসন ফাইলটি মোছা হয়েছে এবং তারপরে দৌড়েছে

npm install

আরও পড়ুন

Answer 5

আমার ক্ষেত্রে, ত্রুটি বার্তা ছিল

Module not found: Error: Can't resolve '/components/body

যখন সমস্ত কিছু সঠিক ডিরেক্টরিতে ছিল।

আমি খুঁজে পেয়েছি যে সমস্যাটির সমাধান করার body.jsxজন্য এই নামকরণ body.js!

সুতরাং আমি হিসাবে webpack.config.jsসমাধান করার জন্য এই কোড যুক্তjsxjs

 module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

এবং তারপরে বিল্ড ত্রুটি চলে গেল!

Answer 6

আমি মনে করি এটি হেডারের দ্বিগুণ ব্যবহার। আমি কেবল নিজের মতো করে কিছু চেষ্টা করেছি এবং সমস্যাগুলিও সৃষ্টি করেছি। আমি অন্যদের সাথে মেলে আমার উপাদান ফাইলটি মূলধন করেছিলাম এবং এটি কার্যকর হয়েছে।

import Header from './src/components/header/header';

হতে হবে

import Header from './src/components/header/Header';

Comments

আমি এটির উত্তরটি ঘৃণা করি কারণ আমি একই ফোল্ডারটির কাঠামোকে বেঁধে দিয়েছিলাম এবং না করে বরং ./components/header/headerআমি করছিলাম ./components/header... আমি এই ধরনের ভুলের জন্য খুব বেশি বয়সী হয়েছি ললোল

— ক্রিস

Answer 7

আমারও একি দশা.

কারণ:

import HomeComponent from "components/HomeComponent";

সমাধান:

import HomeComponent from "./components/HomeComponent";

দ্রষ্টব্য: ./ উপাদানগুলির আগে ছিল। আপনি কীভাবে ব্যবহার করবেন সে সম্পর্কে উপরের জ্যাক কাওয়ানের পোস্টটি পড়তে পারেনimport

Answer 8

আমি যখন একটি নতুন প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করেছি তখন আমি একই সমস্যার মুখোমুখি হয়েছি, আমি https://github.com/facebook/create-react-app/issues/2534 এ সমস্ত অপশন চেষ্টা করেছিলাম তবে এটি কার্যকর হয়নি। আমাকে নতুন অ্যাপের জন্য বন্দরটি পরিবর্তন করতে হয়েছিল এবং তারপরে এটি কার্যকর হয়েছিল। ডিফল্টরূপে, অ্যাপস 3000 বন্দরটি ব্যবহার করে I আমি পোর্টটি প্যাকেজ.জসনে 8001 এ পরিবর্তন করেছি:

  "scripts": {
    "start": "PORT=8001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Answer 9

আপনাকে প্রজেক্ট ফোল্ডারে থাকা দরকার, আপনি যদি থাকেন srcবা publicআপনাকে এই ফোল্ডারগুলি থেকে বেরিয়ে আসতে হয়। ধরুন আপনার প্রতিক্রিয়া-প্রকল্পের নামটি তখন 'হ্যালো-প্রতিক্রিয়া'cd hello-react

Answer 10

আপনার 'থেকে আমদানি শিরোনাম পরিবর্তন করা উচিত । / src / উপাদান / শিরোনাম / শিরোনাম 'থেকে

' .. / src / উপাদান / শিরোনাম / শিরোনাম' থেকে শিরোনাম আমদানি করুন

Answer 11

আপনি অ্যাপ্লিকেশন ফোল্ডারে 'এনপিএম ইনস্টল' চালানোর চেষ্টা করতে পারেন। এটি সমস্যার সমাধানও করতে পারে। এটা আমার জন্য কাজ করেছে।

Answer 12

আমি একই সমস্যার মুখোমুখি হয়েছি এবং এটি সমাধান করেছি। আপনার index.jsফাইলটি srcফোল্ডারে রয়েছে কিনা তা দেখুন , তবে আপনি যে ফাইলটি আমদানি করছেন তা যে ফোল্ডারে রয়েছে সেগুলি অবশ্যই এসআরসি ফোল্ডারের ভিতরে থাকা উচিত।

এর অর্থ যদি আপনার উপাদান ফোল্ডারটি ফোল্ডারের বাইরে থাকে তবে srcকেবল এটি srcআপনার সম্পাদকের ফোল্ডারের ভিতরে টেনে আনুন কারণ srcফোল্ডারের বাইরের ফাইলগুলি আমদানি করা হয়নি।

তারপরে আপনি ব্যবহার করে আমদানি করতে সক্ষম হবেন ./components/header/header(এই ক্ষেত্রে)

Answer 13

আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে আপনি মডিউলগুলির আমদানি পরিচালনা করতে পারেন এর থেকে আরও ভাল উপায়। এটি করার বিষয়ে বিবেচনা করুন:

jsconfig.jsonআপনার বেস ফোল্ডারে একটি ফাইল যুক্ত করুন । এটি আপনার প্যাকেজ.জসন সহ একই ফোল্ডার। এরপরে এটিতে আপনার বেস URL টি আমদানি সংজ্ঞায়িত করুন:

//jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

এখন ফোন করার চেয়ে ../../ আপনি সহজেই এর পরিবর্তে এটি করতে পারেন:

import navBar from 'components/header/navBar'
import 'css/header.css'

লক্ষ্য করুন যে 'উপাদানগুলি /' '../comp घटक/' থেকে পৃথক

এইভাবে আরও সুন্দর।

আপনি যদি একই ডিরেক্টরিতে ফাইল আমদানি করতে চান তবে আপনি এটিও করতে পারেন:

import logo from './logo.svg'

Answer 14

আমদানির বিবৃতিগুলির জন্য পরীক্ষা করুন t এটি সেমিকোলন দিয়ে শেষ করা উচিত। আপনি যদি কোনওটি মিস করেন তবে আপনি এই ত্রুটিটি পেয়ে যাবেন।

নিম্নলিখিত আমদানি বিবৃতি আপনার উপাদানটিতে যুক্ত হয়েছে কিনা তাও পরীক্ষা করুন।

'কর্মী_প্রেম' থেকে import থ্রেডআইড import আমদানি করুন;

যদি তাই হয় যে লাইন সরান। এটা আমার জন্য কাজ করে.

Answer 15

আমার ক্ষেত্রে আমি একটি উপাদান ফাইলটির নাম পরিবর্তন করি, একটি ভিএস কোড আমার জন্য নীচের কোডের কোডটি যুক্ত করে:

import React, { Component } from "./node_modules/react";

সুতরাং আমি মুছে ফেলার মাধ্যমে স্থির করেছি: ./node_modules/

import React, { Component } from "react";

চিয়ার্স!