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

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

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.

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.

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';

Search your app for imports.

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

I found a similar issue:

> ./node_modules/@angular/compiler/src/util.js:10:24-31 - Warning: > Critical dependency: require function is used in a way in which > dependencies cannot be statically extracted

I recalled using stringify instead of JSON.stringify and this auto imported (using vs code) as:

import { stringify } from '@angular/compiler/src/util';

I removed this auto import and corrected the code to JSON.stringify.

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.

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.

Just to add to this, very similar but it seems importing some things from Angular does it. Mine was this:

import {error} from '@angular/compiler/src/util';

I unintentionally typed throw error() instead of throw Error() and it imported that and triggered the warning.