Tidak dapat menyelesaikan modul (tidak ditemukan) di React.js

Saya tidak percaya bahwa saya mengajukan pertanyaan yang jelas, tetapi saya masih mendapatkan kesalahan di log konsol.

Konsol mengatakan bahwa ia tidak dapat menemukan modul di direktori, tetapi saya telah memeriksa setidaknya 10 kali kesalahan ketik. Bagaimanapun, inilah kode komponennya.

Saya ingin membuat Header di 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;

Ini adalah Headerkomponennya

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

Saya telah memeriksa setidaknya 10 kali bahwa modul ada di lokasi ini ./src/components/header/header, dan itu (folder "header" berisi "header.js").

Namun, React masih memberikan kesalahan ini:

Gagal mengkompilasi

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

npm test mengatakan hal yang sama.

Cara yang biasa kami gunakan importdidasarkan pada jalur relatif.

.dan ..mirip dengan cara yang kita gunakan untuk menavigasi terminalseperti cd ..untuk keluar dari direktori dan mv ~/file .untuk memindahkan fileke direktori saat ini.

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

Dalam kasus Anda, App.jsberada dalam src/direktori saat header.jsberada dalam src/components. Untuk importAnda akan melakukannya import Header from './components/header'. Ini kira-kira diterjemahkan ke dalam direktori saya saat ini, temukan folder komponen yang berisi file header.

Sekarang, jika dari header.js, Anda perlu importsesuatu dari card, Anda akan melakukan ini. import Card from '../containers/card'. Ini diterjemahkan ke, keluar dari direktori saya saat ini, cari wadah nama folder yang memiliki file kartu.

Adapun import React, { Component } from 'react', ini tidak dimulai dengan ./atau ../atau /karena simpul akan mulai mencari modul dalam node_modulesdalam urutan tertentu sampai reactditemukan. Untuk pengertian yang lebih detail bisa dibaca disini .

Jika Anda membuat aplikasi dengan react-create-app, jangan lupa setel variabel lingkungan:

NODE_PATH=./src

Atau tambahkan ke .envfile ke folder root Anda;

Menambahkan NODE_PATHsebagai variabel lingkungan di .envtidak digunakan lagi dan diganti dengan menambahkan "baseUrl": "./src", ke compilerOptionsdalam jsconfig.jsonatau tsconfig.json.

Referensi

Menghapus file package-lock.json & kemudian menjalankan

npm install

Baca lebih lanjut

dalam kasus saya, Pesan kesalahannya adalah

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

Sementara semuanya ada di direktori yang benar.

Saya menemukan bahwa mengganti nama body.jsxmenjadibody.js menyelesaikan masalah!

Jadi saya menambahkan kode ini webpack.config.jsuntuk menyelesaikan jsxsebagaijs

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

Dan kemudian kesalahan build hilang!

Saya pikir ini adalah penggunaan ganda dari header. Saya baru saja mencoba sesuatu yang serupa dan juga menyebabkan masalah. Saya menggunakan huruf besar file komponen saya untuk mencocokkan yang lain dan berhasil.

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

Seharusnya

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

Saya memiliki masalah serupa.

Sebab:

import HomeComponent from "components/HomeComponent";

Larutan:

import HomeComponent from "./components/HomeComponent";

CATATAN: ./ sebelum komponen. Anda dapat membaca posting @Zac Kwan di atas tentang cara menggunakanimport

Saya menghadapi masalah yang sama ketika saya membuat aplikasi react baru, saya mencoba semua opsi di https://github.com/facebook/create-react-app/issues/2534 tetapi tidak membantu. Saya harus mengubah port untuk aplikasi baru dan kemudian berhasil. Secara default, aplikasi menggunakan port 3000. Saya mengubah port menjadi 8001 di package.json sebagai berikut:

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

Anda harus berada di folder proyek, jika Anda masuk srcatau publicharus keluar dari folder itu. Misalkan nama react-project Anda adalah 'hello-react'cd hello-react

Anda harus mengubah import Header dari ' ./ src / komponen / header / header 'ke

impor Header dari ' .. / src / components / header / header'

Anda dapat mencoba menjalankan 'npm install' di folder aplikasi. Ini mungkin juga menyelesaikan masalah. Itu berhasil untuk saya.

Saya menghadapi masalah yang sama dan saya menyelesaikannya. Lihat apakah index.jsfile Anda ada di dalam srcfolder, lalu file apa pun yang Anda impor, folder yang berisi itu juga harus berada di dalam folder src.

Itu berarti jika folder komponen Anda berada di luar srcfolder, seret saja ke dalam srcfolder di editor Anda karena file di luarsrc folder tidak diimpor.

Kemudian Anda akan dapat mengimpor menggunakan ./components/header/header(dalam kasus ini)

Ada cara yang lebih baik untuk menangani impor modul di Aplikasi React Anda. Pertimbangkan untuk melakukan ini:

Tambahkan jsconfig.jsonfile ke folder dasar Anda. Itu adalah folder yang sama yang berisi package.json Anda. Selanjutnya tentukan impor URL dasar Anda di dalamnya:

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

Sekarang daripada menelepon, ../../Anda dapat dengan mudah melakukan ini:

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

Perhatikan bahwa 'komponen /' berbeda dari '../components/'

Lebih rapi seperti ini.

Tetapi jika Anda ingin mengimpor file dalam direktori yang sama, Anda juga dapat melakukan ini:

import logo from './logo.svg'

Periksa pernyataan import. Ini harus diakhiri dengan titik koma. Jika Anda melewatkan satu pun, Anda akan mendapatkan kesalahan ini.

Juga periksa apakah pernyataan import berikut ditambahkan ke dalam komponen Anda.

impor {threadId} dari 'worker_threads';

Jika demikian, hapus garis itu. Ini bekerja untuk saya.

Dalam kasus saya, saya mengganti nama file komponen, VS Code menambahkan baris kode di bawah ini untuk saya:

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

Jadi saya perbaiki dengan menghapus: ./node_modules/

import React, { Component } from "react";

Bersulang!