odysseyscience / react-s3-uploader

React component that renders an <input type="file"/> and automatically uploads to an S3 bucket

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Uncaught ReferenceError: process is not defined - Chrome browser Console error

neps-in opened this issue · comments

I get the following Console error, request you to help me on this, Let me know if you need any other info.

Uncaught ReferenceError: process is not defined
    at Object../node_modules/path/path.js (path.js:25:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/mime-types/index.js (index.js:16:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/react-s3-uploader/s3upload.js (s3upload.js:6:1)
    at Object.options.factory (react refresh:6:1)

I get this above error, It's a simple experiment to upload the file.

ReactUploader.js

var ReactS3Uploader = require('react-s3-uploader');
    
<ReactS3Uploader
    signingUrl="http://127.0.0.1:5000/create-presigned-s3-url/"
    signingUrlMethod="GET"
    accept="image/*"
    s3path=""
    preprocess={this.onUploadStart}
    onSignedUrl={this.onSignedUrl}
    onProgress={this.onUploadProgress}
    onError={this.onUploadError}
    onFinish={this.onUploadFinish}
    // signingUrlHeaders={{ additional: headers }}
    // signingUrlQueryParams={{ additional: queryparams }}
    signingUrlWithCredentials={ true }      // in case when need to pass authentication credentials via CORS
    uploadRequestHeaders={{ 'x-amz-acl': 'public-read' }}  // this is the default
    contentDisposition="auto"
    scrubFilename={(filename) => filename.replace(/[^\w\d_\-.]+/ig, '')}
    server=""
    inputRef={cmp => this.uploadInput = cmp}
    autoUpload={true}
    />

export default ReactS3Uploader;

I get this log when npm start

npm start > start.log 
(node:24402) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:24402) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

Had the same issue while using Create React App. Switch to webpack to fix the problem.

I think webpack auto polyfills in Node packages (like process). While CRA is made for front-end only. (react-s3-uploader probably comes with those packages since it is meant to handle both server and front-end in 1 package).