My third-party script contains code in the following format
( function initialMethod(scope, factory) {
// 'scope' is undefined when used in Vue
// but it works fine in React and Angular
} (this, function function1(param1) {
.....
}
)
....
function MyMethod() {....}
....
)
To import a method from this third-party library, I use the following syntax
import {MyMethod} from 'ThirdPartyScript'
While this works perfectly in React or Angular, it fails in Vue. The "scope" or "this" gets undefined. Here's a sample Vue code snippet:
<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 occurs as soon as I include the "import" statement for the third-party library, which causes the execution of the "initialMethod" function due to the parentheses indicating execution.
Why does this behave differently in Vue? Do I need to configure something differently while using Vue?
Environment info
I used Vue CLI to set up my project, with the following versions mentioned in package.json:
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 third-party library to "window," I make some progress, but now I encounter an error on the following call:
const myResult = MyMethod();
The error message states "Object(...) is not a function" for "MyMethod."