Kan module (niet gevonden) in React.js niet oplossen

Ik kan niet geloven dat ik een voor de hand liggende vraag stel, maar ik krijg nog steeds de foutmelding in het consolelogboek.

Console zegt dat het de module niet in de directory kan vinden, maar ik heb minstens 10 keer gecontroleerd op typefouten. Hoe dan ook, hier is de componentcode.

Ik wil Headerin root weergeven

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;

Dit is het onderdeel 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'));

Ik heb minstens 10 keer gecontroleerd of de module zich op deze locatie bevindt ./src/components/header/header, en dat is het ook (map “header” bevat “header.js”) .

Toch geeft React nog steeds deze fout:

Kon niet compileren

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

npm-testzegt hetzelfde.

Antwoord 1, autoriteit 100%

De manier waarop we gewoonlijk gebruiken importis gebaseerd op relatief pad.

.EN ..is vergelijkbaar met hoe we gebruiken om te navigeren in terminalals cd ..NAAR Ga uit de map en mv ~/file .om een ​​filenaar de huidige map te verplaatsen.

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

In uw geval, App.jsbevindt zich in src/Directory terwijl header.jsis in src/components. Naar importU zou import Header from './components/header'. Dit is ongeveer vertalen naar in mijn huidige directory, zoek de componentenmap die een header-bestand bevat.

Nu, als van header.js, moet u importiets van card, dat zou u dit doen. import Card from '../containers/card'. Dit vertaalt naar, ga uit mijn huidige directory, zoek naar een mapcontainers met een kaartbestand.

Wat betreft import React, { Component } from 'react', start dit niet met een ./of ../of /Daarom begint het knooppunt te zoeken naar de module in de node_modulesin een specifieke volgorde tot reactis gevonden. Voor een meer detail-begrip kan het worden gelezen hier .

Antwoord 2, Autoriteit 21%

Als u een applicatie maakt met react-create-app, vergeet niet Set Milieuvariabele:

NODE_PATH=./src

of Toevoegen aan .envBestand naar uw root-map;

Antwoord 3, autoriteit 7%

Het toevoegen van NODE_PATHals omgevingsvariabele in .envis verouderd en wordt vervangen door "baseUrl": "./src"toe te voegen aan compilerOptionsin jsconfig.jsonof tsconfig.json.

Referentie

Antwoord 4, autoriteit 7%

Het bestand package-lock.json verwijderd & liep toen

npm install

Lees verder

Antwoord 5, autoriteit 4%

in mijn geval was de foutmelding

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

Terwijl alles in de juiste map stond.

Ik ontdekte dat het hernoemen van body.jsxnaar body.jshet probleem oplost!

Dus ik heb deze code toegevoegd in webpack.config.jsom jsxop te lossen als js

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

En dan is de bouwfout verdwenen!

Antwoord 6, autoriteit 2%

Ik denk dat het het dubbele gebruik van header is. Ik heb net zelf iets soortgelijks geprobeerd en veroorzaakte ook problemen. Ik heb mijn componentbestand met een hoofdletter geschreven om overeen te komen met de andere en het werkte.

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

Zou moeten zijn

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

Antwoord 7

Ik had een soortgelijk probleem.

Oorzaak:

import HomeComponent from "components/HomeComponent";

Oplossing:

import HomeComponent from "./components/HomeComponent";

OPMERKING:./was voor componenten. Je kunt het bericht van @Zac Kwan hierboven lezen over het gebruik van import

Antwoord 8

Ik had hetzelfde probleem toen ik een nieuwe reactie-app maakte, ik probeerde alle opties in https://github.com/facebook/create-react-app/issues/2534maar het hielp niet. Ik moest de poort voor de nieuwe app wijzigen en toen werkte het. Apps gebruiken standaard poort 3000. Ik heb de poort als volgt gewijzigd in 8001 in package.json:

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

Antwoord 9

Er is een betere manier om de import van modules in je React App af te handelen.
Overweeg dit te doen:

Voeg een jsconfig.json-bestand toe aan uw basismap. Dat is dezelfde map die uw package.json bevat. Definieer vervolgens uw basis-URL-import erin:

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

In plaats van ../../te bellen, kun je dit eenvoudig doen:

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

Merk op dat ‘components/’ anders is dan ‘../components/’

Het is netter op deze manier.

Maar als u bestanden in dezelfde map wilt importeren, kunt u dit ook doen:

import logo from './logo.svg'

Antwoord 10

U kunt proberen ‘npm install’ uit te voeren in de app-map. Dit zou het probleem ook kunnen oplossen. Het werkte voor mij.

Antwoord 11

Je moet in de projectmap zijn, als je in srcof publiczit, moet je uit die mappen komen. Stel dat je react-projectnaam ‘hello-react’ is, dan cd hello-react

Antwoord 12

je moet de importkop wijzigen van ‘./src/components/header/header’ in

koptekst importeren uit ‘../src/components/header/header’

Antwoord 13

Ik had hetzelfde probleem en heb het opgelost.
Kijk of uw index.js-bestand zich in de map srcbevindt, en welk bestand u ook importeert, de map die dat bestand bevat, moet zich ook in de src-map bevinden.

Dat betekent dat als uw componentenmap zich buiten de src-map bevindt, u deze gewoon naar de src-map in uw editor sleept omdat de bestanden buiten srcmap worden niet geïmporteerd.

Dan kunt u importeren met ./components/header/header(in dit geval)

Antwoord 14

Voor mij had ik de invoer correct, maar npm startkan fouten bevatten (tenminste als ik het gebruik met Hyper-terminal op Windows en Linux). Als ik bestanden naar verschillende mappen verplaats, neemt npm start deze wijzigingen niet op. Ik moet het npm-startproces annuleren, de verplaatsing maken, opslaan en vervolgens npm startuitvoeren en het zal de bestanden nu zien.

Antwoord 15

vervang ReactDOM.render(<Header/>, document.getElementById('header')); door export default Headerin Header.js

Antwoord 16

Controleer de importinstructies. Het moet worden afgesloten met een puntkomma. Als u er een mist, krijgt u deze foutmelding.

Controleer ook of het volgende importstatement in uw component is toegevoegd.

importeer { threadId } van ‘worker_threads’;

Zo ja, verwijder die regel. Het werkt voor mij.

Antwoord 17

In mijn geval hernoem ik een componentbestand, een VS-code voegt de onderstaande regel code voor mij toe:

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

Dus ik heb het opgelost door de: ./node_modules/

. te verwijderen

import React, { Component } from "react";

Proost!

Antwoord 18

Ik denk dat het je kan helpen-

Lees uw fout zorgvuldig-./src/App.js
Module niet gevonden: kan ‘./src/components/header/header’ niet oplossen in ‘/home/wiseman/Desktop/React_Components/github-portfolio/src’

schrijf gewoon- ./header/header in plaats van ./src/components/header/header in App.js

Als het niet werkt, probeer dan de bestandsnaam van de header te veranderen, dit kan kop zijn