[BUG] - Production build references `process`

[jdnarvaez]

NextUI Version

2.2.9

Describe the bug

it looks like the wrapped console.ts utility references process even after a production build which results in console errors:

// src/console.ts
var warningStack = {};
function warn(message, component, ...args) {
  var _a;
  const tag = component ? ` [${component}]` : " ";
  const log = `[Next UI]${tag}: ${message}`;
  if (typeof console === "undefined")
    return;
  if (warningStack[log])
    return;
  warningStack[log] = true;
  if (((_a = process == null ? void 0 : process.env) == null ? void 0 : _a.NODE_ENV) !== "production") {
    return console.warn(log, args);
  }
}

export {
  warn
};

chunk-RFUEKIFS.mjs:12 Uncaught ReferenceError: process is not defined
    at r_ (chunk-RFUEKIFS.mjs:12:76)
    at chunk-5U6DU2CK.mjs:56:7
    at Object.xa [as useMemo] (react-dom.production.min.js:179:119)
    at L.useMemo (react.production.min.js:25:208)
    at chunk-5U6DU2CK.mjs:34:19
    at ho (react-dom.production.min.js:167:137)
    at Pu (react-dom.production.min.js:193:57)
    at qa (react-dom.production.min.js:294:275)
    at Ga (react-dom.production.min.js:280:389)
    at Ed (react-dom.production.min.js:280:320)
r_ @ chunk-RFUEKIFS.mjs:12
(anonymous) @ chunk-5U6DU2CK.mjs:56
xa @ react-dom.production.min.js:179
L.useMemo @ react.production.min.js:25
(anonymous) @ chunk-5U6DU2CK.mjs:34
ho @ react-dom.production.min.js:167
Pu @ react-dom.production.min.js:193
qa @ react-dom.production.min.js:294
Ga @ react-dom.production.min.js:280
Ed @ react-dom.production.min.js:280
qr @ react-dom.production.min.js:280
Uu @ react-dom.production.min.js:273
vn @ react-dom.production.min.js:127
(anonymous) @ react-dom.production.min.js:267
Show 14 more frames
Show less

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Trigger a warning in NextUI by supplying an invalid prop in a production build

Expected behavior

I would expect that process.env would be transpiled away or conditionally chained such that it does not cause errors in the log

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[MiloWang2048]

Reproduced:

[wingkwong]

@MiloWang2048 can you list out some steps to show how to reproduce the issue? are you talking about the production build on nextui or on your application using nextui? if possible, please also share a sandbox environment for demonstration.

[jdnarvaez]

@wingkwong any time there is a warning generated this happens because of the code I pasted above.

https://github.com/nextui-org/nextui/blob/canary/packages/utilities/shared-utils/src/console.ts#L11

[wingkwong]

@jdnarvaez Sorry. Can you provide detailed steps on how to reproduce the issue or even a sandbox? I still don't get how to reproduce it.

[jdnarvaez]

@wingkwong you just have to have a next UI component throw a warning and it will display this error. the problem is that process is not defined in a browser context, so that line I linked to is invalid. Whatever bundler you are using needs to extract process to its appropriate transpiled variable.

[wingkwong]

Can you share which components you used for producing the warning and error? Some sample code would be appreciated.

[jdnarvaez]

I'll have to see if I have time outside of work to reproduce this, I cannot share anything from work that we use this library in

[jdnarvaez]

I linked to the line of problematic code, process.env is not defined in a browser. Your bundling scheme should extract this to an injected variable, and it clearly is not doing that.