typescriptwebpackumd

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


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");
}

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.


Solution

  • 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