CODEWITHSUNDEEP
javascriptgoogle-chromeduplicates
Inigo
Inigo

Reputation: 351

Chrome VM files duplicate javascript

I have a problem developing a website. I am using chrome to debug javascript functions. On one of my pages I see the following:

screenshot of the problem

You can see that my own javascript file gets executed, search.js. There is a duplicate of this file, called VM1769. This file also executes the same code, so a search request is sent twice.

I searched around, and saw someone solve this problem by disabling cache (while DevTools is open), but this did not work for me. I tried another version of Chrome, the problem is still here.

Does anyone have a solution?

Upvotes: 10

Views: 4096

Answers (4)

Alex
Alex

Reputation: 193

I had the same problem. In the template on my server I put my script tag inside of the main content container.

{% block content %}
    {% block js %}
        <script src='path/toJSFile.js'></script>
    {% endblock %}
{% endblock %}

Which means that after rendering my script was not at the bottom of the <body> tag but inside of div.container and for some reason after rendering I had two duplicated scripts instead of one. One in a div.container another at the bottom of the <body> tag. Second one was inserted automatically for some reason.

So after I moved script outside of the div.content container my script started behave as I expect. No duplicates, no double fetch requests.

{% block content %}
    ...
{% endblock %}

{% block js %}
    <script src='path/toJSFile.js'></script>
{% endblock %}

Though my answer represents a snippet from a django template this approach should work in other cases as well. My suggestion is: you definitely want to place your script in a proper place (head or body) not inside of any divs.

Upvotes: 2

lazarus
lazarus

Reputation: 383

I was experiencing this issue.

For me it was caused by webpack injecting a second instance of my javascript files for debugging.

Removing the last line (mode: "development") eradicated the duplicate script.

const webpack = require('webpack');

module.exports = {
    entry: {
        a: [./scripts/xxx.ts"],
        b: ["./scripts/yyy.ts"],
        c: ["././scripts/zzz.ts"]
    },
    output: {
        // runtime asset location
        path: __dirname + "/dist/js/bundles",
        filename: '[name].js',
        library: "$",
        libraryTarget: "umd"
    },
    plugins: [
        new webpack.CleanPlugin(),
    ],
    module: {
        rules: [
            { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ },
        ],
    },
    resolve: {
        extensions: ['.ts'],
    },
    mode: "development"
};

Upvotes: 1

terraloader
terraloader

Reputation: 351

I got the same issue and found out that i really included the same JavaScript-File twice. So its not logical for me that Chrome shows the second execution as a VM-Script but it ended to do that when i deleted the duplicate include.

Upvotes: 7

Oswaldo Zapata
Oswaldo Zapata

Reputation: 693

Hi I was getting this also and this was causing to have two duplicated chooses in my autocomplete text input. What I did was just to create a global flag to know whether the script file was already executed or not. I know this is not the solution but I just wanted to share this here since blocking the execution of the VM file has fixed my problem but I need to know yet how definitely to resolve this.

enter image description here

Upvotes: 1

Related Questions