Bypass bundlers detection of the require statement
In this article, we analyse how React source code bypasses bundlers’ detection of require statement.
By concatenating the string “require” with a random number (Math.random()), the code generates a string that looks like “require”, but is not directly recognizable by the bundler during static analysis. The string is then sliced to get the first 7 characters, ensuring that the result is always “require” (since “require” + Math.random() will result in something like “require0.123456”, which is sliced to “require”).
All this trouble to invoke a MacroTask called setImmediate that is available in Node environment.
setImmediate
When you want to execute some piece of code asynchronously,
but as soon as possible, one option is to use the setImmediate() function provided by Node.js:
setImmediate(() => {
// run something
});Any function passed as the setImmediate() argument is a callback that’s executed in the next iteration of the event loop.
Read more about setImmediate at Nodejs Docs.
Why avoid bundlers detecting require?
Browser environments don’t need Node.js modules:
React needs to differentiate between the Node.js environment (where setImmediate is used) and the browser environment (where MessageChannel is used). If a bundler detects require, it might automatically include a Node.js polyfill in the browser bundle, which is unnecessary and can bloat the code.
Avoid accidental polyfill inclusion:
Bundlers, like Webpack, often include polyfills for Node.js APIs when they detect require. This is problematic for a lightweight library like React, where such polyfills are unnecessary and may interfere with React’s own logic for handling environments (browser vs. Node.js).
This enqueueTask is a fallback method used in ReactAct.js
// $FlowFixMe[invalid-computed-prop]
const nodeRequire = module && module[requireString];
// assuming we're in node, let's try to get node's
// version of setImmediate, bypassing fake timers if any.
enqueueTaskImpl = nodeRequire.call(module, 'timers').setImmediate;timers is a core module in Node.js. It provides a set of timer functions that can be used to schedule code execution at specific intervals or after a delay. These functions are similar to the global timer functions in
JavaScript (like setTimeout and setInterval), but they are provided as part of the timers module for additional control and precision.
nodeRequire.call(module, 'timers')About me:
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — https://www.youtube.com/@thinkthroo
Learning platform — https://thinkthroo.com
Codebase Architecture — https://app.thinkthroo.com/architecture
Best practices — https://app.thinkthroo.com/best-practices
Production-grade projects — https://app.thinkthroo.com/production-grade-projects