All my code runs twice when compiled by Webpack

Question

When I build my js bundle with webpack using webpack-dev-server my code runs twice every time. Not sure how to fix it.

Screenshot of Developer Tools console

My webpack config:

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  devtool: 'cheap-eval-sourcemap',
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/dev-server',
    path.join(__dirname, '../src/main')
  ],
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '../src/index.html')
    }),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../assets'),
        to: path.join(__dirname, '../dist/assets')
      }
    ])
  ],
  devServer: {
    contentBase: path.join(__dirname, '../dist'),
    outputPath: '/lol',
    hot: true
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel-loader'],
        include: path.join(__dirname, '../src')
      }
    ]
  }
};

Fernand

I've been seeing the same behavior for a while. It feels like a regression somewhere along the way. I don't see anything obviously wrong with the configuration as it's similar to what I use. You can get the same behavior if you run the dev server in inline mode (inline: true + drop those dev server related entries). I guess we would have to dig into the code to solve this. – Eous

This could be related to #37448358 . – Eous

Answer 1

in the template file you might have manually added a loading the bundle.

If you don't have the

inject: false 

option in

new HtmlWebpackPlugin({
    template: path.join(__dirname, '../src/index.html')
}),

the bundle will get added again.

Duplicature

This works! No more double initialization! Only thing is I'm seeing style changes when "inject: false". Any insight on why that would be? – Goblin

"style changes when" ... maybe css declarations were stepping on each other when loaded twice ? – Duplicature

This works, certainly, but it might be more direct to remove the template's <script src="index.js"></script> tag that is the likely cause of the double inclusion. – Avitzur

Do note that if you are using Webpack (from scratch) with React, you must also remove <React.StrictMode> from index.js – Filigree

Answer 2

Expanding a bit on @Emil Perhinschi's and @ggloren's earlier replies ...

Alternatively, if your ../src/index.html file does not rely on any script other than <script src="bundle.js"></script>, simply remove the latter from your index.html.

Per https://github.com/jantimon/html-webpack-plugin, the default for inject is true and ...

When passing true or 'body' all javascript resources will be placed at the bottom of the body element.

Thus your two instantiations of bundle.js are:

1. The <script src="bundle.js"></script> that you (presumably) coded, and
2. HtmlWebpackPlugin's injection "at the bottom of the body element".

Torrid