I was checking one of the libs I created with webpack5 and I had to dynamically load one of the scripts at run time. I noticed that if I try to that outside webpack I simply get an empty module as result. Then I think that is problem because of UMD let's check the window. I should find sg like window.mylib['module'] but still nothing there. This only happens on the browser. If I bundle any project that consumes those libraries with webpack it works completely fine.
webpack.config
{
optimization: {
minimize: true,
},
entry: entry,
output: {
clean: true,
publicPath: '',
filename: "[name]_[contenthash:4].js",
library: ["mylib", "[name]"],
libraryTarget: "umd", //tried a combination of a lot of configs still no global
},
plugins: [
new WebpackManifestPlugin(),
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
{
loader: 'file-loader',
options: {
context: './src/',
name: '[path][name]_[contenthash:4].css',
},
},
{
loader: 'sass-loader',
options: {
sassOptions: {
outputStyle: "compressed",
},
}
},
],
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-react',]
]
}
},
]
},
],
},
externalsType: 'umd',
externals: {
// 'react': isProduction ? 'react' : './src/vendor/react.js',
'react': 'react',
},
};
Since I am trying this from sharepoint online. I am sure this is because I have requirejs on the page so we never get to the part where the global is set.
If I set both "require" and "define" to undefined I can correctly dynamically import modules and the global is set. But of course I don't want and I should not do that.
My question is if there is anyways to keep the module structure but skip the requirejs checking and go straight to setting the global?