Accessing a Javascript class's method from outside its scope

user_10056258 0
Viewed 236

I'm bundling a JS class, using webpack-4, but I cannot access any of the methods and properties of it from outside its scope. I followed some of the suggestions given here but I'm still stuck. Below you'll see a simplified version of what I need to achieve. Any suggestions on how to get this to work would be greatly appreciated. Thank you!

My webpack.config:

output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../../assets/js'), 
        library: 'MyModule',
        libraryTarget: 'var',
    },

The class file, Main.js:

export  class  Main{
  prop1 = 'This is Main.prop1';

  static hello = ()=>{
    console.log('Hello from Main');
  }

  static hi = function(){
    console.log('Hi from Main');
  }
}

Inside test.html:

<script src="./Main.js"></script>
<script>
window.onload = function(){
        var mainUX = MyModule;
        console.log(mainUX); // see output below**
        console.log(mainUX.prop1) // outputs 'undefined'
        mainUX.hello(); // Outputs Uncaught TypeError: mainUX.hello is not a function
        mainUX.hi();
       };
</script>

** In the console I get:

Object { Main: Getter, … }
​Main: 
​__esModule: true
​Symbol(Symbol.toStringTag): "Module"
​<get Main()>: function js()​
<prototype>: Object { … }
​​__defineGetter__: function __defineGetter__()
​​__defineSetter__: function __defineSetter__()
​​__lookupGetter__: function __lookupGetter__()
​​__lookupSetter__: function __lookupSetter__()
​​__proto__: 
​​constructor: function Object()
​​hasOwnProperty: function hasOwnProperty()
​​isPrototypeOf: function isPrototypeOf()
​​propertyIsEnumerable: function propertyIsEnumerable()
​​toLocaleString: function toLocaleString()
​​toString: function toString()
​​valueOf: function valueOf()
​​​length: 0
​​​name: "valueOf"
webpack-4 module class scope javascript
2 Answers

Instead of <script src="./Main.js"></script> you should just use import Main from './main.js' in your last script tag

user_136944350

After a whole day trying to find an answer to my issue, I came across this article. It is very thorough, easily to follow, and my issue got solved right away. Below I am attaching the code with the corrections in case someone finds it useful.

I had to change the webpack.config file, and add default to the class export.

webpack.config:

output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../../assets/js'), 
        library: '',
        libraryExport: '',
        libraryTarget: 'umd',
        globalObject: 'this',
    },

The class file, Main.js:

export default class Main{

  prop1 = 'This is Main.prop1';

  hello = ()=>{
    console.log('Hello from inside MainUX');
  }

  hi = function(){
    console.log('Hi from Main');
  }
}

Inside test.html:

// in the head:
<script src="./Main.js"></script>

// elsewhere in the html document
<script>
    const Main = window.default;
    const mainUX = new Main();
    console.log(Main)
    mainUX.hi();
</script>
user_100562580
Related