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