I am working on a library, and then injecting it into a html document using Webpack. I need to enable HMR on the project. However, when I enable it, the library won't get loaded properly. Here is what I get from the console:
Library.init()is not a function.
and library gets loaded as an empty object whereas by turning HMR off, it gets loaded correctly.
Here is my Webpack configuration:
{
...baseConfigs,
entry: './src/index.ts',
output: {
path: __dirname + '/dist',
filename: `lib.js`,
library: {
name: 'Library',
type: 'window',
},
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/',
port: 8000,
open: true,
hot: true,
},
plugins: [
...baseConfig.plugins,
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'demo', 'index.html'),
inject: 'head',
}),
new webpack.HotModuleReplacementPlugin(),
],
}
and the entry point - index.ts - is like this:
import {main, subscribe} from './main' // Library's main functionality imported
export {
init,
subscribe,
}
if(module.hot){
module.hot.accept('./index.ts')
}
Am I missing a piece of the puzzle?