Angular SSR Build results in Warning

Clients TypeScript
1

Hi,

since I upgraded to Angular 11 I receive the following warning while building with SSR.

Warning: ./node_modules/encoding/lib/iconv-loader.js 9:10-32
Critical dependency: the request of a dependency is an expression
    at CommonJsRequireContextDependency.getWarnings (C:\Projekte\next.newhome.ch\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\dependencies\ContextDependency.js:40:18)
    at Compilation.reportDependencyErrorsAndWarnings (C:\Projekte\next.newhome.ch\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:1454:24)       
    at C:\Projekte\next.newhome.ch\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:1258:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Projekte\next.newhome.ch\node_modules\@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Projekte\next.newhome.ch\node_modules\@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)        
    at Compilation.finish (C:\Projekte\next.newhome.ch\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:1253:28)
    at C:\Projekte\next.newhome.ch\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:672:17
    at _done (eval at create (C:\Projekte\next.newhome.ch\node_modules\@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at eval (eval at create (C:\Projekte\next.newhome.ch\node_modules\@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:36:22)
    at C:\Projekte\next.newhome.ch\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:1185:129m
    at C:\Projekte\next.newhome.ch\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:1097:9
    at processTicksAndRejections (internal/process/task_queues.js:75:11)
 @ ./node_modules/encoding/lib/encoding.js
 @ ./node_modules/node-fetch/lib/body.js
 @ ./node_modules/node-fetch/lib/request.js
 @ ./node_modules/node-fetch/index.js
 @ ./node_modules/fetch-everywhere/fetch-npm-node.js
 @ ./node_modules/@servicestack/client/dist/index.js
 @ ./src/app/app.server.module.ts
 @ ./src/main.server.ts
 @ ./server.ts
 @ multi ./server.ts

The compilation of the code is done by webpack. As I can see in the stacktrace the warning occurred by node-fetch which is a dependency of the @servicestack/client package. I’ve read on different forums that an upgrade of the node-fetch package would resolve the issue. Is it possible to investigate this and consider an upgrade of the node-fetch package? Or are you aware of this issue and have a workaround? I’ve already tried resolving the issue by adding new webpack.NormalModuleReplacementPlugin(/\/iconv-loader$/, 'node-noop') to the webpack config but unfortunately this didn’t resolve the issue.

I am using the following versions of the packages:

  • @angular/… : 11.0.6

  • @nguniversal/express-engine: 11.0.1

  • @servicestack/client: 1.0.35

  • @angular-builders/custom-webpack: 10.0.1

  • webpack-cli: 3.3.11

2

The only dependencies @servicestack/client has is these polyfills:

  "dependencies": {
    "es6-shim": "^0.35.4",
    "eventsource": "^1.0.7",
    "fetch-everywhere": "^1.0.5"
  },

Where it’s already using the latest version of fetch-everywhere. Maybe if you add an explicit dependency to the latest version of node-fetch it will resolve it.

3

Ok, thanks I’ll try the explicit installation of node-fetch.

4

Unfortunately the installation of node-fetch didn’t resolve my problem. I’ve now created an issue on the fetch-everywhere repository.

5

Another option is to include the @servicestack/client source file directly into your project:

And replace the import 'fetch-everywhere'; polyfill with importing from node-fetch directly, e.g:

const fetch = require('node-fetch');

An alternative is to use the UMD version of @servicestack/client available from:

And replace require("fetch-everywhere"); with const fetch = require('node-fetch');

The .d.ts TypeScript Definition can be used at dev time to enable type checking.