Не вдається вирішити модуль (не знайдено) у React.js

Я не можу повірити, що я задаю очевидне питання, але я все одно отримую повідомлення про помилку в журналі консолі.

Консоль каже, що не може знайти модуль у каталозі, але я перевіряв помилки щонайменше 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 .перемістити a 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буде знайдений. Для більш детального розуміння його можна прочитати тут .

Якщо ви створюєте додаток за допомогою response-create-app, не забувайте встановлювати змінну середовища:

NODE_PATH=./src

Або додайте у .envфайл у свою кореневу папку;

Додавання в NODE_PATHякості змінної середовища в .envзастаріла і замінюється шляхом додавання "baseUrl": "./src", щоб compilerOptionsв jsconfig.jsonабо tsconfig.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"
  },

Вам потрібно бути в папці проекту, якщо ви перебуваєте в цій папці srcабо publicвам потрібно вийти з неї. Припустимо, тоді ваша назва проекту реагування - «привіт-реагуй»cd hello-react

вам слід змінити заголовок імпорту з " ./ src / components / header / header 'до

імпортувати заголовок із ' .. / src / components / header / header'

Ви можете спробувати виконати 'npm install' у папці програми. Це також може вирішити проблему. У мене це спрацювало.

Я стикався з тією ж проблемою і вирішив її. Перевірте, чи знаходиться ваш index.jsфайл у srcпапці, і будь-який файл, який ви імпортуєте, папка, що містить цей файл, також повинна знаходитись у папці src.

Це означає, що якщо папка ваших компонентів знаходиться поза srcпапкою, просто перетягніть її всередину srcпапки у вашому редакторі, оскільки файли за межами srcпапки не імпортуються.

Тоді ви зможете імпортувати за допомогою ./components/header/header(у цьому випадку)

Існує кращий спосіб впоратися з імпортом модулів у вашому додатку React. Подумайте про це:

Додайте jsconfig.jsonфайл у свою базову папку. Це та сама папка, що містить ваш package.json. Далі визначте в ньому імпорт базової URL-адреси:

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

Тепер замість виклику ../../ви можете легко зробити це:

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

Зверніть увагу, що "компоненти /" відрізняється від "../components/"

Це акуратніше.

Але якщо ви хочете імпортувати файли в тому ж каталозі, ви можете зробити це також:

import logo from './logo.svg'

Перевірте наявність імпортних операторів. Він повинен закінчуватися крапкою з комою. Якщо ви пропустите будь-яку, ви отримаєте цю помилку.

Також перевірте, чи додано наступний вираз імпорту у ваш компонент.

імпортувати {threadId} з 'worker_threads';

Якщо так, то видаліть цей рядок. Це працює для мене.

У моєму випадку я перейменовую файл компонента, код VS додає для мене наступний рядок коду:

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

Тож я виправив, видаливши: ./node_modules/

import React, { Component } from "react";

На здоров’я!