ไม่สามารถแก้ไขโมดูล (ไม่พบ) ใน React.js

ฉันไม่อยากเชื่อเลยว่าฉันกำลังถามคำถามที่ชัดเจน แต่ฉันยังคงได้รับข้อผิดพลาดในบันทึกของคอนโซล

Console บอกว่าไม่พบโมดูลในไดเร็กทอรี แต่ฉันตรวจสอบการพิมพ์ผิดอย่างน้อย 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และเป็น (โฟลเดอร์ "header" มี "header.js")

อย่างไรก็ตาม React ยังคงแสดงข้อผิดพลาดนี้:

คอมไพล์ไม่สำเร็จ

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

การทดสอบ npmพูดในสิ่งเดียวกัน

วิธีที่เราใช้มัก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พบ สำหรับรายละเอียดความเข้าใจมากขึ้นก็สามารถอ่านได้ที่นี่

หากคุณสร้างแอปพลิเคชันด้วย react-create-app อย่าลืม set environment variable:

NODE_PATH=./src

หรือเพิ่ม.envไฟล์ลงในโฟลเดอร์รูทของคุณ

เพิ่มNODE_PATHเป็นตัวแปรสภาพแวดล้อมในการ.envเลิกและจะถูกแทนที่โดยการเพิ่ม"baseUrl": "./src"จะcompilerOptionsในหรือjsconfig.jsontsconfig.json

ข้อมูลอ้างอิง

ลบไฟล์ package-lock.json แล้วรัน

npm install

อ่านเพิ่มเติม

ในกรณีของฉันข้อความแสดงข้อผิดพลาดคือ

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

ในขณะที่ทุกอย่างอยู่ในไดเร็กทอรีที่ถูกต้อง

ฉันพบว่าการเปลี่ยนชื่อbody.jsxเป็นbody.jsแก้ไขปัญหา!

ดังนั้นฉันจึงเพิ่มรหัสนี้webpack.config.jsเพื่อแก้ไขjsxเป็นjs

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

แล้วสร้างข้อผิดพลาดหายไป!

ฉันคิดว่ามันเป็นการใช้ส่วนหัวสองครั้ง ฉันเพิ่งลองทำสิ่งที่คล้ายกันและทำให้เกิดปัญหาด้วย ฉันใช้ตัวพิมพ์ใหญ่ไฟล์คอมโพเนนต์ของฉันเพื่อให้ตรงกับไฟล์อื่น ๆ และใช้งานได้

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

ควรจะเป็น

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

ฉันมีปัญหาที่คล้ายกัน

สาเหตุ:

import HomeComponent from "components/HomeComponent";

วิธีการแก้:

import HomeComponent from "./components/HomeComponent";

หมายเหตุ: ./มาก่อนส่วนประกอบ คุณสามารถอ่านโพสต์ของ @Zac Kwan ด้านบนเกี่ยวกับวิธีการใช้งานimport

ฉันประสบปัญหาเดียวกันเมื่อฉันสร้างแอปโต้ตอบใหม่ฉันลองใช้ตัวเลือกทั้งหมดในhttps://github.com/facebook/create-react-app/issues/2534 แต่ก็ไม่ได้ผล ฉันต้องเปลี่ยนพอร์ตสำหรับแอพใหม่แล้วมันก็ใช้งานได้ ตามค่าเริ่มต้นแอปจะใช้พอร์ต 3000 ฉันเปลี่ยนพอร์ตเป็น 8001 ใน package.json ดังนี้:

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

มีวิธีที่ดีกว่าในการจัดการการนำเข้าโมดูลใน React App ของคุณ ลองทำสิ่งนี้:

เพิ่มjsconfig.jsonไฟล์ลงในโฟลเดอร์ฐานของคุณ นั่นคือโฟลเดอร์เดียวกับที่มี package.json ของคุณ จากนั้นกำหนดการนำเข้า URL พื้นฐานของคุณในนั้น:

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

ตอนนี้แทนที่จะโทรหา../../คุณสามารถทำได้อย่างง่ายดายแทน:

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

สังเกตว่า 'Components /' แตกต่างจาก '../components/'

วิธีนี้ดีกว่า

แต่ถ้าคุณต้องการนำเข้าไฟล์ในไดเร็กทอรีเดียวกันคุณสามารถทำได้ด้วย:

import logo from './logo.svg'

คุณต้องอยู่ในโฟลเดอร์โครงการถ้าคุณอยู่srcหรือpublicคุณต้องออกมาจากโฟลเดอร์เหล่านั้น สมมติว่าชื่อโครงการตอบกลับของคุณคือ 'hello-react' แล้วcd hello-react

คุณควรเปลี่ยนหัวนำเข้าจาก '/ src / components / header / header 'ถึง

นำเข้าส่วนหัวจาก " .. / src / components / header / header"

คุณสามารถลองรัน 'npm install' ในโฟลเดอร์แอพ วิธีนี้อาจช่วยแก้ปัญหาได้ มันได้ผลสำหรับฉัน

ฉันประสบปัญหาเดียวกันและฉันได้รับการแก้ไขแล้ว ดูว่าindex.jsไฟล์ของคุณอยู่ในsrcโฟลเดอร์หรือไม่จากนั้นคุณจะนำเข้าไฟล์อะไรโฟลเดอร์ที่มีนั้นจะต้องอยู่ในโฟลเดอร์ src ด้วย

นั่นหมายความว่าถ้าโฟลเดอร์ส่วนประกอบของคุณอยู่นอกsrcโฟลเดอร์ให้ลากเข้าไปในsrcโฟลเดอร์ในตัวแก้ไขของคุณเนื่องจากไฟล์ที่อยู่นอกsrcโฟลเดอร์จะไม่ถูกนำเข้า

จากนั้นคุณจะสามารถนำเข้าโดยใช้./components/header/header(ในกรณีนี้)

ตรวจสอบคำสั่งนำเข้าควรลงท้ายด้วยอัฒภาค หากพลาดประการใดคุณจะได้รับข้อผิดพลาดนี้

ตรวจสอบด้วยว่าคำสั่งการนำเข้าต่อไปนี้ถูกเพิ่มในส่วนประกอบของคุณหรือไม่

นำเข้า {threadId} จาก 'worker_threads';

ถ้าเป็นเช่นนั้นให้ลบบรรทัดนั้นออก มันใช้ได้กับฉัน

สำหรับฉันฉันมีอินพุตที่ถูกต้อง แต่npm startอาจมีข้อผิดพลาดได้ (อย่างน้อยก็ใช้กับ Hyper Terminal บน Windows และ Linux) ถ้าฉันย้ายไฟล์ไปยังโฟลเดอร์อื่น npm start จะไม่รับการเปลี่ยนแปลงเหล่านี้ ฉันต้องการยกเลิกกระบวนการเริ่มต้น npm ทำการย้ายบันทึกแล้วเรียกใช้npm startและมันจะเห็นไฟล์ทันที

ในกรณีของฉันฉันเปลี่ยนชื่อไฟล์คอมโพเนนต์ VS Code จะเพิ่มบรรทัดด้านล่างของโค้ดให้ฉัน:

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

ดังนั้นฉันจึงแก้ไขโดยการลบ: ./node_modules/

import React, { Component } from "react";

ไชโย!