Angular 12 aws-sdk 2.910.0 Error: Module not found: Error: Can't resolve 'util' in '.\.\.\node_modules\aws-sdk\lib'

Viewed 10123

Prior to moving from Angular 11 to 12 the following error did not occur and the application was able to use the aws-sdk library to access my S3 buckets:

./node_modules/aws-sdk/lib/event_listeners.js:572:21-44 - Error: Module not found: Error: Can't resolve 'util' in 'S:\Source\sttutter-ui\node_modules\aws-sdk\lib'
Did you mean './util'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (S:/Source/sttutter-ui, node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

package.json

{
  "name": "x",
  "version": "0.0.0",
  "license": "commercial",
  "private": true,
  "engines": {
    "node": ">= 10.0.0"
  },
  "dependencies": {
    "@angular/animations": "~12.0.1",
    "@angular/common": "~12.0.1",
    "@angular/compiler": "~12.0.1",
    "@angular/core": "~12.0.1",
    "@angular/forms": "~12.0.1",
    "@angular/platform-browser": "~12.0.1",
    "@angular/platform-browser-dynamic": "~12.0.1",
    "@angular/router": "~12.0.1",
    "@ng-bootstrap/ng-bootstrap": "^9.1.1",
    "@ngrx/store": "^12.0.0",
    "aws-sdk": "^2.910.0",
    "ngrx-store-freeze": "^0.2.4",
    "ngrx-store-logger": "^0.2.4",
    "prando": "^6.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.1",
    "@angular/cli": "~12.0.1",
    "@angular/compiler-cli": "~12.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  }
}

I've tried deleting the node_modules directory and running npm install

Search the web about this error seems to suggest that this is a webpack issue... Based upon these conversations I'm not sure how to get this working again.

Should I switch to aws-sdk-js even though aws-sdk was working up and until today?

Suggestions regarding how to resolve this issue sought

Thanks!

4 Answers

I have also run into this issue, and am not sure what the official path should be, but the below has worked for me.

  1. npm install -S util
  2. Add (window as any).global.util = (window as any).global.util || require("util").util; to your polyfills.ts file.

Angular 12 moved to Webpack 5 which does not include polyfills for node.js anymore.

To avoid adding missing polyfills on your own, use this Webpack plugin: https://www.npmjs.com/package/node-polyfill-webpack-plugin

It includes all polyfills which have been removed with Webpack 5.

Install the package and configure the Webpack plugin as described and the issue should be solved.

The problem is related to the import of zone.js in your polyfills.ts

The old import used to be:

import 'zone.js/dist/zone';

Change to:

import 'zone.js';

And you may also need to add at the bottom of your polyfills.ts

(window as any).global = window;

Try this:

rm node_modules 
rm package-lock.json 
npm install
Related