4

When debugging my React Application using Chrome / React Developer Tools, I see two instances of my Application. Has anyone experienced this? Is it actually rendering two instances or is it just a developer bug?

image

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

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

Is my entire App.js, with App having a single export.

dance2die
  • 35,807
  • 39
  • 131
  • 194
Crutio
  • 41
  • 3

1 Answers1

2

I ran into the same issue when setting my react application up from scratch with babel and webpack.

I viewed page source from the browser and it turned out I included two script tags in the index.html file. I think that was because I included the first script tag manually referencing '/bundle.js'. When you run webpack dev server, it automatically includes it for you.

<!doctype html>
  <head>
   <meta charset="utf-8"/>
   <title>React App</title>
  </head>
  <body> 
    <div id="root"></div>
  </body>
</html>

so make sure your index.html looks this way before you run webpack-dev-server

Tochukwu Ali
  • 21
  • 5