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, और यह है (फ़ोल्डर "हेडर" में "हैडर.जेएस") है।

फिर भी, प्रतिक्रिया अभी भी इस त्रुटि को फेंकता है:

संकलन करने में विफल

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

npm परीक्षण एक ही बात कहता है।

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'। यह अनुवाद करने के लिए, मेरी वर्तमान निर्देशिका से बाहर जाता है, एक फ़ोल्डर नाम कंटेनरों की तलाश करें जिसमें कार्ड फ़ाइल हो।

के रूप में 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

पैकेज- lock.json फ़ाइल हटा दी गई और फिर चली गई

npm install

आगे पढ़िए

Answer 5

मेरे मामले में, त्रुटि संदेश था

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

जबकि सब कुछ सही डायरेक्टरी में था।

मैंने पाया कि मुद्दे body.jsxको body.jsहल करने के लिए नाम बदलने !

इसलिए मैंने इस कोड webpack.config.jsको हल करने के लिए जोड़ाjsx रूप मेंjs

 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... मैं उन थोड़े गलतियों के लिए बहुत पुराना हूं lolol

— क्रिस

Answer 7

मेरा मुद्दा भी ऐसा ही था।

कारण:

import HomeComponent from "components/HomeComponent";

उपाय:

import HomeComponent from "./components/HomeComponent";

नोट: ./ घटकों से पहले था। आप कैसे उपयोग करने के लिए ऊपर @Zac Kwan की पोस्ट पढ़ सकते हैंimport

Answer 8

जब मैंने एक नया रिएक्शन ऐप बनाया, तो मैंने उसी मुद्दे का सामना किया, मैंने https://github.com/facebook/create-react-app/issues/2534 में सभी विकल्पों की कोशिश की, लेकिन इससे कोई फायदा नहीं हुआ। मुझे नए ऐप के लिए पोर्ट बदलना पड़ा और फिर इसने काम किया। डिफ़ॉल्ट रूप से, एप्लिकेशन 3000 पोर्ट का उपयोग करते हैं। मैंने पैकेज में पोर्ट को 8001 में बदल दिया। निम्नानुसार:

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

Answer 9

एक बेहतर तरीका है कि आप अपने रिएक्ट ऐप में मॉड्यूल के आयात को संभाल सकते हैं। ऐसा करने पर विचार करें:

jsconfig.jsonअपने आधार फ़ोल्डर में एक फ़ाइल जोड़ें । यह वही फ़ोल्डर है जिसमें आपका package.json है। अगला इसमें अपना आधार URL आयात परिभाषित करें:

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

अब कॉल करने के बजाय ../../आप आसानी से इसके बजाय ऐसा कर सकते हैं:

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

ध्यान दें कि 'घटक /' '../compords/' से भिन्न है

यह इस तरह से है।

लेकिन अगर आप एक ही डायरेक्टरी में फाइल इम्पोर्ट करना चाहते हैं तो आप यह भी कर सकते हैं:

import logo from './logo.svg'

Answer 10

आपको प्रोजेक्ट फ़ोल्डर में रहने की आवश्यकता है, यदि आप अंदर हैं srcया publicआपको उन फ़ोल्डरों से बाहर आना है। मान लीजिए कि आपकी प्रतिक्रिया-परियोजना का नाम 'हैलो-प्रतिक्रिया' हैcd hello-react

Answer 11

आपको 'हैडर' से इंपोर्ट को बदलना चाहिए । / src / घटकों / हेडर / हेडर 'करने के लिए

हैडर को ' .. / src / घटकों / हेडर / हेडर' से आयात करें

Answer 12

आप ऐप फ़ोल्डर में 'npm इंस्टॉल' को निष्पादित करने का प्रयास कर सकते हैं। इससे समस्या का समाधान भी हो सकता है। इसने मेरे लिए काम किया।

Answer 13

मैं उसी समस्या का सामना कर रहा था और मैंने इसे हल किया। देखें कि क्या आपकी index.jsफ़ाइल srcफ़ोल्डर में है, तो आप कभी भी जो फ़ाइल आयात कर रहे हैं, वह फ़ोल्डर जिसमें src फ़ोल्डर भी होना चाहिए।

इसका मतलब है कि यदि आपके घटक फ़ोल्डर फ़ोल्डर के बाहर हैं src, तो बस srcअपने संपादक में फ़ोल्डर के अंदर खींचें क्योंकि srcफ़ोल्डर के बाहर की फाइलें आयात नहीं की जाती हैं।

तब आप ./components/header/header(इस मामले में) का उपयोग कर आयात करने में सक्षम होंगे

Answer 14

आयात कथनों की जाँच करें। इसे अर्धविराम के साथ समाप्त किया जाना चाहिए। यदि आप कोई भी चूक करते हैं, तो आपको यह त्रुटि मिलेगी।

यह भी जाँचें कि क्या निम्न कथन आपके घटक में जोड़ा गया है।

आयात 'थ्रेडआईड' 'कार्यकर्ता_थ्रेड्स' से;

यदि ऐसा है तो उस लाइन को हटा दें। इससे मेरा काम बनता है।

Answer 15

मेरे लिए, मेरे पास इनपुट सही था, लेकिन npm startछोटी गाड़ी हो सकती है (कम से कम इसका उपयोग विंडोज और लिनक्स पर हाइपर टर्मिनल के साथ)। अगर मैं फ़ाइलों को विभिन्न फ़ोल्डरों में ले जाता हूं, तो npm स्टार्ट इन परिवर्तनों को नहीं उठाता है। मुझे एनपीएम स्टार्ट प्रक्रिया को रद्द करने की आवश्यकता है, इस कदम को बनाएं, सहेजें और फिर चलाएं npm startऔर यह अब फाइलों को देखेगा।

Answer 16

मेरे मामले में मैं एक घटक फ़ाइल का नाम बदल देता हूं, एक वीएस कोड मेरे लिए कोड की निचली पंक्ति जोड़ देता है:

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

इसलिए मैंने इसे हटाकर तय किया: ./node_modules/

import React, { Component } from "react";

चीयर्स!