'why is webpack generated code getting executed twice?

The browser console shows that the code is executed twice:

    [HMR] Waiting for update signal from WDS...
    index.ts:1 WebPack - Learn - begin
    log.js:24 [HMR] Waiting for update signal from WDS...
    index.ts:1 WebPack - Learn - begin
    2index.js:519 [webpack-dev-server] Hot Module Replacement enabled.
    2index.js:519 [webpack-dev-server] Live Reloading enabled.

As you can see, the "WebPack - Learn - begin" is executed twice.

webpack.config.js


    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const path = require('path');
    
    module.exports = {
        entry: './src/index.ts',
        devtool: 'inline-source-map',
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader',
                    exclude: /node_modules/
                }
            ]
        },
        resolve: {
            extensions: ['.ts', '.js', '.tsx']
        },
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
    
        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, "src", "index.html")
            })
        ],
    
        devServer: {
            static: './dist'
        }
    };

tsconfig.json


    {
        "compilerOptions": {
            "outDir": "./dist/",
            "noImplicitAny": true,
            "module": "es6",
            "moduleResolution": "node",
            "sourceMap": true,
            "target": "es6",
            "typeRoots": [
                "node_modules/@types"
            ],
            "lib": [
                "es2017",
                "dom"
            ]
        }
    }

index.ts


    console.log("WebPack - Learn - begin")

index.html


    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>WebPack - Learn</title>
    
        <style>
            body {
                font-family: 'Arial';
                background: #ececec;
            }
    
            ul {
                list-style-type: none;
                padding: 20px;
            }
    
            li {
                padding: 20px;
                background: white;
                margin-bottom: 5px;
            }
        </style>
    </head>
    
    <body>
        <ul id="output"></ul>
    
        <script src="/bundle.js"></script>
    </body>
    
    </html>

package.json


    {
      "name": "TestWebPackServer02",
      "version": "1.0.0",
      "description": "https://www.valentinog.com/blog/webpack/",
      "main": "index.js",
      "scripts": {
        "dev": "webpack --mode development --watch",
        "start": "webpack serve --mode development --open"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/xyz/TestWebPackServer02.git"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "bugs": {
        "url": "https://github.com/xyz/TestWebPackServer02/issues"
      },
      "homepage": "https://github.com/xyz/TestWebPackServer02#readme",
      "devDependencies": {
        "html-webpack-plugin": "^5.3.2",
        "rxjs": "^7.3.0",
        "ts-loader": "^9.2.5",
        "typescript": "^4.4.3",
        "webpack": "^5.52.1",
        "webpack-cli": "^4.8.0",
        "webpack-dev-server": "^4.2.1"
      }
    }

stackOverflow complained that my post contained mostly code and wanted some more details. So, I'm adding this text at the bottom to satisfy stackOverflow.

Thanks.

Solution 1:^[1]

Is that really all of your code, or could it be that within your code you import a module twice with slightly different typing? As an example:

import {myFunc} from './mySrciptFile.js';

versus

import {myFunc} from './myScriptFile';

I had a case where an import statement that was written without file extension caused the code outside the functions present on that file to be loaded and executed twice.

// myScriptFile.js
import * as MYCLASS from './myClass.js';
function myFunc(){
  // Do whatever...
}
export {myFunc};

// This code is executed when the script file is loaded
console.log("Start setup");
let myVar = new MYCLASS.MyClass();

Resulted in following output:

Start setup    myScriptFile.js:9
Start setup    myScriptFile:9

This because myScriptFile was once imported in HTML with a script tag <script src="./myScriptFile.js" type = "module"></script> and once was referenced within the 'myClass.js' file, but this time without file extension.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'why is webpack generated code getting executed twice?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]