Module Not Found Can T Resolve Material Ui Core

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

Консоль говорит, что не может найти модуль в каталоге, но я проверил по крайней мере 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';

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

Module Not Found Can T Resolve Material Ui Core

Source: https://utyatnishna.ru/info/13850483/cant-resolve-module-not-found-in-reactjs

Share :