Parcel: 🐛 Cannot find name 'process'

[jbrodriguez]

Choose one: is this a 🐛 bug report or 🙋 feature request?
🐛 bug

I can't find a way to find out whether the app is running on a dev or a prod environment.

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

.babelrc

{
  "presets": ["env", "react"],
  "plugins": ["transform-inline-environment-variables"]
}

I tried without the plugin first.

package.json

{
    "name": "godupes",
    "version": "0.0.1",
    "main": "src/app.tsx",
    "scripts": {
        "start": "parcel src/index.html",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "license": "MIT",
    "dependencies": {
        "flexboxgrid": "^6.3.1",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-redux": "^5.0.6",
        "react-router-dom": "^4.2.2",
        "redux": "^3.7.2",
        "redux-saga": "^0.16.0",
        "styled-components": "^2.2.4",
        "tachyons": "^4.9.0"
    },
    "devDependencies": {
        "@types/react": "^16.0.30",
        "@types/react-dom": "^16.0.3",
        "@types/react-redux": "^5.0.14",
        "@types/react-router-dom": "^4.2.3",
        "@types/redux-saga": "^0.10.5",
        "babel-plugin-transform-inline-environment-variables": "^0.2.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-react": "^6.24.1",
        "parcel-bundler": "^1.2.0",
        "parcel-plugin-typescript": "^0.2.3",
        "tslint": "^5.8.0",
        "typescript": "^2.6.2"
    }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es2015",
        "module": "commonjs",
        "jsx": "react",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "noUnusedParameters": true,
        "noUnusedLocals": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "baseUrl": "."
    }
}

🤔 Expected Behavior

Should allow using process.env.NODE_ENV to determine whether dev/prod

😯 Current Behavior

Returns an error: "Cannot find name 'process'

❯ npm start

> [email protected] start /Volumes/Users/dev/code/src/testing/godupes/client
> parcel src/index.html

⏳  Building...
Server running at http://localhost:1234
✨  Built in 6.28s.
🚨  /Volumes/Users/dev/code/src/testing/godupes/client/src/store.ts(39,3)
Cannot find name 'process'.
    38 |    const composeEnhancers =
  > 39 |        process.env.NODE_ENV === 'development'
       |        ^^^^^^^
    40 |            ? (window as any)['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] || compose

💁 Possible Solution

Tried with

__DEV__ 

global variable, but it doesn't work either

🔦 Context

N/A

🌍 Your Environment

| Software | Version(s)
| ---------------- | ----------
| Parcel | 1.2.0
| Node | 8.4.0
| npm/Yarn | 5.5.1
| Operating System | macOS 10.12.6

[devongovett]

• parcel has builtin support for inlining environment variables: no need for that babel plugin.
• this seems like a typescript issue maybe caused by noUnusedLocals? process is a "global" variable defined by node.js and shimmed by parcel. you'll need to configure typescript to ignore this global variable.

[jbrodriguez]

Ok, for the record, I solved it by doing

import * as process from 'process'

where I needed to access process

[mohsen1]

for future readers:

you need to

yarn add @types/node

[vincaslt]

While the above might work, it does not make much sense to import the whole NodeJS typings for browser environment, where the only similarity is only the environment variables. I suggest writing your own declarations:

// process.d.ts
declare const process: {
  env: {
    NODE_ENV: string;
    OTHER_VAR: string;
  }
}

[WrathZA]

see: https://github.com/wmonk/create-react-app-typescript/issues/93#issuecomment-396885127

I had that issue and the root cause was from my tsconfig.json
adding "node" to list "compilerOptions"."types" solve the issue.

This worked for me.

[Kogam22]

see: wmonk/create-react-app-typescript#93 (comment)

I had that issue and the root cause was from my tsconfig.json
adding "node" to list "compilerOptions"."types" solve the issue.

This worked for me.

Where to add "node" in compilerOptions ? I don't have any types object here.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}