WARNING in Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Question

After upgrading my webpack to webpack2, I'm getting some warnings in console:

WARNING in ./~/reflect-metadata/Reflect.js
841:28 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Here's my code:

package.json:

{
  "name": "myApp",
  "version": "1.0.0",
  "description": "myApp",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "typings": "typings",
    "start": "webpack-dev-server --inline --progress --port 3000"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "angular2-in-memory-web-api": "0.0.14",
    "angular2-template-loader": "^0.4.0",
    "core-js": "^2.4.1",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.22.0",
    "reflect-metadata": "^0.1.4",
    "rxjs": "^5.0.0-beta.6",
    "ts-loader": "^0.8.2",
    "typescript": "^1.8.10",
    "typings": "^1.3.2",
    "webpack": "^2.1.0-beta.20",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^2.1.0-beta.0",
    "webpack-merge": "^0.14.1",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "concurrently": "^2.0.0"
  }
}

webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/app.ts'
  },

  output: {
    filename: '[name].js'
  },

  resolve: {
    extensions: ['', '.js', '.ts']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['ts', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
    ]
  },

  plugins: [

    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],

  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }
  
}

polyfills.ts

require('zone.js/dist/zone');
import 'core-js/es6';
import 'reflect-metadata';


if (process.env.ENV === 'production') {
  // Production
} else {
  // Development
  Error['stackTraceLimit'] = Infinity;
  require('zone.js/dist/long-stack-trace-zone');
}

vendor.ts

// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// RxJS
import 'rxjs';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

app.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent } from './app/app.component';

if (process.env.ENV === 'production') {
  enableProdMode();
}

bootstrap(AppComponent, []);

Does anybody knows what are these warnings? Everything is working fine when running the app, there is just these warnings..

Thanks!

The require inside the if in polyfill.ts looks to me like it might cause that warning. In theory the compiler might be able to figure out what process.env.ENV === 'production' will evaluate to at compile time but it wouldn't surprise me at all if it it didn't. — mrmcgreg

helge.fosse helge.fosse · Accepted Answer · 2016-08-09T06:10:35

I got the same warnings with reflect-metadata 0.1.4. Downgrading to 0.1.3 removed the warnings for me.

WARNING in Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

1 Answers