Packager error: "Can't find variable: process"

[richardgirges]

Do you want to request a feature or report a bug?
Bug

Behavior
The issue was initially discovered in #65 after people began using the latest metro-bundler 0.20.0 version to work around dynamic requires in packages like moment.js

Packager throws the following error when bundling:

Unhandled JS Exception: Can't find variable: process

Repro Steps

1. Add metro-bundler 0.20.0 to package.json as a "resolutions" entry for react-native:

"resolutions": {
  "react-native/metro-bundler": "0.20.0"
}

2. Run react-native run-ios as normal.

NOTE: The fact that this issue manifested for people in metro-bundler@0.20.0 is a red herring. This issue appears to be happening with older versions of metro-bundler as well. I've confirmed the same error appears in metro-bundler@0.19.0. I haven't tried to reproduce it in any versions older than 0.19.0 yet.

Environment
Node: v8.5.0

package.json

  "dependencies": {
    "react": "16.0.0-beta.5",
    "react-native": "0.49.3"
  },
  "resolutions": {
    "react-native/metro-bundler": "0.19.0"  
  },

[tqc]

I ran into that one last week. It seems to be related to the order things get packaged in - react native polyfills process.env, but does it after react tries to check if it is running in dev mode.

Putting the first RN import before the first react import seems to have fixed it, but it was working fine the other way around on previous versions.

[cpojer]

Would be good to figure out which module is throwing this.

[tqc]

In my case it was react - unlike #65 it’s not just a bundler setting/ error message. Were previous releases perhaps effectively hardcoded to load react native before anything else?

[mackenziemance]

@richardgirges Any updates on this ?

[brunocascio]

Please, take a look at this issue.

[fungilation]

Since moment is reverting their fix, a fix in Bundler would be appreciated!

[zuoge85]

+1

[tsyeyuanfeng]

process is set up in InitializeCore module of react-native.

// InitializeCore.js
// Set up process
global.process = global.process || {};
global.process.env = global.process.env || {};
if (!global.process.env.NODE_ENV) {
  global.process.env.NODE_ENV = __DEV__ ? 'development' : 'production';
}

So InitializeCore module must run before entry module. Previously, runBeforeMainModule config was specified in defaults.js where InitializeCore is included. But it has been removed from metro-bundler in this commit Make the runBeforeMainModule config param to RN repo and make it absolute recently. However, it seems that there are some problems with this commit, I've created another issue #78 to disscus about this.

[tqc]

@tsyeyuanfeng That would explain why things suddenly stopped working.

See also the corresponding RN commit facebook/react-native@34487c0

Looks like that commit isn’t part of 0.49, but is tagged as v0.50.0-rc0 - it will work just fine with facebook’s internal setup (master of both in a single repo) but the open source dependencies are broken at the moment.

[amardeepranu]

Getting this error when trying to run on a device on RN v0.50.2

[blackxored]

Can confirm that 0.50.2 has this error. It only happens on release build for me though.

[JumalDB]

I have this issue too on 0.50.2. Is there any workarounds?

[rafeca]

We have just released metro-bundler v0.20.2, which should solve this issue. Can somebody confirm?

[JumalDB]

It seems to fix Debug build (which can be run on ios devices now), however there is another Release build issue now:
facebook/react-native#16745

[PvanHengel]

We are seeing the same release build issue in ios, we didn't have any issues with the debug build. The Unhandled JS Exception: undefined is not an object (evaluating 'e.length')', reason: 'Unhandled JS Exception: undefined is not an object (evaluating 'e.length') is a major blocker, do we need to open another issue for that here, or should we keep this one open?

[bnjm]

@PvanHengel updating to RN 0.50.3 fixed this for me... hopefully fixes for you too.

[SSTPIERRE2]

Upgrading to RN 0.50.3 fixed this same issue for me too with a new project created this week! I hope upgrading fixes this for you all as well, and if you haven't done it before here's the doc: https://facebook.github.io/react-native/docs/upgrading.html cheers!

[JumalDB]

RN 0.50.3 does not fix that another issue:
Unhandled JS Exception: undefined is not an object (evaluating 'e.length')

[PvanHengel]

@JuliusMalisauskasDB see facebook/react-native#16745 it is related to an issue which has been merged with the color-convert library. I believe the fix was merged.

[rmevans9]

@JuliusMalisauskasDB I resolved this issue with a yarn resolution to set color-convert to 1.9.1. There are a few libraries that seem to depend specifically on 1.9.0. For me it was react-native-svg

[DiederikvandenB]

I'm on 0.50.3 and I am still experiencing this issue.

[flylxq]

On 0.50.4 I am having this issue.

[rafeca]

Can you check which version of metro-bundler are you using? To do so, check for the metro-bundler entry on your yarn.lock file.

This issue was fixed in v0.20.2

[nsipplswezey]

Ran into the same error with a fresh clone+build of a previously functional project.

    "dependencies": {
        "react": "16.0.0",
        "react-native": "0.50.4"
    },

Did an rm yarn.lock and rm package-lock.json and an npm i.
Now my package-lock.json is:

        "metro-bundler": {                                                      
            "version": "0.20.3",
            "resolved": "https://registry.npmjs.org/metro-bundler/-/metro-bundler-0.20.3.tgz",

Though my node_modules/react-native/package.json shows

    "metro-bundler": "^0.20.1",  

Regardless I'm back up and running.
For anyone else stuck on this, my issue seemed to be an old yarn.lock file from maybe from an old yarn install, when currently I'm using npm install.

[rafeca]

Thanks @nsipplswezey for shedding some light. In fact, package manager lock files will prevent updating to the metro version that fixed this issue (v0.20.3).

For anyone stumbling across this issue, remove the metro entry in your package-lock.json/yarn.lock file and npm install/yarn install again

[glarivie]

On RN0.50.4, with metro-bundle@0.20.3 I am having this issue.

[rafeca]

@hqro are you sure that the metro version that you're using is 0.20.3? Can you post the whole error stack trace you're getting?

[leavesster]

run react-native upgrade and close proxy(I don't think the proxy is the problem , but these are two things I done, after I have this issue) fix this problem.

My version:

react-native -v
react-native-cli: 2.0.1
react-native: 0.50.1

[glarivie]

@rafeca this is my yarn.lock

metro-bundler@^0.20.1, metro-bundler@^0.20.3:
  version "0.20.3"
  resolved "https://registry.yarnpkg.com/metro-bundler/-/metro-bundler-0.20.3.tgz#0ded01b64e8963117017b106f75b83cfc34f3656"

[albertobram]

I am running into this issue as well, I have these versions of the components:
metro-bundler 0.20.3
react 16.0.0
react-native 0.50.3

[janicduplessis]

@rafeca Just hit this issue with metro@0.23.0. It only happens when generating a prod bundle. Looking at the bundle a module that uses process.env (in my case invariant) appears before the InitializeCore module. This causes it to be executed before process.env polyfill is setup. As a workaround I added import 'InitializeCore'; at the top of my index.js and now it works.

[rafeca]

Hey @janicduplessis! Are you trying it with RN master?

I cannot repro it in my silly sample RN app: https://github.com/rafeca/rn-test-app if you have some repro steps I can take a deeper look

[rafeca]

Ok, I've just actually been able to reproduce it, a fix is coming

[leai-jiang]

Also have this issue on react-native 0.52

[fungilation]

Works for me on 0.52.