aws-sdk-js-v3: Browserify bundler is not supported

Checkboxes for prior research

Describe the bug

Now using node v14.21.2 (npm v6.14.17)
Updating is_local.js with desired values
Updating aws-exports.js with desired values
Notice: compiling javascript

> reactjs@1.0.0 build:browserify /path/to/pooPooCodeBase/jsx
> browserify -t [ babelify --presets [ @babel/preset-env ] ] content.jsx > content.js

Error: Can't walk dependency graph: ENOENT: no such file or directory, lstat '/path/to/pooPooCodeBase/jsx/process'
    required by /path/to/pooPooCodeBase/jsx/node_modules/@aws-sdk/client-cognito-identity-provider/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/index.js
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactjs@1.0.0 build:browserify: `browserify -t [ babelify --presets [ @babel/preset-env ] ] content.jsx > content.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the reactjs@1.0.0 build:browserify script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jeff1evesque/.npm/_logs/2023-11-01T03_50_45_222Z-debug.log

SDK version number

@aws-sdk/client-cognito-identity-provider@^3.350.0

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

v19.8.0

Reproduction Steps

I have the following packages.json:

{
  "name": "reactjs",
  "version": "1.0.0",
  "description": "packages needed for source files.",
  "main": "index.js",
  "scripts": {
    "prebuild:dos2unix": "find . -type f -print0 | xargs -0 dos2unix",
    "build:browserify": "browserify -t [ babelify --presets [ @babel/preset-env ] ] content.jsx > content.js",
    "watch:jsx": "onchange '**/*.jsx' '**/*.js' -- npm run build:browserify",
    "test": "NODE_ENV=test jest --config jest.config.js",
    "report:coveralls": "cat lcov.info | ./node_modules/coveralls/bin/coveralls.js"
  },
  "author": "Jeff1evesque",
  "license": "BSD",
  "repository": "github:jeff1evesque/pooPooCodeBase",
  "dependencies": {
    "@aws-amplify/auth": "^5.6.5",
    "@aws-sdk/client-cognito-identity-provider": "^3.350.0",
    "@babel/core": "^7.22.11",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-transform-runtime": "^7.22.10",
    "@babel/preset-env": "^7.22.10",
    "@babel/preset-react": "^7.22.5",
    "@popperjs/core": "^2.8.1",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
    "babel-jest": "^26.6.3",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0",
    "coveralls": "^3.1.0",
    "d3": "^6.5.0",
    "dos2unix-cli": "^1.0.1",
    "enzyme": "^3.11.0",
    "framer-motion": "^10.16.2",
    "global": "^4.4.0",
    "history": "^5.0.0",
    "jest-cli": "^26.6.3",
    "recharts": "^2.6.2",
    "onchange": "^7.1.0",
    "promise-polyfill": "^8.2.0",
    "prop-types": "15.7.2",
    "query-string": "^6.14.0",
    "react": "^18.0.0",
    "react-bootstrap": "^2.7.2",
    "react-csv-to-table": "^0.0.4",
    "react-datepicker": "^4.8.0",
    "react-dom": "^18.0.0",
    "react-error-boundary": "^3.1.0",
    "react-gauge-chart": "^0.3.0",
    "react-json-view": "1.21.1",
    "react-papaparse": "^4.1.0",
    "react-redux": "^7.2.2",
    "react-router-dom": "^6.8.0",
    "react-modal-sheet": "^2.0.0",
    "react-tabs": "^4.2.1",
    "react-qr-code": "^2.0.12",
    "rearm": "^0.13.1",
    "redux": "^4.0.5",
    "whatwg-fetch": "^3.4.1",
    "react-device-detect": "^2.2.3",
    "@mui/material": "^5.14.7",
    "@mui/icons-material": "^5.14.9",
    "@emotion/styled": "^11.11.0",
    "@emotion/react": "^11.11.1",
    "react-alice-carousel": "^2.7.1",
    "react-spinners": "^0.13.8"
  }
}

Observed Behavior

I run npm install no problem:

(base) jeff1evesque@computer jsx % npm install

up to date, audited 1584 packages in 3s

124 packages are looking for funding
  run `npm fund` for details

17 vulnerabilities (5 moderate, 11 high, 1 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

Then, I have a react/jsx template with the following import:

import * as AWS from "@aws-sdk/client-cognito-identity-provider";

When I run npm run build:browserify, I get the following error:

(base) jeff1evesque@computer pooPooCodeBase % npm run build:browserify
Now using node v14.21.2 (npm v6.14.17)
Updating is_local.js with desired values
Updating aws-exports.js with desired values
Notice: compiling javascript

> reactjs@1.0.0 build:browserify /path/to/pooPooCodeBase/jsx
> browserify -t [ babelify --presets [ @babel/preset-env ] ] content.jsx > content.js

Error: Can't walk dependency graph: ENOENT: no such file or directory, lstat '/path/to/pooPooCodeBase/jsx/process'
    required by /path/to/pooPooCodeBase/jsx/node_modules/@aws-sdk/client-cognito-identity-provider/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/index.js
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactjs@1.0.0 build:browserify: `browserify -t [ babelify --presets [ @babel/preset-env ] ] content.jsx > content.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the reactjs@1.0.0 build:browserify script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jeff1evesque/.npm/_logs/2023-11-02T00_56_48_364Z-debug.log

Expected Behavior

I expect being able to import the @aws-sdk/client-cognito-identity-provider module. That’s my only goal at the moment.

Possible Solution

No response

Additional Information/Context

(base) jeff1evesque@computer pooPooCodeBase % cat /Users/jeff1evesque/.npm/_logs/2023-11-02T00_56_48_364Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/Users/jeff1evesque/.nvm/versions/node/v14.21.2/bin/node',
1 verbose cli   '/Users/jeff1evesque/.nvm/versions/node/v14.21.2/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build:browserify'
1 verbose cli ]
2 info using npm@6.14.17
3 info using node@v14.21.2
4 verbose run-script [ 'prebuild:browserify', 'build:browserify', 'postbuild:browserify' ]
5 info lifecycle reactjs@1.0.0~prebuild:browserify: reactjs@1.0.0
6 info lifecycle reactjs@1.0.0~build:browserify: reactjs@1.0.0
7 verbose lifecycle reactjs@1.0.0~build:browserify: unsafe-perm in lifecycle true
8 verbose lifecycle reactjs@1.0.0~build:browserify: PATH: /Users/jeff1evesque/.nvm/versions/node/v14.21.2/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/jeff1evesque/application/pooPooCodeBase/jsx/node_modules/.bin:/Users/jeff1evesque/.nvm/versions/node/v14.21.2/bin:/Users/jeff1evesque/.pyenv/shims:/Users/jeff1evesque/opt/miniconda3/bin:/Users/jeff1evesque/opt/miniconda3/condabin:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin
9 verbose lifecycle reactjs@1.0.0~build:browserify: CWD: /Users/jeff1evesque/application/pooPooCodeBase/jsx
10 silly lifecycle reactjs@1.0.0~build:browserify: Args: [
10 silly lifecycle   '-c',
10 silly lifecycle   'browserify -t [ babelify --presets [ @babel/preset-env ] ] content.jsx > content.js'
10 silly lifecycle ]
11 silly lifecycle reactjs@1.0.0~build:browserify: Returned: code: 1  signal: null
12 info lifecycle reactjs@1.0.0~build:browserify: Failed to exec build:browserify script
13 verbose stack Error: reactjs@1.0.0 build:browserify: `browserify -t [ babelify --presets [ @babel/preset-env ] ] content.jsx > content.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/Users/jeff1evesque/.nvm/versions/node/v14.21.2/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:400:28)
13 verbose stack     at ChildProcess.<anonymous> (/Users/jeff1evesque/.nvm/versions/node/v14.21.2/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:400:28)
13 verbose stack     at maybeClose (internal/child_process.js:1088:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:296:5)
14 verbose pkgid reactjs@1.0.0
15 verbose cwd /Users/jeff1evesque/application/pooPooCodeBase/jsx
16 verbose Darwin 22.5.0
17 verbose argv "/Users/jeff1evesque/.nvm/versions/node/v14.21.2/bin/node" "/Users/jeff1evesque/.nvm/versions/node/v14.21.2/bin/npm" "run" "build:browserify"
18 verbose node v14.21.2
19 verbose npm  v6.14.17
20 error code ELIFECYCLE
21 error errno 1
22 error reactjs@1.0.0 build:browserify: `browserify -t [ babelify --presets [ @babel/preset-env ] ] content.jsx > content.js`
22 error Exit status 1
23 error Failed at the reactjs@1.0.0 build:browserify script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Comments: 17 (6 by maintainers)

Most upvoted comments

Hi @jeff1evesque ,

Thank you for your patience. I needed to familiarize myself a bit with the bundling tools to fully reproduce and understand the issue.

It seems like the build issue you are running into is related to how Browserify handles the process object, which is a part of Node.js but not naturally available in web browsers. Based on the Browserify docs, it usually provides a shim of process for the web, but it looks like the SDK needed more functionality than what this shim offers.

To solve this, I added a more specific shim for process:

  "scripts": {
    "build": "browserify -r process/browser.js:process ./src/index.jsx -o ./dist/bundle.js -t [ babelify --presets [@babel/preset-env @babel/preset-react] ]"
  },

For me this fixed the build error. This Hopefully should let you continue developing without issues. Just keep in mind that this approach mimics Node.js behavior in the browser, so there might be some differences in how certain things work compared to a standard Node.js environment.

Let me know if this helps. Thanks, Ran~