omul omul - 1 year ago 105
React JSX Question

Can't find modules required in React

I was going through the React codebase, and I noticed how React's

doesn't quite behave like in Nodejs. I don't get what's going on here.

Looking at line 19 on ReactClass.js for instance, there's a
, but emptyObject isn't listed in package.json, nor does it say anywhere where that module's coming from.

I did find "emptyObject" on npmjs, but the API there seems different from the one used in React; the
grepped in React isn't related to emptyObject.

So where is emptyObject getting loaded from, and how is React's
doing what it's doing? This is not intuitive. At all.

Answer Source

The location of the emptyObject module which React refers to is Note that it doesn't follow the CommonJS module system.

To make it easier for Facebook to share and consume our own JavaScript. Primarily this will allow us to ship code without worrying too much about where it lives, keeping with the spirit of @providesModule but working in the broader JavaScript ecosystem.


The way of defining a module by adding @providesModule in the license header and loading those modules with require in Node is called Haste, a customized module system built for Facebook's open source projects.

In fact, unless you would like to understand the inner workings of React or contribute to Facebook's open source projects, you don't need to know that. In other words, it's not recommended to use Haste to write your own project.

Along the same lines, the invariant module being loaded at line 10 of ReactClass.js is declared at

As far as I know, both Eclipse and WebStorm don't support Haste so IDE can't help. But with Haste, the name of file and module should be the same, so you can find a module by searching for the filename, i.e. double shift in Webstorm and Ctrl+Shift+r in Eclipse. However, the emptyObject you asked about or invariant are not part of React so it's still cumbersome to find their origin.

Otherwise, there is a team that shares and organizes what they learn from hacking React that I contribute to occasionally and they have linked those requires by following Haste to the corresponding origin file e.g. You may want to see that.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download