React compile error using “create-react-app”

Question

I am suffering compile failure using "create-react-app". The message I've gotten is as below.

__

./src/App.js Module not found: You attempted to import /Contact which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

__

Weird thing is that I certainly have "/Contact" file inside of src folder while The message says that I don't. Here is my folder tree.

Folder structure

And here is my App.js code.

import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';

class App extends Component {
  render() {
    return (
      <div>
        <PhoneForm />
      </div>
    );
  }
}

export default App;

Feels like I am missing some kind of basic setting here. Please have mercy on me and help me to figure this out.

import PhoneForm from './components/PhoneForm' Where is the PhoneForm component? why are you mentioning as Contact? — Ravi Theja
That's why it's always better to use named exports instead of default ones to avoid such confusion — Ilya Kushlianski

Ilya Kushlianski Ilya Kushlianski · Accepted Answer · 2019-11-29T19:33:43

If your App.js is in components folder, then you should use

import PhoneForm from './PhoneForm';

Note that you don't have to prepend the import with ./components.

But I don't see your PhoneForm component here altogether. So this might also be the source of error.

React compile error using “create-react-app”

1 Answers