ReactJS - Can't Import Component from Another File

Question

I am attempting to import a component from one file to another in ReactJS. I've pasted my code below showing how I am currently trying to import the addUser component into App.js. The console only shows the App component being triggered but not addUser. I thought it may be an issue with webpack but my package.json file has webpack in it. Also, the code compiles and runs and no error is thrown.

The code in my App.js file:

import React, { Component } from 'react';
import '../styles/App.css';
import * as firebase from 'firebase';
import { addUser } from './addUser.js';

class App extends Component {
  render() {
    console.log('I was triggered during render App');
    return (
      <addUser />
    );
  }
}

export default App;

The code in my addUser.js file:

import React, { Component } from 'react';
import '../styles/addUser.css';
import * as firebase from 'firebase';

class addUser extends Component {
  render() {
    console.log('I was triggered during render addUser');
    return (
       <div>Hello world!</div>
      );
  }
}

export default addUser;

package.json:

{
  "name": "firestore-practice",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "firebase": "^5.1.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4",
    "webpack": "^3.11.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.1.4"
  }
}

The structure of my files: File Structure

Answer 1

It should be

import addUser from './addUser.js'

As you are exporting addUser as a default export.

export default addUser; //defaul export.

If you want to use named export the addUser should be exported as

export {addUser};

Now,

import { addUser } from './addUser // it should be work.

Answer 2

React component names must start with a capital letter.

Rename your file to AddUser.js, class name to AddUser and export,import and use the component as AddUser

import AddUser from './AddUser';

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

export default App;

In your Adduser component,

import React, { Component } from 'react';

class AddUser extends Component {
  render() {
    return (
       <div>Hello world!</div>
      );
  }
}

export default AddUser;

Answer 3

React automatically assumes .js file extension on file import. Thus, you want to remove the .js extension. You'll also want to remove the curly braces around the import name.

Change the import to this:

import addUser from './addUser';

As a side-note, you may want to consider placing component files in a different directory to make file management much easier as you scale the app.

Answer 4

You don't need to put extension in import and as you are exporting default, you don't need to import in curly bracket

import adduser from './addUser'