Webpack UMD: Critical dependency... cannot be statically extracted

Question

I'm trying to build a umd library with webpack; regardless of what I do get a warning:

WARNING in D:/Code/Node/sample.io/source/index.ts 3:24 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

when I try to require('./index.js') the generated index.js I get:

Error: Cannot find module "."

For completeness here are all my files:

webpack.config.js:

module.exports = {
  entry: {
    index: __dirname + '/index'
  },
  output: {
    filename: 'index.js',
    library: 'mylib',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  resolve: {
    root: __dirname,
    extensions: ['', '.ts', '.js'],
  },
  module: {
    loaders: [
      { test: /\.ts$/, loaders: ['awesome-typescript-loader'] }
    ]    
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "umd"
  },
  "exclude": [
    "node_modules"
  ]
}

package.json:

{
  "name": "foo",
  "version": "0.1.0",
  "devDependencies": {
    "awesome-typescript-loader": "^2.0.2",
    "typescript": "^2.0.0",
    "webpack": "^2.1.0-beta.17"
  }
}

index.ts:

export function MyFunc(params) {
  console.log("hello world");
}

• node -v = v6.3.0
• npm -v = 3.7.5

oddly, a friend of mine says this works without error for them. Although he is on node 4.2.6. If I change the module to commonjs it works perfectly fine without warnings or errors.

Isatin

Answer 1

I think you need "module": "commonjs" in tsconfig so typescript compilation will emit modules that are understandable to webpack, you will still get umd output from webpack

Hope this helps

Weakly

awesome, I was stuck in my thinking that ts needed to output UMD. thanks :D – Isatin

What if its not your repo? – Vitrics

What if I need to import a UMD npm module? – Reasoning

@zixia try adding libraryTarget: 'umd' in the output block of your webpack.config.js file. It's described here in webpack docs – Uhland

Answer 2

If you cannot change the module from umd to commonjs because you are just consuming it, and you do not have access to the source, you can use umd-compat-loader as a workaround. Add the following rule to your webpack.config.js:

module: {
    rules: [
        // other rules come here.
        {
            test: /node_modules[\\|/](name-of-the-umd-package)/,
            use: { loader: 'umd-compat-loader' }
        }
    ]
},

I have added a few more details to this thread.

Gahan

Answer 3

If you cannot fix the underlying cause, and just want to suppress the warning for this specific file, add this to your webpack config (ensure to change this to the file causing the warning):

{
  // The rest of your webpack config...
  ignoreWarnings: [
    {
      module: /regex of the file name causing the warning/,
    },
  ]
}

Alternatively, you can also suppress warnings by the message. For example, to suppress warnings containing "Critical dependency", do this:

{
  // The rest of your webpack config...
  ignoreWarnings: [/Critical dependency/],
}

Rabah