module() — react Function Reference

Architecture documentation for the module() function in ReactFlightWebpackNodeRegister.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ module() — react Function Reference

Dependency Diagram

graph TD
  d8aa4aa4_09ab_59e3_9a19_274aa5ae2862["module()"]
  b81c7ba1_9aee_0d7d_2615_441df10f0aed["ReactFlightWebpackNodeRegister.js"]
  d8aa4aa4_09ab_59e3_9a19_274aa5ae2862 -->|defined in| b81c7ba1_9aee_0d7d_2615_441df10f0aed
  style d8aa4aa4_09ab_59e3_9a19_274aa5ae2862 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js lines 16–109

module.exports = function register() {
  const Server: any = require('react-server-dom-webpack/server');
  const registerServerReference = Server.registerServerReference;
  const createClientModuleProxy = Server.createClientModuleProxy;

  // $FlowFixMe[prop-missing] found when upgrading Flow
  const originalCompile = Module.prototype._compile;

  // $FlowFixMe[prop-missing] found when upgrading Flow
  Module.prototype._compile = function (
    this: any,
    content: string,
    filename: string,
  ): void {
    // Do a quick check for the exact string. If it doesn't exist, don't
    // bother parsing.
    if (
      content.indexOf('use client') === -1 &&
      content.indexOf('use server') === -1
    ) {
      return originalCompile.apply(this, arguments);
    }

    let body;
    try {
      body = acorn.parse(content, {
        ecmaVersion: '2024',
        sourceType: 'source',
      }).body;
    } catch (x) {
      console['error']('Error parsing %s %s', url, x.message);
      return originalCompile.apply(this, arguments);
    }

    let useClient = false;
    let useServer = false;
    for (let i = 0; i < body.length; i++) {
      const node = body[i];
      if (node.type !== 'ExpressionStatement' || !node.directive) {
        break;
      }
      if (node.directive === 'use client') {
        useClient = true;
      }
      if (node.directive === 'use server') {
        useServer = true;
      }
    }

    if (!useClient && !useServer) {
      return originalCompile.apply(this, arguments);
    }

    if (useClient && useServer) {
      throw new Error(
        'Cannot have both "use client" and "use server" directives in the same file.',
      );
    }

    if (useClient) {
      const moduleId: string = (url.pathToFileURL(filename).href: any);
      this.exports = createClientModuleProxy(moduleId);
    }

    if (useServer) {
      originalCompile.apply(this, arguments);

      const moduleId: string = (url.pathToFileURL(filename).href: any);

      const exports = this.exports;

      // This module is imported server to server, but opts in to exposing functions by
      // reference. If there are any functions in the export.
      if (typeof exports === 'function') {
        // The module exports a function directly,
        registerServerReference(
          (exports: any),
          moduleId,
          // Represents the whole Module object instead of a particular import.
          null,
        );