Critical dependency: require function is used in a

Question

Has anyone faced below warning in "ng serve"?

WARNING in ./node_modules/@angular/compiler/src/util.js 10:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted ℹ ｢wdm｣: Compiled with warnings.

Angular versioning:

Angular CLI: 6.0.8 Node: 8.11.3 OS: darwin x64 Angular: 6.0.9 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router, upgrade

I tried updating CLI and Angular but no success. Code inside util.js looks like:

function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define("@angular/compiler/src/util", ["require", "exports"], factory);
    }
}

Answer 1

It happened to me from this import:

import { Message } from '@angular/compiler/src/i18n/i18n_ast';

I have a Message interface but autofill import feature defaulted to the one above.

Answer 2

I experienced same error, when I've imported by mistake EventEmitter from protractor instead of @angular/core.

Changing import { EventEmitter } from 'protractor'; to import { EventEmitter } from '@angular/core'; fixed it.

Answer 3

Search your app for imports.

There is a high chance that you imported something similar to from '@angular/compiler/foo' by mistake.

Answer 4

This warning gets thrown if you are importing from src path

Change the components import statement from

import { ChangeDetectionStrategy, ViewEncapsulation } from '@angular/compiler/src/core';

to

import {  ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';

Answer 5

I got this error and found this: https://fluin.io/blog/critical-dependency-cannot-be-statically-extracted, where the author shows he was getting the same warning. However, I wasn't using Angular Elements, but I got the idea it might be related to the same problem, so I went ahead and checked whether I was using @angular/compiler/src/core in any of my imports.

And I was indeed doing so. The fix was as simple as removing the import line, which in my case was:

import { ViewEncapsulation } from '@angular/compiler/src/core';

And then the editor autoimported it as follows:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

I hope it helps.

Answer 6

I had this error (shown in the title) and several others because I tried to implement a 3rd party library.

So in short, if you get these errors try looking at your 3rd party libraries. In my case it was a barcode scanning library from Scanbot.io.