Node.js Integration

/**
 * Registers Node.js module hooks for directive processing
 * Hooks into the Node.js module system to handle RSC directives
 */
function register(): void;

// Register hooks before importing any server components
const register = require("react-server-dom-webpack/node-register");
register();

// Now you can import modules with directives
const ServerComponent = require("./ServerComponent"); // Contains "use server"
const ClientComponent = require("./ClientComponent"); // Contains "use client"

{
  "scripts": {
    "dev": "node -r react-server-dom-webpack/node-register src/server.js",
    "start": "node --require react-server-dom-webpack/node-register dist/server.js"
  }
}

// server.js
require("react-server-dom-webpack/node-register")();

// Import React Server Components after registration
const { renderToPipeableStream } = require("react-server-dom-webpack/server.node");
const App = require("./App"); // Can contain RSC directives

function handleRequest(req, res) {
  const { pipe } = renderToPipeableStream(<App />, clientManifest);
  pipe(res);
}

// components/Button.js
"use client";

import { useState } from "react";

export function Button({ children, onClick }) {
  const [loading, setLoading] = useState(false);
  // ... component implementation
}

// After processing, exports become client module proxies
// that reference the client-side bundle

// actions/userActions.js
"use server";

export async function updateUser(userData) {
  // This function is registered as a server reference
  return await database.users.update(userData);
}

export async function deleteUser(userId) {
  // This function is also registered as a server reference
  return await database.users.delete(userId);
}

// After processing, functions can be called from client components

// server/index.js
// Register before any imports
require("react-server-dom-webpack/node-register")();

// Safe to import RSC modules after registration
const express = require("express");
const { renderToPipeableStream } = require("react-server-dom-webpack/server.node");
const App = require("../components/App");

const app = express();

app.get("/", (req, res) => {
  const { pipe } = renderToPipeableStream(<App />, clientManifest);
  res.setHeader("Content-Type", "text/html");
  pipe(res);
});

// utils/setup.js
let registered = false;

function ensureRegistered() {
  if (!registered) {
    require("react-server-dom-webpack/node-register")();
    registered = true;
  }
}

module.exports = { ensureRegistered };

// Use in multiple entry points
const { ensureRegistered } = require("./utils/setup");
ensureRegistered();

// server/setup.js
if (process.env.NODE_ENV === "development") {
  // Enable directive processing in development
  require("react-server-dom-webpack/node-register")();
}

// In production, components are pre-processed during build

// This will throw an error
"use client";
"use server"; // Cannot have both directives

// Error message:
// "Cannot have both 'use client' and 'use server' directives in the same file."

// Malformed syntax in directive file
"use client";
export function Component() {
  // Syntax error here
  return <div>Hello</div>
}

// Error logged to console:
// "Error parsing [filename] [error message]"

// package.json
{
  "type": "module",
  "scripts": {
    "dev": "node --loader react-server-dom-webpack/node-loader src/server.js"
  }
}

// server.js (ESM)
import { renderToPipeableStream } from "react-server-dom-webpack/server.node";
import App from "./components/App.js";

// ESM loader automatically processes directives
export function handleRequest(req, res) {
  const { pipe } = renderToPipeableStream(<App />, clientManifest);
  pipe(res);
}

// next.config.js (example integration)
module.exports = {
  experimental: {
    serverComponentsExternalPackages: ["react-server-dom-webpack"]
  },
  webpack: (config, { isServer }) => {
    if (isServer) {
      // Ensure registration happens in server environment
      config.plugins.push({
        apply(compiler) {
          compiler.hooks.beforeRun.tap("RSCRegister", () => {
            require("react-server-dom-webpack/node-register")();
          });
        }
      });
    }
    return config;
  }
};

// test/setup.js
const register = require("react-server-dom-webpack/node-register");

// Register before running tests
beforeAll(() => {
  register();
});

// test/server-components.test.js
const ServerComponent = require("../components/ServerComponent");

test("server component renders correctly", async () => {
  // ServerComponent contains "use server" directive
  const result = await ServerComponent.someAction();
  expect(result).toBeDefined();
});

// dev-server.js
const chokidar = require("chokidar");

// Watch for changes and re-register
chokidar.watch("./src/**/*.js").on("change", (path) => {
  // Clear module cache
  delete require.cache[require.resolve(path)];
  
  // Re-register to pick up directive changes
  require("react-server-dom-webpack/node-register")();
});

// First import processes and caches the module
const Component1 = require("./MyComponent");

// Second import uses cached result
const Component2 = require("./MyComponent"); // Same instance

// Fast path: no parsing needed
if (content.indexOf('use client') === -1 && content.indexOf('use server') === -1) {
  return originalCompile.apply(this, arguments);
}

// Only parse files that might contain directives

// No exported types - register() is a side-effect function
// The registration affects the module loading behavior globally

interface ModuleCompilerHook {
  /** Original Node.js module compilation function */
  _compile(content: string, filename: string): void;
}

interface DirectiveInfo {
  /** Whether file contains "use client" */
  useClient: boolean;
  /** Whether file contains "use server" */
  useServer: boolean;
  /** Parsed AST body for directive detection */
  body: any[];
}

// Set environment variable for debugging
process.env.DEBUG = "react-server-dom-webpack:*";

require("react-server-dom-webpack/node-register")();