TypeError: stream.pipe is not a function

[efraindx]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Storage

Amplify Categories

storage

Environment information

``` # Put output below this line System: OS: Windows 10 10.0.19043 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 23.65 GB / 31.91 GB Binaries: Node: 16.14.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.53) Internet Explorer: 11.0.19041.1566 npmPackages: @babel/core: ^7.17.8 => 7.18.2 @babel/plugin-syntax-dynamic-import: ^7.8.3 => 7.8.3 @babel/plugin-transform-runtime: ^7.17.0 => 7.18.2 @babel/preset-react: ^7.18.6 => 7.18.6 @datadog/browser-logs: ^4.14.0 => 4.14.0 @datadog/browser-rum: ^4.7.1 => 4.11.2 @date-io/moment: ^1.3.13 => 1.3.13 @fullhuman/postcss-purgecss: 2.3.0 => 2.3.0 @hookform/resolvers: ^2.8.8 => 2.9.0 @material-ui/core: ^4.12.3 => 4.12.4 @material-ui/icons: ^4.11.2 => 4.11.3 @material-ui/lab: ^4.0.0-alpha.61 => 4.0.0-alpha.61 @material-ui/pickers: ^3.3.10 => 3.3.10 @stripe/react-stripe-js: ^1.7.0 => 1.8.1 @stripe/stripe-js: ^1.25.0 => 1.31.0 @tailwindcss/postcss7-compat: ^2.2.17 => 2.2.17 @types/cleave.js: ^1.4.6 => 1.4.6 @types/jszip: ^3.4.1 => 3.4.1 @types/node: ^14.18.12 => 14.18.20 (17.0.39) @types/react: ^17.0.43 => 17.0.45 (18.0.10, 16.14.26, 16.14.28) @types/react-autosuggest: ^10.1.5 => 10.1.5 @types/react-dom: ^16.9.14 => 16.9.16 @types/react-onclickoutside: ^6.7.4 => 6.7.4 @types/react-router-dom: ^5.3.3 => 5.3.3 @types/react-window: ^1.8.5 => 1.8.5 @types/styled-components: ^5.1.25 => 5.1.25 @typescript-eslint/eslint-plugin: ^3.10.1 => 3.10.1 @typescript-eslint/parser: ^3.10.1 => 3.10.1 ajv: 1.0.0 autoprefixer: ^9.8.8 => 9.8.8 aws-amplify: ^4.3.37 => 4.3.37 class-validator: 1.0.0 compressorjs: ^1.1.1 => 1.1.1 computed-types: 1.0.0 concurrently: ^5.3.0 => 5.3.0 date-fns: ^2.28.0 => 2.28.0 dotenv: ^16.0.1 => 16.0.1 (5.0.1, 9.0.2) electron: ^17.2.0 => 17.4.7 electron-builder: ^22.14.13 => 22.14.13 electron-context-menu: ^3.1.2 => 3.1.2 electron-is-dev: ^1.2.0 => 1.2.0 (2.0.0) electron-log: ^4.4.6 => 4.4.7 electron-updater: ^4.3.9 => 4.6.5 eslint: ^7.32.0 => 7.32.0 eslint-config-prettier: ^6.15.0 => 6.15.0 eslint-plugin-jsx-a11y: ^6.5.1 => 6.5.1 eslint-plugin-prettier: ^3.4.1 => 3.4.1 eslint-plugin-react: ^7.29.4 => 7.30.0 eslint-plugin-react-hooks: ^4.3.0 => 4.5.0 formik: ^2.2.9 => 2.2.9 global: ^4.4.0 => 4.4.0 husky: ^4.3.8 => 4.3.8 ini: ^1.3.8 => 1.3.8 (2.0.0) inquirer: ^6.5.2 => 6.5.2 io-ts: 1.0.0 joi: 1.0.0 lint-staged: ^10.5.4 => 10.5.4 match-sorter: ^6.3.1 => 6.3.1 moment: ^2.29.2 => 2.29.3 nope: 1.0.0 parcel-bundler: ^1.12.5 => 1.12.5 parcel-plugin-electron-dotenv: ^0.1.0 => 0.1.0 postcss: ^7.0.39 => 7.0.39 (7.0.32, 8.4.14, 6.0.1, 6.0.23) prettier: ^2.6.0 => 2.6.2 prop-types: ^15.8.1 => 15.8.1 react: ^18.2.0 => 18.2.0 react-autosuggest: ^10.1.0 => 10.1.0 react-dom: ^17.0.2 => 17.0.2 react-dropdown-select: ^4.8.3 => 4.9.0 react-export-excel: ^0.5.3 => 0.5.3 react-hook-form: ^7.28.1 => 7.31.3 react-loader-spinner: ^5.1.4 => 5.1.4 react-material-ui-carousel: ^2.3.11 => 2.3.11 react-modal: ^3.14.4 => 3.15.1 react-onclickoutside: ^6.12.1 => 6.12.1 react-responsive-modal: ^6.2.0 => 6.2.0 react-router-dom: ^5.3.0 => 5.3.3 react-slideshow-image: ^4.0.4 => 4.0.4 react-text-mask: ^5.4.3 => 5.4.3 react-to-print: ^2.14.4 => 2.14.7 react-window: ^1.8.7 => 1.8.7 regenerator-runtime: ^0.13.9 => 0.13.9 (0.11.1) shell: ^0.9.4 => 0.9.4 stripe: ^8.211.0 => 8.222.0 styled-components: ^5.3.5 => 5.3.5 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () superstruct: 1.0.0 typanion: 1.0.0 typescript: ^3.9.10 => 3.9.10 vest: 1.0.0 wait-on: ^5.3.0 => 5.3.0 yup: ^0.32.11 => 0.32.11 (1.0.0) zod: 1.0.0 npmGlobalPackages: @aws-amplify/cli: 8.2.0 yarn: 1.22.11 ```

Describe the bug

I'm working on an electron React app with Amplify.

I'm getting this error: TypeError: stream.pipe is not a function when trying to upload an image using Amplify Storage:

Storage.put(fileName, file, {
    contentType: "image/png"
});

Note: I'm only getting this error in the packaged application, when I run the app locally it works.

Expected behavior

Upload the image without any errors

Reproduction steps

1. Create an electron react application (you can use this template)
2. Install Amplify as specified in the doc
3. Try to upload an image as specified in this example
4. Package the app: npm run package
5. Open the packaged app and try to upload an image

Code Snippet

// Put your code below this line.
const onChangeInputFileHandler = async (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files![0];
    await Storage.put(file.name, file, {
         contentType: "image.png"
    });

<input type="file" onChange={onChangeInputFileHandler } />;
};

Log output

``` // Put your logs below this line node_modules\axios\lib\adapters\xhr.js:162 Refused to set unsafe header "Expect" node_modules\axios\lib\adapters\xhr.js:162 Refused to set unsafe header "user-agent Uncaught (in promise) TypeError: stream.pipe is not a function at index.ts:9:12 at new Promise () at Object.streamCollector (index.ts:7:3) at collectBody (node_modules\@aws-sdk\client-s3\dist\cjs\protocols\Aws_restXml.js:12402:20) at Object.deserializeAws_restXmlPutObjectCommand (node_modules\@aws-sdk\client-s3\dist\cjs\protocols\Aws_restXml.js:8008:11) at deserialize (node_modules\@aws-sdk\client-s3\dist\cjs\commands\PutObjectCommand.js:127:30) at deserializerMiddleware.ts:20:24 (anonymous) @ index.ts:9 streamCollector @ index.ts:7 collectBody @ node_modules\@aws-sdk\client-s3\dist\cjs\protocols\Aws_restXml.js:12402 deserializeAws_restXmlPutObjectCommand @ node_modules\@aws-sdk\client-s3\dist\cjs\protocols\Aws_restXml.js:8008 deserialize @ node_modules\@aws-sdk\client-s3\dist\cjs\commands\PutObjectCommand.js:127 (anonymous) @ deserializerMiddleware.ts:20 Promise.then (async) u @ src.65f40b6a.js:308 (anonymous) @ src.65f40b6a.js:308 R @ src.65f40b6a.js:308 onChange @ src.65f40b6a.js:308 callCallback @ node_modules\react-dom\cjs\react-dom.development.js:3945 invokeGuardedCallbackDev @ node_modules\react-dom\cjs\react-dom.development.js:3994 invokeGuardedCallback @ node_modules\react-dom\cjs\react-dom.development.js:4056 invokeGuardedCallbackAndCatchFirstError @ node_modules\react-dom\cjs\react-dom.development.js:4070 executeDispatch @ node_modules\react-dom\cjs\react-dom.development.js:8243 processDispatchQueueItemsInOrder @ node_modules\react-dom\cjs\react-dom.development.js:8275 processDispatchQueue @ node_modules\react-dom\cjs\react-dom.development.js:8288 dispatchEventsForPlugins @ node_modules\react-dom\cjs\react-dom.development.js:8299 (anonymous) @ node_modules\react-dom\cjs\react-dom.development.js:8508 batchedEventUpdates$1 @ node_modules\react-dom\cjs\react-dom.development.js:22396 batchedEventUpdates @ node_modules\react-dom\cjs\react-dom.development.js:3745 dispatchEventForPluginEventSystem @ node_modules\react-dom\cjs\react-dom.development.js:8507 attemptToDispatchEvent @ node_modules\react-dom\cjs\react-dom.development.js:6005 dispatchEvent @ node_modules\react-dom\cjs\react-dom.development.js:5924 unstable_runWithPriority @ node_modules\scheduler\cjs\scheduler.development.js:468 runWithPriority$1 @ node_modules\react-dom\cjs\react-dom.development.js:11276 discreteUpdates$1 @ node_modules\react-dom\cjs\react-dom.development.js:22413 discreteUpdates @ node_modules\react-dom\cjs\react-dom.development.js:3756 dispatchDiscreteEvent @ node_modules\react-dom\cjs\react-dom.development.js:5889 ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

This is the stack trace visually

[tannerabread]

@efraindx I don't believe this will work. Amplify doesn't officially support NodeJS, it is designed for frontend mobile/web applications. I believe when you package it up it converts it to a NodeJS file system which is probably the cause of this error

[efraindx]

@tannerabread DataStore is working good, we're able to fetch and save data to AWS without any errors in the packaged application. We're only getting the error when using Storage. I also realized that the file is saved correctly in AWS when we get the error.

[tannerabread]

@efraindx New to electron so noob question here, but which way did you go about debugging the app once you packaged it? I debugged it this way

Also is the packaged app the one that shows up in release/build/<system>/Electron.app?

I was able to get to that part following your steps and my image is uploading fine, with no errors showing in my debugging console

[efraindx]

@tannerabread to debug the app, I enable the option to open the DevTools in the main.js https://stackoverflow.com/a/53574566/3188036

The packaged app should be in the dist folder. Can you please share your app to see what I may be missing?

[tannerabread]

@efraindx I couldn't get the debugger to work as you described, but I'm on Mac so maybe it's different

Looking at package.json on the build settings from the sample app you sent, it looks like the finished app gets pushed to release/build/<system>/ElectronReact.app by default. It does however pull the resources from the dist folder and package.json

Check out my repo and src/renderer/App.tsx for the changes that I made to this app

[tannerabread]

@efraindx were you able to figure out your issue?

[efraindx]

@tannerabread I was able to run your project locally and it worked for me as well without any errors. I'm still trying to figure out what I'm missing from my project. I'll post here once I find this.

[tannerabread]

hi @efraindx just curious if you were ever able to check this? I was thinking if you couldn't find any differences in the projects, maybe following your own repo steps with a new project and seeing if you still get the issue you described

[tannerabread]

Hi 👋 Closing this as we have not heard back from you. If you are still experiencing this issue and in need of assistance, please feel free to comment and provide us with any information previously requested by our team members so we can re-open this issue and be better able to assist you.

Thank you!

[efraindx]

@tannerabread sorry for the late reply. I realized that the project was using parcelinstead of webpack, after migrating the project to webpackit worked perfectly!!! Thanks for your time!

[tannerabread]

You're welcome! Glad you found the issue!