Не удалось скомпилировать: модуль не найден: не удается разрешить «./components/MyInfo» в «c:\xampp\htdocs\reactjs\src»

У меня проблема с компиляцией реагирующего приложения. Модуль не нашел и ошибка была.

Module not found: Can't resolve './components/MyInfo' in 'c:\xampp\htdocs\reactjs\src'

Вот файловая структура проекта.

reactjs
 |- git
 |   L ...
 |- components 
 |   L MyInfo.js 
 |- node_modules
 |- public 
 |   L index.html ...     
 |- src
 |    L index.js  

Вот мой файл, содержащий JSX, имя файла: index.js

import React from 'react'
import ReactDOM from 'react-dom'

import MyInfo from './components/MyInfo'


ReactDOM.render(
    <MyInfo />,
    document.getElementById('root')
);

Вот мой файл, содержащий функцию. путь и имя файла: reactjs/components/MyInfo.js

import React from 'react'

function MyInfo() {
    return (
        <div>
            <h1>J2</h1>
            <p>I am a gamer</p>
            <ul>
                <li>Tokyo Japan</li>
                <li>Ontario Canada</li>
                <li>Beijing China</li>
            </ul>
        </div>
    )
}

export default MyInfo

Как мне найти component/MyInfo.js?

Спасибо

Вы должны изменить путь импорта MyInfo: импортировать MyInfo из '../components/MyInfo'

Ryan Nghiem 08.04.2019 13:24

Он не позволяет импортировать по относительному пути вне папки src. Это была ошибка: относительный импорт вне src/ не поддерживается.

drakogemini2 08.04.2019 13:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
510
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш импорт имеет неверный путь в зависимости от структуры вашей папки.

Путь должен быть:

import MyInfo from './../components/MyInfo'

Спасибо @sthotakura. Ошибка: относительный импорт вне src/ не поддерживается. Есть ли способ импортировать MyInfo вне или внутри папки src?

drakogemini2 08.04.2019 13:38

Вы можете проверить этот отвечать

Suresh 08.04.2019 13:47

Спасибо за помощь. Это работает. Простите за поздний ответ.

drakogemini2 29.09.2019 09:26

Другие вопросы по теме