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

Ответ 1

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

Ответ 2

Если вы создаете приложение с помощьюact-create-app, не забудьте установить переменную среды:

NODE_PATH=./src

Или добавьте файл .env в корневую папку;

Ответ 3

Я делаю то же самое, что предложено выше, но он все еще показывает, что модуль не найден. Мой код App.js:

import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';

class App extends Component {

  render() {
    return (
      <div className="App">
        <Main />
      </div>
    );
  }
}

export default App;

Ответ 4

Вы должны быть в папке проекта, если вы находитесь в src или public, вы должны выйти из этих папок. Предположим, что ваше имя реагирующего проекта - "привет-реакция", тогда cd hello-react

Ответ 5

У меня была похожая проблема.

Причина:

import HomeComponent from "components/HomeComponent";

Решение:

import HomeComponent from "./components/HomeComponent";

ПРИМЕЧАНИЕ: ./ был до компонентов. Вы можете прочитать пост @Zac Kwan выше о том, как использовать import

Ответ 6

Вы должны изменить заголовок импорта с./src/components/header/header 'на

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

Ответ 7

Вы можете попробовать выполнить 'npm install' в папке приложения. Это также может решить проблему. Это сработало для меня.

Ответ 8

Я думаю, что это двойное использование заголовка. Я сам попробовал что-то похожее и тоже вызвал проблемы. Я прописал файл компонента в соответствие с остальными, и он сработал.

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

Должно быть

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

Ответ 9

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

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

import {threadId} из 'worker_threads';

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