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')
      }
    ]
  }
};

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. — Juho Vepsäläinen, May 07 '16 at 04:57
This could be related to https://stackoverflow.com/questions/37447858/webpack-adding-duplicates-of-runtime-into-bundle/37466820#37466820 . — Juho Vepsäläinen, May 29 '16 at 05:29

score 89 · Accepted Answer · answered Jul 10 '16 at 14:07

89

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.

answered Jul 10 '16 at 14:07

Emil Perhinschi

1,185
11
14

1

This works! No more double initialization! Only thing is I'm seeing style changes when "inject: false". Any insight on why that would be? – zero_cool Jul 18 '18 at 02:42
"style changes when" ... maybe css declarations were stepping on each other when loaded twice ? – Emil Perhinschi Aug 17 '18 at 13:05
4

This works, certainly, but it might be more direct to remove the template's `` tag that is the likely cause of the double inclusion. – ggorlen Mar 25 '20 at 03:29
Do note that if you are using Webpack (from scratch) with React, you must also remove `` from `index.js` – Naveen May 13 '21 at 15:41

score 8 · Answer 2 · answered May 22 '20 at 19:31

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:

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

All my code runs twice when compiled by Webpack

2 Answers2

Linked