module() — react Function Reference

Architecture documentation for the module() function in transform-error-messages.js from the react codebase.

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ module() — react Function Reference

Dependency Diagram

graph TD
  65ada625_01ab_c1af_288d_f6fa9d810219["module()"]
  d840bdde_5ce7_b4a9_168e_b59e2a94275f["transform-error-messages.js"]
  65ada625_01ab_c1af_288d_f6fa9d810219 -->|defined in| d840bdde_5ce7_b4a9_168e_b59e2a94275f
  style 65ada625_01ab_c1af_288d_f6fa9d810219 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

scripts/error-codes/transform-error-messages.js lines 20–154

module.exports = function (babel) {
  const t = babel.types;

  function ErrorCallExpression(path, file) {
    // Turns this code:
    //
    // new Error(`A ${adj} message that contains ${noun}`);
    //
    // or this code (no constructor):
    //
    // Error(`A ${adj} message that contains ${noun}`);
    //
    // into this:
    //
    // Error(formatProdErrorMessage(ERR_CODE, adj, noun));
    const node = path.node;
    if (node[SEEN_SYMBOL]) {
      return;
    }
    node[SEEN_SYMBOL] = true;

    const errorMsgNode = node.arguments[0];
    if (errorMsgNode === undefined) {
      return;
    }

    const errorMsgExpressions = [];
    const errorMsgLiteral = evalStringAndTemplateConcat(
      errorMsgNode,
      errorMsgExpressions
    );

    if (errorMsgLiteral === 'react-stack-top-frame') {
      // This is a special case for generating stack traces.
      return;
    }

    let prodErrorId = errorMap[errorMsgLiteral];
    if (prodErrorId === undefined) {
      // There is no error code for this message. Add an inline comment
      // that flags this as an unminified error. This allows the build
      // to proceed, while also allowing a post-build linter to detect it.
      //
      // Outputs:
      //   /* FIXME (minify-errors-in-prod): Unminified error message in production build! */
      //   /* <expected-error-format>"A % message that contains %"</expected-error-format> */
      //   if (!condition) {
      //     throw Error(`A ${adj} message that contains ${noun}`);
      //   }

      let leadingComments = [];

      const statementParent = path.getStatementParent();
      let nextPath = path;
      while (true) {
        let nextNode = nextPath.node;
        if (nextNode.leadingComments) {
          leadingComments.push(...nextNode.leadingComments);
        }
        if (nextPath === statementParent) {
          break;
        }
        nextPath = nextPath.parentPath;
      }

      if (leadingComments !== undefined) {
        for (let i = 0; i < leadingComments.length; i++) {
          // TODO: Since this only detects one of many ways to disable a lint
          // rule, we should instead search for a custom directive (like
          // no-minify-errors) instead of ESLint. Will need to update our lint
          // rule to recognize the same directive.
          const commentText = leadingComments[i].value;
          if (
            commentText.includes(
              'eslint-disable-next-line react-internal/prod-error-codes'
            )
          ) {
            return;
          }
        }
      }