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.

<p>nodeRequire.call(module, 'timers')</p>

About us:

At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

Up skill your team with our advanced courses based on codebase architecture. Reach out to us at hello@thinkthroo.com to learn more!

References:

1. https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/shared/enqueueTask.js#L23

2. https://nodejs.org/en/learn/asynchronous-work/understanding-setimmediate

3. https://nodejs.org/api/timers.html#setimmediatecallback-args

The above is the detailed content of Bypass bundlers' detection of the require statement. For more information, please follow other related articles on the PHP Chinese website!