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