vuejs : "this" in 3rd party library is "undefined"

Question

My third party script has code of the following format

(   function initialMethod(scope, factory) {
        // 'scope' here is UNDEFINED when used in Vue
        // but it is fine in React and Angular
    } (this, function function1(param1) {
              .....
             }       
      )          
    ....    
    function MyMethod() {....}
    ....
)

I import a method from this third party library using the following

import {MyMethod} from 'ThirdPartyScript'

When I do this in React or Angular it works perfectly fine.

When using Vue it fails. The "scope"/"this" is undefined. Sample Vue code

<template>
    <div id="app">
       <p>Hello</p>
    </div>
</template>


<script>
    import {MyMethod} from 'ThirdPartyScript';

    export default {
        name: 'app',        
        created: function () {
          this.initApp();
        },
        methods: {
            initApp: function () {                
                //const myResult = MyMethod();
            } 
    }
</script>

This error appears as soon as i include the "import" statement for the 3rd party library (as apposed to when I call a method from it) as when I call the import statement I believe it executes the "initialMethod" as has () after it telling it to execute.

Why is this different in Vue? Do i have to set up something different when using Vue?

Environment info

I used Vue CLI to create my project, the package.json has the following versions mentioned

dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",        
},
"devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
 },

Update

if i change the "this" in the 3rd party library to "window" I get a little further, but now on the following call

const myResult = MyMethod();

I get the error "Object(...) is not a function" for "MyMethod"

I would guess that in Vue it's running under strict mode, which makes the default value of `this` `undefined` instead of `window`. But I can't really say if *that* is your issue - you might also be calling it differently. See [How to access the correct `this` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) and [How does the “this” keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) for some background. — VLAZ, Oct 04 '19 at 10:53
This is very specific to how build tools are configured and not anything else. It looks like third-party lib relies on that it's evaluated in global scope with `this === window`, which is a mistake in modern JS. Please, specify the lib, so the problem could be addressed. If you're using Vue CLI as build tool, please, specify its version and configuration. — Estus Flask, Oct 04 '19 at 12:05
And here is interesting problem and solution about how to call method from global scope in vue: https://forum.vuejs.org/t/call-method-in-app-vue-from-window-global-scope/65273 — N. Djokic, Oct 04 '19 at 12:34
Estus Flask - I assumed it must be something like the environment, seeing as the exact same JavaScript file works in React and Angular. I have added the Vue versions in my original post as taken from package.json. Unfortunately I can't share the lib as its not a public one — se22as, Oct 04 '19 at 13:07

score 0 · Accepted Answer · answered Oct 08 '19 at 10:30

I have finally fixed this issue.

This issue only presents when I have a local copy of the library in my project (I had it under "scripts" with other javascript util files).

When I added the library by adding it to package.json/package-lock.json and then ran "npm install" the library loads correctly and I no longer see any errors

package.json

"dependencies": {
    "theLibrary": "https://.......",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3"
},

package-lock.json

"dependencies": {
    ......
    "theLibrary": {
        "version": "https:.....",
         "integrity": ".....
    },
    ......
}

npm command

npm install theLibrary

vuejs : "this" in 3rd party library is "undefined"

1 Answers1