"process is not defined", when using Typescript (MRE included)

[Robert Kieffer]

🐛 bug report

1. This is on parcel@latest
2. I've winnowed this down as much as possible (see attached ZIP archive)
3. I know you have to reference a specific property on process.env for it to work properly. :-)

🎛 Configuration (.babelrc, package.json, cli command)

See attached MRE and envinfo, below

🤔 Expected Behavior

In the attached MRE, you should see the value of process.env.BUGSNAG_KEY ("00000000000000000000000000000000 " as defined in .env file) in the browser.

😯 Current Behavior

The browser is blank because the script throws (as seen in the console) this:

Uncaught ReferenceError: process is not defined at window.onload (index.ts:8:29)

💻 Code Sample

To reproduce this issue:

1. Download and unzip parcel_process_bug.zip
2. cd parcel_process_bug
3. npm install && npm start
4. Open http://localhost:1234 (or whatever URL parcel happens to be running on)

Notice: The page is blank page. In the dev tools console you'll see the error described above.

Furthermore... In index.html, if you change "index.ts" to "index.js" (i.e. circumvent the need for TS compilation), it works as expected.

🌍 Your Environment

$ node --version
v20.11.1

$ npm --version
10.2.4

$ parcel --version
5.12.0

$ npx envinfo --system --browsers --npmPackages --binaries

  System:
    OS: macOS 14.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 71.92 MB / 64.00 GB
    Shell: 5.2.15 - /opt/homebrew/bin/bash
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.11.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 8.15.4 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
    Watchman: 2023.10.09.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 123.0.6312.123
    Safari: 17.2

[Robert Kieffer]

quick note: I've been able to workaround this issue in my TS-based project (https://github.com/npmgraph/npmgraph) by creating a small JS module that just exports the necessary env-var, and importing that into my TS code:

// file: "bugsnag_key.js"
const BUGSNAG_KEY = process.env.BUGSNAG_KEY;
export default BUGSNAG_KEY;

I should also note that this code was working fine until I updated a slew of the project's dependencies. 'Not sure what changed that caused this to break.

[Robert Kieffer]

More breadcrumbs ...

Removing the declare let process type declaration from index.ts also appears to fix the problem. I.e., so index.ts looks like this:

window.onload = function () {
  // @ts-ignore (so TSC doesn't complain.  :-( )
  document.body.innerHTML = process.env.BUGSNAG_KEY;
}

I'm going to leave this open, as being able to properly declare the shape of process seems like a reasonable expectation.