Uncaught ReferenceError: process is not defined in Logger

[iamcrisb]

Describe the bug
Using the Custom Upload Button (asUploadButton) implementation from the provided example throws the following error in console: Uncaught ReferenceError: process is not defined

To Reproduce
Steps to reproduce the behavior:

1. Set up a react project with typescript/webpack
2. Add the https://github.com/rpldy/react-uploady/tree/master/packages/ui/upload-button custom button implementation
3. Visit the app in the browser
4. See error

Expected behavior
There should be no error.

Versions
"@rpldy/upload-button": "^0.10.0",
"@rpldy/uploady": "^0.10.0",
Ubuntu 18
Google Chrome

Code

[iamcrisb]

Apparently I fixed the issue by adding process.env as a variable available at runtime through webpack.
Is this as intended?

const dotenv = require('dotenv')

module.exports = {
  //...
  plugins: [`
    // ...
    new webpack.DefinePlugin({
       'process.env': JSON.stringify(dotenv.config().parsed) // it will automatically pick up key values from .env file
    })
    // ...
  ]
  //...
}```

[yoavniran]

Interesting. I dont think Ive ever encountered a situation when process.env wasnt available. Especially with webpack.
Curious that its not available in your setup.

In any case, Its a good idea for me to add protection against it not being there so I will do that shortly.

I do wonder though, if you build your app for production, wouldnt it make process.env === "production" ?

thanks

[iamcrisb]

I don't have process.env available at runtime. I declare some variables as build args on process.env at build time (process.env.NODE_ENV as production included) which get compiled by webpack and replaces them with the actual values. So even if in my code I have a process.env.exampleValue when it is gonna be compiled it will no longer look like that.

And if you wonder then why isn't it working the same for process.env.DEBUG the answer is - because I exclude node_modules from being compiled by webpack.

I think it would be a better approach to check for the existence of process.env to avoid these type of errors, also thank you for the fast reply.

[yoavniran]

Still curious. This is React's index.js:

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

I wonder how it works and Uploady's check doesnt.

[iamcrisb]

I wonder how it works and Uploady's check doesnt.

I am not compiling Uploady with webpack so any process.env variable that I inject into my code won't be available there because webpack is not even parsing those files.

Maybe passing a props with DEBUG_MODE to the component might be a better idea or even any different approach where we can explicitly specify these configs.

[yoavniran]

I am not compiling Uploady with webpack so any process.env variable that I inject into my code won't be available there because webpack is not even parsing those files.

Wouldnt that be the same for React though?

Uploady accepts a debug prop that enables debugging. This is another way if someone wants to enable it from bash/env

[yoavniran]

@cristianbuta version 0.11.1 is out with a fix.
Would love to hear if it solves the problem for you

[dbousamra]

This still seems to be an issue

[yoavniran]

@dbousamra ill need more information. Please open a new issue with all the details/repro you can provide

[dbousamra]

Basically for me the issue is occurring because I am running in an environment where process is not defined. The current code doesn't check for existence of process before dereferencing it:

https://github.com/rpldy/react-uploady/blob/master/packages/core/shared/src/utils/isProduction.js

Why is process not defined in my environement - well I am still digging into it. It seems to be related to some changes vite has made with production bundling.