Impossibile risolvere il modulo (non trovato) in React.js

Non riesco a credere di porre una domanda ovvia, ma ricevo ancora l'errore nel registro della console.

La console dice che non riesce a trovare il modulo nella directory, ma ho controllato almeno 10 volte per errori di battitura. Comunque, ecco il codice del componente.

Voglio rendere l' header in root

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;

Questo è il Headercomponente

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'));

Ho controllato almeno 10 volte che il modulo si trovi in ​​questa posizione ./src/components/header/header, ed è (la cartella "header" contiene "header.js").

Tuttavia, React genera ancora questo errore:

Impossibile compilare

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

Il test npm dice la stessa cosa.

Il modo in cui usiamo di solito importè basato sul percorso relativo.

.e ..sono simili a come usiamo per navigare terminalcome cd ..per uscire dalla directory e mv ~/file .per spostare a filenella directory corrente.

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

Nel tuo caso, App.jsè nella src/directory mentre header.jsè in src/components. A importte lo farebbe import Header from './components/header'. Questo si traduce approssimativamente nella mia directory corrente, trova la cartella dei componenti che contiene un file di intestazione.

Ora, se da header.js, hai bisogno di importqualcosa da card, lo faresti.import Card from '../containers/card'. Questo si traduce in, esci dalla mia directory corrente, cerca i contenitori del nome di una cartella che hanno un file di scheda.

Per quanto riguarda import React, { Component } from 'react', questo non inizia con un ./o ../o /quindi il nodo inizierà a cercare il modulo node_modulesin un ordine specifico finché non reactviene trovato. Per una comprensione più dettagliata, può essere letto qui .

Se crei un'applicazione con react-create-app, non dimenticare di impostare la variabile d'ambiente:

NODE_PATH=./src

Oppure aggiungi al .envfile nella tua cartella principale;

L'aggiunta NODE_PATHcome variabile di ambiente in .envè deprecata e viene sostituita dall'aggiunta "baseUrl": "./src", compilerOptionsin jsconfig.jsono tsconfig.json.

Riferimento

Eliminato il file package-lock.json e quindi eseguito

npm install

Continua a leggere

nel mio caso, il messaggio di errore era

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

Mentre tutto era nella directory corretta.

Ho trovato quella ridenominazione body.jsxper body.jsrisolvere il problema!

Quindi ho aggiunto questo codice webpack.config.jsper risolvere jsxcomejs

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

E poi l'errore di compilazione è andato!

Penso che sia il doppio uso dell'intestazione. Ho appena provato io stesso qualcosa di simile e ho anche causato problemi. Ho scritto in maiuscolo il mio file componente per abbinare gli altri e ha funzionato.

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

Dovrebbe essere

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

Ho avuto un problema simile.

Causa:

import HomeComponent from "components/HomeComponent";

Soluzione:

import HomeComponent from "./components/HomeComponent";

NOTA: ./ era prima dei componenti. Puoi leggere il post di @Zac Kwan sopra su come usarloimport

Ho riscontrato lo stesso problema quando ho creato una nuova app React, ho provato tutte le opzioni in https://github.com/facebook/create-react-app/issues/2534 ma non ha aiutato. Ho dovuto cambiare la porta per la nuova app e poi ha funzionato. Per impostazione predefinita, le app utilizzano la porta 3000. Ho cambiato la porta in 8001 in package.json come segue:

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

C'è un modo migliore per gestire l'importazione di moduli nella tua app React. Considera di fare questo:

Aggiungi un jsconfig.jsonfile alla tua cartella di base. Questa è la stessa cartella che contiene il tuo package.json. Quindi definisci le tue importazioni URL di base in esso:

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

Ora invece di chiamare ../../puoi farlo facilmente invece:

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

Tieni presente che "componenti /" è diverso da "../components/"

È più ordinato in questo modo.

Ma se vuoi importare file nella stessa directory puoi farlo anche:

import logo from './logo.svg'

Devi essere nella cartella del progetto, se sei dentro srco publicdevi uscire da quelle cartelle. Supponiamo che il nome del tuo progetto di reazione sia "ciao-reagisci"cd hello-react

dovresti cambiare l'intestazione di importazione da ' ./ src / components / header / header 'in

importa intestazione da " .. / src / components / header / header"

Puoi provare a eseguire "npm install" nella cartella dell'app. Questo potrebbe anche risolvere il problema. Ha funzionato per me.

Stavo affrontando lo stesso problema e l'ho risolto. Verifica se il tuo index.jsfile è in formatosrc cartella, quindi quale file stai importando, la cartella che lo contiene deve essere anche all'interno della cartella src.

Ciò significa che se la cartella dei componenti è esterna alla srccartella, trascinala all'interno della srccartella nel tuo editor perché i file all'esterno disrc cartella non vengono importati.

Quindi sarai in grado di importare usando ./components/header/header(in questo caso)

Controlla le istruzioni di importazione, che dovrebbe terminare con punto e virgola. Se ne perdi uno, otterrai questo errore.

Controlla anche se la seguente dichiarazione di importazione è stata aggiunta nel tuo componente.

import {threadId} da "worker_threads";

In tal caso, rimuovere quella linea. Per me funziona.

Per me, ho avuto l'input corretto ma npm startpuò essere bacato (almeno usandolo con Hyper Terminal su Windows e Linux). Se sposto file in cartelle diverse, npm start non rileva queste modifiche. Devo annullare il processo di avvio di npm, effettuare lo spostamento, salvare e quindi eseguire npm starte ora vedrà i file.

Nel mio caso rinomino un file componente, un codice VS aggiunge la seguente riga di codice per me:

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

Quindi ho risolto rimuovendo: ./node_modules/

import React, { Component } from "react";

Saluti!