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

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

score 150 · Accepted Answer · edited Dec 25 '22 at 22:16

150

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

edited Dec 25 '22 at 22:16

starball

20,030
7
43
238

answered Aug 09 '18 at 17:42

Jorge Solis

1,796
1
10
12

2

Thank you as well. It isn't just this Module, check your imports for rogue imports. – user1059939 Sep 09 '18 at 01:35
1

That's it. Solved the Problem in Angular 7. Thanks. – JRoppert Nov 27 '18 at 23:18
1

This helped me to find the source of a similar problem on another file – Jahrenski Dec 19 '18 at 16:13
1

you sir... are a legend – user3024827 May 20 '19 at 08:00
4

In my case, on Angular 7, Visual Studio Code auto-completed the import ViewEncapsulation from @angular/compiler/src/core, giving this error. This solved it, thank you – Luca De Nardi Jul 01 '19 at 12:52

score 24 · Answer 2 · answered Jan 25 '20 at 12:40

24

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.

answered Jan 25 '20 at 12:40

mimo

6,221
7
42
50

score 5 · Answer 3 · answered Nov 01 '19 at 14:54

5

Search your app for imports.

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

answered Nov 01 '19 at 14:54

Yuri

4,254
1
29
46

score 5 · Answer 4 · answered Dec 04 '19 at 17:11

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

score 5 · Answer 5 · edited Jun 16 '21 at 17:55

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.

score 1 · Answer 6 · answered Mar 22 '22 at 20:07

1

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.

answered Mar 22 '22 at 20:07

sfaust

2,089
28
54

It just worked like a magic! Thanks a lot. – Jasmin Akther Suma Sep 23 '22 at 04:58

score 0 · Answer 7 · answered Oct 23 '19 at 13:52

0

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.

answered Oct 23 '19 at 13:52

Post Impatica

14,999
9
67
78

1

Never mind. I found the real cause. This following import was in one of my components: `import { Content } from '@angular/compiler/src/render3/r3_ast';` After removing it several errors went away. This was an dependency that was automatically resolved when importing some boilerplate code to support the Scandit.io SDK. – Post Impatica Oct 30 '19 at 19:29

score 0 · Answer 8 · answered Dec 31 '19 at 15:38

0

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.

answered Dec 31 '19 at 15:38

wcjord

499
3
14

do you able to resolve this error? if yes, How? – midnightgamer Apr 27 '21 at 08:02
Yeah, make sure you don't import frrom there. You should be importing from the root. – wcjord May 01 '21 at 20:12
@wcjord Can you please send the code snippet for importing Message in angular 14? – Alok Patel Jan 21 '23 at 08:54
Sorry @AlokPatel it's been awhile since I touched this code! – wcjord Jan 22 '23 at 17:15

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

8 Answers8

Linked