0

I have a problem on compiling a react app. The module was not found and the error was.

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

Here is the file structure of the project.

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

Here is my file that contains JSX, filename: index.js

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

import MyInfo from './components/MyInfo'


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

Here is my file that contains the function. path and filename: 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

How can I locate component/MyInfo.js?

Thanks

Two
  • 512
  • 4
  • 17
  • 2
    You should change path import MyInfo: import MyInfo from '../components/MyInfo' – Ryan Nghiem Apr 08 '19 at 11:24
  • It doesnt allow to import on relative path outside src folder. This was the error: Relative imports outside of src/ are not supported. – Two Apr 08 '19 at 11:30

1 Answers1

3

Your import has an incorrect path based on your folder structure.

The path should be:

import MyInfo from './../components/MyInfo'
Suresh
  • 4,091
  • 28
  • 35
  • Thanks @sthotakura The error is: Relative imports outside of src/ are not supported. Is there a way I can import MyInfo outside or inside src folder? – Two Apr 08 '19 at 11:38
  • You may want to check this [answer](https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory) – Suresh Apr 08 '19 at 11:47
  • Thanks for the help. This works. Sorry for late response. – Two Sep 29 '19 at 07:26