React: Failed to compile; index.js

Question

So I decided to learn React and on the very first project I got an error message.

Failed to compile

./src/index.js

Attempted import error: './App' does not contain a default export (imported as 'App').

It's simple "Hello World" code. I have 2 files for that.

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';

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

HelloWorld.js

import React, { Component } from 'react';
 
class HelloWorld extends Component {
  render() {
    return (
      <div className="helloContainer">
        <h1>Hello, world!</h1>
      </div>
    );
  }
}
 
export default HelloWorld;

I read every post about this problem, none of them works. I also read that it's usually problem with reactstrap, but I don't have it installed.

Any help would be appreciated.

You need to show us your ./src/index.js file code since that is where the error is saying the problem is. — Josh Pittman
– Josh Pittman, Commented Feb 2, 2019 at 16:00

gpmetheny · Accepted Answer · 2019-02-02 16:03:40Z

Your compiler is telling you that you're not exporting anything from App.js, and that this is an error within your index.js (which you haven't shown code for, but that's where you would typically call ReactDOM.render).

Your App.js should look more like your HelloWorld.js (an exported component), and you should be calling ReactDOM.render inside of index.js. This is the only time you'll call ReactDOM.render.

index.js

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

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

App.js

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <HelloWorld />
      </div>
    );
  }
}

export default App;

HelloWorld.js

import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return (
      <div className="helloContainer">
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

export default HelloWorld;

Josh Pittman · Accepted Answer · 2019-02-02 16:01:26Z

1

Rename the App.js file to index.js and delete any other index files.

answered Feb 2, 2019 at 16:01

Josh Pittman

7,3748 gold badges45 silver badges68 bronze badges

Collectives™ on Stack Overflow

React: Failed to compile; index.js

2 Answers 2

index.js

App.js

HelloWorld.js

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

index.js

App.js

HelloWorld.js

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related