CODEWITHSUNDEEP
reactjserror-handlingcompiler-errors
Josip Gudiček
Josip Gudiček

Reputation: 35

React: Failed to compile; index.js

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.

Upvotes: 2

Views: 4135

Answers (2)

gpmetheny
gpmetheny

Reputation: 220

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;

Upvotes: 3

Josh Pittman
Josh Pittman

Reputation: 7324

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

Upvotes: 1

Related Questions