aws-sdk-js-v3: Module not found: Can't resolve 'fs' in 'node_modules/@aws-sdk/lib-storage/dist/es

Describe the bug

Angular project not building because of FS error, is there no way to upload big files to s3 via Angular 11 with v3 sdk ?

Your environment

Angular - 11, Win 10

SDK version number

3.20.0

Is the issue in the browser/Node.js/ReactNative?

Browser

Details of the browser/Node.js/ReactNative version

Paste output of npx envinfo --browsers or node -v or react-native -v v14.15.1

Steps to reproduce

 const uploadParams = {
      Bucket: this.bucketName,
      Key: `podcasts/${this.userInfo.identityId}/${file.name}`,
      Body: file
    };
     try {
      const parallelUploads3 = new Upload({
        client: this.s3,
        params: uploadParams,
      });

      parallelUploads3.on("httpUploadProgress",progressFunc);

      await parallelUploads3.done();

    } catch (err) {
      return console.error(err);
    }

Observed behavior

Angular app crashes

Expected behavior

Use the library

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

duplicate of #2136

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 6
Comments: 23 (10 by maintainers)

Most upvoted comments

@ajredniwja Here’s a repo that reproduces the issue. I used Angular CLI to generate a new v11 project, then added @aws-sdk/lib-storage and @aws-sdk/client-s3, then just pasted in the example from the lib-storage repo.

grothem on Jul 12, 2021

@robec1982 It’s working for me now with the latest version of the sdk

grothem on Mar 16, 2022

For Angular using web-pack 5 it is using the node config to build which causes this error, which uses fs as seen here, but it needs to use the browser config as which doesn’t use fs. I believe, it should be a web-pack issue since it is not able to load the correct config. Not sure how to achieve that in an Angular project but working on it, will discuss it with the team to find more on the issue.

ajredniwja on Aug 30, 2021

After applying those fixes, it still fails with Angular 12, that uses Webpack v5.

This is the core of the package.json used:

{
  ...
  "dependencies": {
    "@angular/animations": "^12.1.3",
    "@angular/common": "^12.1.3",
    "@angular/compiler": "^12.1.3",
    "@angular/core": "^12.1.3",
    "@angular/forms": "^12.1.3",
    "@angular/localize": "^12.1.3",
    "@angular/platform-browser": "^12.1.3",
    "@angular/platform-browser-dynamic": "^12.1.3",
    "@angular/router": "^12.1.3",
    "@aws-sdk/client-s3": "^3.22.0",
    "@aws-sdk/lib-storage": "^3.23.0",
    "fs": "^0.0.1-security",
    "zone.js": "^0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.3",
    "@angular-devkit/core": "12.1.3",
    "@angular/cli": "^12.1.3",
    "@angular/compiler-cli": "^12.1.3",
    "@angular/language-service": "^12.1.3",
    "typescript": "4.3.5"
  },
  "browser": {
    "crypto": false,
    "fs": false,
    "net": false,
    "os": false,
    "path": false,
    "stream": false,
    "tls": false
  },
  ...
}

Also tsconfig is configured with:

    "lib": ["ES2020", "ES2019", "ESNext", "DOM"],

Any ideas?

ignlg on Jul 26, 2021

@grothem thanks, I’ll try to work with it, would be some time.

ajredniwja on Jul 12, 2021