I’m using Webpack to import a javascript file that has a single class.
my_class.js
console.log('hello from my_class');
class myClass {
// ...
}
index.js
import './my_class.js';
webpack.config.js
const path = require('path')
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
I’m trying to use this class on a page.
index.html
<script src="./dist/bundle.js"></script>
<script>
const myClass = new myClass();
</script>
I am able to seem my console log ("hello from my_class") but myClass
is showing up as undefined.
Uncaught ReferenceError: myClass is not defined
What do I need to do such that myClass
is exported and available in the markup?
Firstly you should export the class.
And for browsers you should use IIFE or UMD format:
2021 and webpack thinks federated apps are higher priority than adding ES module support 🤷♂️ Use rollup if you don’t want to use UMD.
And reference:
someLibName.myClass