Không thể giải quyết mô-đun (không tìm thấy) trong React.js

Tôi không thể tin rằng tôi đang hỏi một câu hỏi rõ ràng, nhưng tôi vẫn gặp lỗi trong nhật ký bảng điều khiển.

Console nói rằng nó không thể tìm thấy mô-đun trong thư mục, nhưng tôi đã kiểm tra lỗi chính tả ít nhất 10 lần. Dù sao, đây là mã thành phần.

Tôi muốn hiển thị Header trong 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;

Đây là Headerthành phần

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

Tôi đã kiểm tra ít nhất 10 lần rằng mô-đun đang ở vị trí này ./src/components/header/headervà nó là (thư mục "tiêu đề" chứa "tiêu đề.js").

Tuy nhiên, React vẫn gặp lỗi này:

Không biên dịch được

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

thử nghiệm npm cũng cho biết điều tương tự.

Cách chúng ta thường sử dụng importlà dựa trên đường dẫn tương đối.

.và ..tương tự như cách chúng tôi sử dụng để điều hướng trong terminalnhư cd ..ra khỏi thư mục và mv ~/file .chuyển fileđến thư mục hiện tại.

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

Trong trường hợp của bạn, App.jslà trong src/thư mục trong khi header.jsở trong src/components. Đối với importbạn sẽ làm import Header from './components/header'. Điều này tạm dịch là trong thư mục hiện tại của tôi, tìm thư mục thành phần có chứa tệp tiêu đề.

Bây giờ, nếu từ header.js, bạn cần importmột cái gì đó từ card, bạn sẽ làm điều này. import Card from '../containers/card'. Điều này dịch sang, di chuyển ra khỏi thư mục hiện tại của tôi, tìm kiếm các vùng chứa tên thư mục có tệp thẻ.

Đối với import React, { Component } from 'react', điều này không bắt đầu với một ./hoặc ../hoặc /do đó nút sẽ bắt đầu tìm kiếm các mô-đun trong node_modulestheo một thứ tự cụ thể cho đến khi reactđược tìm thấy. Để hiểu chi tiết hơn, bạn có thể đọc tại đây .

Nếu bạn tạo ứng dụng bằng react-create-app, đừng quên đặt biến môi trường:

NODE_PATH=./src

Hoặc thêm vào .envtệp vào thư mục gốc của bạn;

Việc thêm NODE_PATHlàm biến môi trường trong .envkhông được dùng nữa và được thay thế bằng cách thêm "baseUrl": "./src", compilerOptionsvào jsconfig.jsonhoặc tsconfig.json.

Tài liệu tham khảo

Đã xóa tệp package-lock.json và sau đó chạy

npm install

Đọc thêm

trong trường hợp của tôi, Thông báo lỗi là

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

Trong khi mọi thứ đều ở đúng thư mục.

Tôi thấy rằng đổi tên body.jsxđể body.jsgiải quyết vấn đề!

Vì vậy, tôi đã thêm mã này vào webpack.config.jsđể giải quyết jsxnhưjs

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

Và sau đó lỗi xây dựng biến mất!

Tôi nghĩ rằng đó là việc sử dụng hai lần tiêu đề. Tôi vừa thử một cái gì đó tương tự và cũng gây ra vấn đề. Tôi viết hoa tệp thành phần của mình để khớp với những tệp khác và nó đã hoạt động.

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

Nên là

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

Tôi đã có một vấn đề tương tự.

Nguyên nhân:

import HomeComponent from "components/HomeComponent";

Giải pháp:

import HomeComponent from "./components/HomeComponent";

LƯU Ý: ./ là trước các thành phần. Bạn có thể đọc bài đăng của @Zac Kwan ở trên về cách sử dụngimport

Tôi gặp phải vấn đề tương tự khi tạo ứng dụng phản ứng mới, tôi đã thử tất cả các tùy chọn trong https://github.com/facebook/create-react-app/issues/2534 nhưng không giúp được gì. Tôi đã phải thay đổi cổng cho ứng dụng mới và sau đó nó hoạt động. Theo mặc định, các ứng dụng sử dụng cổng 3000, tôi đã thay đổi cổng thành 8001 trong package.json như sau:

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

Bạn cần phải ở trong thư mục dự án, nếu bạn đang ở trong srchoặc publicbạn phải ra khỏi các thư mục đó. Giả sử tên dự án phản ứng của bạn là 'hello-react' thìcd hello-react

bạn nên thay đổi tiêu đề nhập từ ' . / src / components / header / header 'to

nhập Tiêu đề từ ' .. / src / components / header / header'

Bạn có thể thử thực hiện 'cài đặt npm' trong thư mục ứng dụng. Điều này cũng có thể giải quyết vấn đề. Nó đã làm việc cho tôi.

Tôi đã đối mặt với vấn đề tương tự và tôi đã giải quyết nó. Xem liệu index.jstệp của bạn có nằm trong srcthư mục hay không, sau đó bạn đang nhập tệp nào, thư mục chứa tệp đó cũng phải nằm trong thư mục src.

Điều đó có nghĩa là nếu thư mục thành phần của bạn nằm ngoài srcthư mục, chỉ cần kéo nó vào bên trong srcthư mục trong trình chỉnh sửa của bạn vì các tệp bên ngoài srcthư mục không được nhập.

Sau đó, bạn sẽ có thể nhập bằng cách sử dụng ./components/header/header(trong trường hợp này)

Có một cách tốt hơn bạn có thể xử lý việc nhập các mô-đun trong Ứng dụng React của mình. Cân nhắc làm điều này:

Thêm jsconfig.jsontệp vào thư mục cơ sở của bạn. Đó là cùng một thư mục chứa package.json của bạn. Tiếp theo, xác định các lần nhập URL cơ sở của bạn trong đó:

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

Thay vì gọi điện, ../../bạn có thể dễ dàng thực hiện việc này:

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

Lưu ý rằng 'thành phần /' khác với '../components/'

Nó gọn gàng hơn theo cách này.

Nhưng nếu bạn muốn nhập tệp trong cùng một thư mục, bạn cũng có thể làm điều này:

import logo from './logo.svg'

Kiểm tra các câu lệnh nhập, nó phải được kết thúc bằng dấu chấm phẩy. Nếu bạn bỏ lỡ bất kỳ, bạn sẽ gặp lỗi này.

Đồng thời kiểm tra xem câu lệnh nhập sau được thêm vào thành phần của bạn hay không.

nhập {threadId} từ 'worker_threads';

Nếu vậy loại bỏ dòng đó. Nó làm việc cho tôi.

Trong trường hợp của tôi, tôi đổi tên tệp thành phần, Mã VS thêm dòng mã bên dưới cho tôi:

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

Vì vậy, tôi đã sửa bằng cách xóa: ./node_modules/

import React, { Component } from "react";

Chúc mừng!