Upgraded to RC7 getting warnings: Critical dependency: the request of a dependency is an expression

Question

Upgraded to RC7 getting warnings: Critical dependency: the request of a dependency is an expression

Closed this issue 9 years ago · 23 comments

I noticed that RC7 was released a couple of hours ago and I have upgraded to it. I now get two warnings in the console and typescript compiler.

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
45:15 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
57:15 Critical dependency: the request of a dependency is an expression

Think once you update this project to RC7 you might get the same warnings? Any ideas how to fix this?

Edit: This is really sloppy, but to get rid of the warnings just comment out line 32 in node_modules/webpack/lib/dependencies/ContextDependencyHelpers.js until proper fix is available.

Edit2: See @Simon-Briggs answer for proper fix.

Answer 1 · 2016-09-13T15:27:11.000Z

Same issue here...I upgraded webpack to beta.22 and latest versions of dev server and dev middleware too.

Answer 2 · 2016-09-13T17:19:02.000Z

I just get this: ( beta.21)

module build failed: Error: Debug Failure. False expression: Output generation failed
    at Object.assert (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/typescript/lib/typescript.js:2406:23)
    at Object.transpileModule (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/typescript/lib/typescript.js:54350:18)
    at State.fastEmit (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/awesome-typescript-loader/src/host.ts:264:39)
    at transform (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/awesome-typescript-loader/src/index.ts:164:28)
    at transformationFunction (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/awesome-typescript-loader/src/index.ts:89:48)
    at compiler (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/awesome-typescript-loader/src/index.ts:105:34)
    at Object.loader (/home/lrj/workspace/angular2-webpack2-typescript2/node_modules/awesome-typescript-loader/src/index.ts:18:18)
 @ ./src/frontend/app async .*\.ts
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./~/@angular/core/src/linker.js
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/frontend/app/vendors.ts
 @ multi vendor

Answer 3 · 2016-09-14T02:00:57.000Z

Adding

module:  {
    exprContextCritical: false,
}

to webpack.common.js disables this check and warning message.

Not sure what the proper fix is.

https://webpack.github.io/docs/configuration.html#automatically-created-contexts-defaults-module-xxxcontextxxx

EDIT:
This fixes it

  plugins: [
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      __dirname
    ),
]

angular/angular#11580

Will open a PR for reference.

Answer 4 · 2016-10-03T13:44:13.000Z

Just FYI, for me the ContextReplacementPlugin caused watchers (like ts-fork-checker and karma) to trigger more often. I had it during normal development, but since it usually only triggered the ts-fork-checker twice it wasn't bothering me. However, right now I am in the process of switching from plain node mocha tests to karma, and there the plugin triggers watch like 5 times directly after each other w/o real file changes.

Answer 5 · 2016-10-19T14:29:55.000Z

@Simon-Briggs Regarding the changes you suggest, could you clarify exactly where the files are that are supposed to be changed?
Thanks!

Answer 6 · 2016-10-21T02:55:36.000Z

@Mellbourn If you're using WebPack to do your builds it'll be in the webpack config file under a section called plugins. For this repo the config file is in config/webpack.common.js

Answer 7 · 2016-10-21T17:12:12.000Z

@Simon-Briggs I'm using Angular-CLI, so there is no config folder.

Answer 8 · 2016-10-22T09:38:00.000Z

@Melbourn. Angular CLI uses webpack but hides the config file from the user as its all preconfigured. If you update your version of angular CLI, it should just work.

Answer 9 · 2016-10-26T15:16:32.000Z

@Simon-Briggs Not sure what I'm doing wrong, but by adding your solution to my webpack.common.js, so I have:

plugins: [
      new AssetsPlugin({
        path: helpers.root('dist'),
        filename: 'webpack-assets.json',
        prettyPrint: true
      }),

      new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        __dirname
      ),

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

      new ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)client|client)(\\|\/)linker/,
        helpers.root('client') // location of your client
      ),

      new CopyWebpackPlugin([{
        from: 'client/assets',
        to: 'assets'
      }], {
          ignore: [
            'humans.txt',
            'robots.txt'
          ]
        }),
      new CopyWebpackPlugin([{
        from: 'client/assets/robots.txt'
      }, {
        from: 'client/assets/humans.txt'
      }]),

I still get:

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
45:15 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
57:15 Critical dependency: the request of a dependency is an expression

When running my tests...

Answer 10 · 2016-10-31T05:39:50.000Z

@georgeedwards
Ah. You'll need to put the exact same code in your webpack.test.js plugins section as well.

Answer 11 · 2017-01-12T21:50:44.000Z

Resolving: no longer relevant

Answer 12 · 2017-01-18T17:56:23.000Z

@d3viant0ne how is this no longer relevant? I'll be honest I'm not using angular2-webpack-starter but I am seeing this error and the plugin solution has worked well for me (though it seemed like a hack). Is this resolved in a better way now? I just pulled all the latest modules from npm.

Answer 13 · 2017-01-27T12:12:18.000Z

Using the ContextReplacementPlugin hack causes webpack to start watching the folder you pass to it for any changes. So if __dirname is your project root it will watch any file in your project for changes it seems.
This triggered insane amount of rebuilds for me because it startet to rebuild on any change in the .git folder.

Answer 14 · 2017-03-01T18:16:36.000Z

A version of this error will surface when upgrading to Angular 4.0.0-rc.1.

WARNING in ./~/@angular/core/@angular/core.es5.js 3702:272-293 Critical dependency: the request of a dependency is an expression

This change in webpack.common.js resolved the issue for me. Credit to Martin Wegner here https://github.com/angular/angular/issues/11580

      new ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)@angular/,
        helpers.root('src'), // location of your src
        {
          // your Angular Async Route paths relative to this root directory
        }
      ),

Answer 15 · 2017-03-17T08:01:34.000Z

@d3viant0ne This seems still relevant. I'm getting this now, and its over 6 months since reported.
This issue is caused by webpack being unhappy with dynamic imports. The Webpack team states that this is by design:
webpack/webpack-dev-server#212 (comment)

Are the dynamic System.import calls (as called out above on lines 45 and 57) absolutely necessary? Having to shut off a highly recommended piece of webpack feels hacky. I know this is an issue not related to angular, but given that angular and webpack are so closely tied to each other I'd expect them to play nice.

Answer 16 · 2017-04-11T06:44:34.000Z

@gregbown Thank you, your solution solved it for me. Currently on Angular 4.0.1.

Answer 17 · 2017-05-11T11:14:17.000Z

@gregbown could you please provide an example on how to populate the // your Angular Async Route paths relative to this root directory part of the ContextReplacementPlugin plugin?

Let's say I have /config/webpack.common.js that's loaded from /webpack.config.js and the lazy loaded module lives in /src/app/lazy/lazy.module.ts what should I write there as path?

Thanks

Answer 18 · 2017-06-02T02:10:22.000Z

Upgraded to Angular 4 because everybody said it was easy and non breaking.
2 days later & I'm still trying to fix this error.

This is my plugins section
` new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)

//Supposed fix
new webpack.ContextReplacementPlugin(/angular(|/)core(|/)@angular/, path.resolve(__dirname, './ClientApp')),

//Origanal ---> new webpack.ContextReplacementPlugin(/@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for angular/angular#11580

new webpack.IgnorePlugin(/^vertx$/) // Workaround for stefanpenner/es6-promise#100
`

Answer 19 · 2017-09-25T06:19:28.000Z

Can this be reopened? I'm having the same error with 4.4.3.

Answer 20 · 2017-10-04T13:02:06.000Z

This is still very relevant. I'am working with the latest version of angular and I have this all the time:

WARNING in ./node_modules/@angular/core/@angular/core.es5.js
5675:15-102 Critical dependency: the request of a dependency is an expression

If I use the contextreplacement hack the warning is gone - but watch and reload do not work properly anymore. It restarts all the time.

Answer 21 · 2017-11-04T21:52:02.000Z

@devspireRoland I had the same problem as you today after updating to Angular 5. I managed to fix it with this code:

webpack.common.js

new webpack.ContextReplacementPlugin( /(.+)?angular(\\|\/)core(.+)?/, root('./src'), {} ),

Answer 22 · 2017-11-17T13:20:22.000Z

@clundberg1 I have the same issue just after upgrading to Angular 5. But I don't have a webpack.common.js file. Where should I look?

Answer 23 · 2017-11-23T22:52:08.000Z

@ShinDarth I'm in the same boat using Angular-CLI, if you have a solution please let us know. Thanks