DataTable: ReferenceError: process is not defined regression in 7.1

[lee-m]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Current behavior

Rendering a route with a DataTable component results in the following error being displayed:

ReferenceError: process is not defined
at Function.createInlineStyle (http://localhost:3000/build/routes/index-KMD6POSB.js:1734:19)
at DataTable2.createResponsiveStyle (http://localhost:3000/build/routes/index-KMD6POSB.js:16092:50)
at DataTable2.componentDidMount (http://localhost:3000/build/routes/index-KMD6POSB.js:16613:14)
at commitLifeCycles (http://localhost:3000/build/_shared/chunk-B6UQWYWJ.js:14962:30)
at commitLayoutEffects (http://localhost:3000/build/_shared/chunk-B6UQWYWJ.js:16711:15)
at HTMLUnknownElement.callCallback2 (http://localhost:3000/build/_shared/chunk-B6UQWYWJ.js:3675:22)
at Object.invokeGuardedCallbackDev (http://localhost:3000/build/_shared/chunk-B6UQWYWJ.js:3700:24)
at invokeGuardedCallback (http://localhost:3000/build/_shared/chunk-B6UQWYWJ.js:3734:39)
at commitRootImpl (http://localhost:3000/build/_shared/chunk-B6UQWYWJ.js:16533:17)
at unstable_runWithPriority (http://localhost:3000/build/_shared/chunk-B6UQWYWJ.js:346:20)

This is a regression introduced in 7.1, seemingly by #2423 . Version 7.0 works fine.

Expected behavior
No crash.

Minimal reproduction of the problem with instructions
PrimeReactBug.zip

Simply run "npm install" then "npm run dev" and open localhost;3000 in the browser to observe the error.

Please tell us about your environment:

Windows 10, VS Code.

• React version:
  17.0.2

• PrimeReact version:
  Regression in 7.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome 96, Firefox 95

• Language: [all | TypeScript X.X | ES6/7 | ES5] *
  Typescript 4.1.2

[melloware]

I will investigate but how can 'process.env' not be available in your running environment?

[lee-m]

The error is shown in the browser so the problem appears to be that process.env is being evaluated client side rather than not being available at all.

[melloware]

So yeah looking at the Remix Run documentation here: https://remix.run/docs/en/v1/guides/envvars#server-environment-variables

You need to add npm add dotenv to add envrionment variables. VERY STRANGE they don't do this by default as its React standard to always have process.env in Create React App, Next, and every other React framework I have seen!

i will fix it though but for now just add npm add dotenv to fix your issue locally.

[melloware]

Also see this error in Remix Run: remix-run/remix#738

[melloware]

I added a defensive check for process in this PR: https://github.com/primefaces/primereact/pull/2525/files

[melloware]

So yes this check needs to happen in the browser because that is where its rendering this inline style. Might want to report a bug to the Remix Run team.

[rburgst]

same problem happens when I use vite with a standard react app

[melloware]

@rburgst interesting so neither Vite nor Remix run include process ? That seems so bizarre to me so how do you do things in your code like `process.env' in your code like...

/**
     * Is the application currently running in Dev mode?
     * 
     * @returns true if in Development mode, false if not
     */
    static isDevelopment() {
        return !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
    }

it seems so crazy to me process is not automatically included.

[rburgst]

vite has a different way of passing environment variables: https://vitejs.dev/guide/env-and-mode.html

[melloware]

@rburgst Ugghh so weird...not a huge fan of Vite. So when I modify my PR to try and add this...

       // Create React App and Next use process
        if (process) {
            nonce = process.env.REACT_APP_CSS_NONCE;
        }
        // Vite uses dotenv
        if (import) {
            nonce = import.meta.env.VITE_CSS_NONCE;
        }

This fails PrimeReact ESLINT because of...

./components/lib/utils/DomHandler.js
Error: error: Expected '(', got ')'

    |
889 |         if (import) {
    |                   ^

Import it knows is a reserved word so I find it so weird Vite chose that as a keyword?

[melloware]

OK it looks like this works!

static createInlineStyle() {
        let styleElement = document.createElement('style');
        let nonce = '';
        // CRA and Next
        if (process) {
            nonce = process.env.REACT_APP_CSS_NONCE;
        }
        // Vite
        if (!nonce && import.meta.env) {
            nonce = import.meta.env.VITE_CSS_NONCE;
        }
        // global variable
        if (!nonce) {
            nonce = PrimeReact.inlineCssNonce;
        }
        if (nonce) {
            styleElement.setAttribute('nonce', nonce);
        }

[mertsincan]

Fixed in #2423