Не удается разрешить модуль (не найден) в 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 test говорит то же самое.

Обычно мы используем 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будет найден. Для более детального понимания его можно прочитать здесь .

Если вы создаете приложение с помощью 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должны выйти из них. Предположим, что название вашего проекта реакции - 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(в этом случае)

Есть лучший способ справиться с импортом модулей в приложение React. Попробуйте сделать это:

Добавьте 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'

Проверьте операторы импорта. Они должны заканчиваться точкой с запятой. Если вы что-то пропустите, вы получите эту ошибку.

Также проверьте, добавлен ли в ваш компонент следующий оператор импорта.

импортировать {threadId} из worker_threads;

Если да, удалите эту строку. Меня устраивает.

В моем случае я переименовал файл компонента, VS Code добавил для меня следующую строку кода:

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

Поэтому я исправил, удалив: ./node_modules/

import React, { Component } from "react";

Ура!