Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

117
Views
umd library in webpack 5 only works if dynamic import is from within another webpack project

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?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!