React JS module not found

Question

All the files inside src directory(using create-react-app). I can't seem to import search.js component into App.js file

src/App.js file code -

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SearchProfile from './search';

    class App extends Component {
      render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
          </div>
        );
      }
    }

    export default App;

src/search.js file code -

import React, { Component } from 'react';

export default class SearchProfile extends React.Component {
  render() {
    return (
      <div className="search--box">
         <form onSubmit={this.handleForm.bind(this)}>
           <label><input type="search" ref="username" placeholder="Type Username + Enter"/></label>
         </form>
      </div>
    )
  }

  handleForm(e) {
   e.preventDefault();
    let username = this.refs.username.getDOMNode().value
    this.props.fetchProfile(username);
    this.refs.username.getDOMNode().value = '';
  }
}

I'm getting this error -

Failed to compile ./src/App.js
Module not found: Can't resolve './src/search'

I can't seem to find why it's not importing the module.

src/index.js file code -

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

If both file are in the same folder just use import SearchProfile from './search'; — gazdagergo
– gazdagergo, Commented Jul 29, 2018 at 12:21

Dread Boy · Accepted Answer · 2018-07-29 12:25:19Z

5

Your search.js has a couple of errors. You are not importing React as you do in app.js, you are exporting same class twice and you are importing App component. Try removing first and last line of file and import React, similar to how you do it App.js

answered Jul 29, 2018 at 12:25

Dread Boy

7226 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ashiquzzaman Kiron Over a year ago

Removed first and last line, imported react just like app.js still getting error

Dread Boy Over a year ago

Try restarting build and make sure search.js is in same folder as App.js. I copied your code and it's fine: stackblitz.com/edit/react-xsd6td?file=src%2Fsearch.js

Ashiquzzaman Kiron Over a year ago

I had file name - "search,js" instead of "search.js" . Thank you for the help. The height of my stupidity :'(

FK82 · Accepted Answer · 2018-07-29 12:33:51Z

1

Here's an MWE for your app.

There were a couple of errors:

no import for React in your App component file
you probably forgot to add the file name when importing SearchProfile (assuming it's in a directory "search" without "index.js" file)
double default export for SearchProfile

I marked those in the code.

answered Jul 29, 2018 at 12:33

FK82

5,0754 gold badges34 silver badges44 bronze badges

3 Comments

Ashiquzzaman Kiron Over a year ago

Edited the question, Please check now. All the files ( app.js / index.js / search.js ) in the src directory

FK82 Over a year ago

That works too: link.

Ashiquzzaman Kiron Over a year ago

I had file name - "search,js" instead of "search.js" . Thank you for the help. The height of my stupidity :'(

Collectives™ on Stack Overflow

React JS module not found

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related