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
It should be
import addUser from './addUser.js'
As you are exporting
addUser
as adefault export
.export default addUser;
//defaul export.If you want to use
named export
theaddUser
should be exported asexport {addUser};
Now,
import { addUser } from './addUser
// it should be work.