webpack5 polyfill for fs is stubbornly not resolving for an Angular 14 project

Question

A fresh install of Angular 14 Ionic 6 project, installed the @aws-sdk/client-s3 (v3) package.

The @aws-sdk is relying on the fs module in some of its libraries, e.g.: \node_modules@aws-sdk\shared-ini-file-loader\dist-es\getSSOTokenFromFile.js

After catering for alternatives for most other libraries used (http, os, crypto) - I can not resolve fs no matter what I do.

I can build the app, but runtime throws this to the console:

getSSOTokenFromFile.js:4 Uncaught TypeError: Cannot read property 'readFile' of undefined
    at Module.89769 (getSSOTokenFromFile.js:4)
    at __webpack_require__ (bootstrap:19)
    at Module.76090 (getSSOTokenFromFile.js:5)
    at __webpack_require__ (bootstrap:19)
    at Module.64895 (staticStabilityProvider.js:3)
    at __webpack_require__ (bootstrap:19)
    at Module.84655 (fromIni.js:4)
    at __webpack_require__ (bootstrap:19)
    at Module.40554 (aws-file-upload.service.ts:4)
    at __webpack_require__ (bootstrap:19)

This error refers to this file mentioned above: getSSOTokenFromFile.js:

import { __awaiter, __generator } from "tslib";
import { promises as fsPromises } from "fs";
import { getSSOTokenFilepath } from "./getSSOTokenFilepath";
var readFile = fsPromises.readFile;
export var getSSOTokenFromFile = function (ssoStartUrl) { return __awaiter(void 0, void 0, void 0, function () {
    var ssoTokenFilepath, ssoTokenText;
    return __generator(this, function (_a) {
        switch (_a.label) {
            case 0:
                ssoTokenFilepath = getSSOTokenFilepath(ssoStartUrl);
                return [4, readFile(ssoTokenFilepath, "utf8")];
            case 1:
                ssoTokenText = _a.sent();
                return [2, JSON.parse(ssoTokenText)];
        }
    });
}); };

I read through multiple git issues (e.g. this one) and other StackOverflow issues (this is one of them).

After MANY attempts, including a failed downgrade of webpack5 to webpack4 (and back), my webpack.config.js file now looks like this:

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = {
    
    resolve: {
      fallback: {         
        "http": require.resolve("stream-http"),
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "os": require.resolve("os-browserify/browser"),
        "fs": false
        }
    },
    plugins: [
      new NodePolyfillPlugin()
    ]
  };

And my package.json starts with this:

    "browser": {
        "fs": false,
        "path": false,
        "os": false 
    },
"dependencies":{
"fs":"^0.0.1-security",
...
...
}

I also tried deleting node_modules, node cache, package-lock and re-installing npm install --force. I tried to add a require.resolve for "fs" to: fs-extra, and even modified the origin getSSOTokenFromFile.js to import from fs-extra instead of fs - nada.

Nothing budges this error.

What else should I look for? Thank you!

Did you find a solution for that? I am experiencing the same issue. — firefox2005, May 10 '23 at 07:09

score 0 · Answer 1 · answered Aug 15 '22 at 14:47

0

Did you try to fix it by editing the code in node_modules ? It it helps, you can use "patch-package" to make your patch persistent (that is, applied after npm install/add/remove

answered Aug 15 '22 at 14:47

dtr2

172
9

Thanks. Can you please elaborate? what do you mean edit the code in node_modules? I did try replacing fs with fs-extra in the @aws-sdk module, but it did not work. Is that what you mean? – Mor Sagmon Aug 15 '22 at 17:03

webpack5 polyfill for fs is stubbornly not resolving for an Angular 14 project

1 Answers1