npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mfng/webpack-rsc

v4.2.1

Published

A set of Webpack loaders and plugins for React Server Components

Downloads

41

Readme

Webpack RSC Integration

⚠️ Experimental

This library provides a set of Webpack loaders and plugins required for building a React Server Components (RSC) application bundle for the browser, as well as for the server, with server-side rendering (SSR).

The server bundle can be deployed to any serverless, edge, or Node.js-based environment.

@mfng/webpack-rsc can be used standalone as an RSC bundling solution or in conjunction with @mfng/core.

Disclaimer: There are many moving parts involved in creating an RSC app that also handles SSR, without using a framework like Next.js. This library only provides the necessary parts for bundling the app. For a fully working integration, see https://github.com/unstubbable/mfng.

Getting Started

To use this library in your React Server Components project, follow these steps:

  1. Install the library as a dev dependency:
npm install --save-dev @mfng/webpack-rsc
  1. Update your webpack.config.js to include the loaders and plugins provided by this library. See the example configuration below for reference.

Example Webpack Configuration

The following example demonstrates how to use the loaders and plugins in a Webpack configuration:

import {
  WebpackRscClientPlugin,
  WebpackRscServerPlugin,
  createWebpackRscClientLoader,
  createWebpackRscServerLoader,
  createWebpackRscSsrLoader,
  webpackRscLayerName,
} from '@mfng/webpack-rsc';

const clientReferencesMap = new Map();
const serverReferencesMap = new Map();

const rscServerLoader = createWebpackRscServerLoader({
  clientReferencesMap,
  serverReferencesMap,
});

const rscSsrLoader = createWebpackRscSsrLoader({serverReferencesMap});
const rscClientLoader = createWebpackRscClientLoader({serverReferencesMap});

const serverConfig = {
  name: 'server',
  // ...
  module: {
    rules: [
      {
        // Match the entry modules that should end up in the RSC layer:
        resource: [/\/server\/rsc\//, /\/app\.tsx$/],
        layer: webpackRscLayerName,
      },
      {
        // Match the modules that should end up in a shared layer (RSC & SSR):
        resource: /\/server\/shared\//,
        layer: 'shared',
      },
      {
        issuerLayer: webpackRscLayerName,
        resolve: {conditionNames: ['react-server', '...']},
      },
      {
        oneOf: [
          {
            issuerLayer: webpackRscLayerName,
            test: /\.tsx?$/,
            use: [rscServerLoader, 'swc-loader'],
          },
          {
            test: /\.tsx?$/,
            use: [rscSsrLoader, 'swc-loader'],
          },
          {
            issuerLayer: webpackRscLayerName,
            test: /\.m?js$/,
            use: rscServerLoader,
          },
          {
            test: /\.m?js$/,
            use: rscSsrLoader,
          },
        ],
      },
    ],
  },
  plugins: [
    new WebpackRscServerPlugin({clientReferencesMap, serverReferencesMap}),
  ],
  experiments: {layers: true},
  // ...
};

const clientConfig = {
  name: 'client',
  dependencies: ['server'],
  // ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [rscClientLoader, 'swc-loader'],
      },
      {
        test: /\.m?js$/,
        use: rscClientLoader,
      },
    ],
  },
  plugins: [new WebpackRscClientPlugin({clientReferencesMap})],
  // ...
};

export default [serverConfig, clientConfig];

Note: It's important to specify the names and dependencies of the configs as shown above, so that the plugins work in the correct order, even in watch mode.

Webpack Loaders and Plugins

This library provides the following Webpack loaders and plugins:

createWebpackRscServerLoader

A function to create the RSC server loader use item for the server entry webpack config. It should be used if the issuerLayer is webpackRscLayerName. This loader is responsible for replacing client components in a use client module with client references (objects that contain meta data about the client components), and removing all other parts of the client module. It also populates the given clientReferencesMap.

In addition, the loader handles server references for React server actions by adding meta data to all exported functions of a use server module, and also populates the given serverReferencesMap.

createWebpackRscSsrLoader

A function to create the RSC SSR loader use item for the server entry webpack config. It should be used if the issuerLayer is not webpackRscLayerName. This loader is responsible for replacing server actions in a use server module that are imported from client modules with stubs. The stubs are functions that throw an error, since React does not allow calling server actions during SSR (to avoid waterfalls). All other parts of the server module are removed. It also populates the given serverReferencesMap.

WebpackRscServerPlugin

The server plugin resolves the client references that the server loader has created, and adds them as additional includes to the bundle, so that they are available for server-side rendering (SSR).

The plugin also generates the server manifest that is needed for validating the server references of server actions (also known as mutations) that are sent back from the client. It also adds module IDs to the given serverReferencesMap.

createWebpackRscClientLoader

A function to create the RSC client loader use item for the client entry webpack config. This loader is responsible for replacing server actions in a use server module with server references (based on the given serverReferencesMap), and removing all other parts of the server module, so that the server module can be imported from a client module.

Note: Importing server actions from a client module requires that callServer can be imported from a module. Per default @mfng/core/client/browser is used as import source, but this can be customized with the callServerImportSource option.

WebpackRscClientPlugin

The client plugin resolves the client references that were saved by the server loader in clientReferencesMap into separate client chunks that can be loaded by the browser. This plugin also generates the React client manifest file that is needed for creating the RSC stream with ReactServerDOMServer.renderToReadableStream(), as well as the React SSR manifest that is needed for creating the HTML stream (SSR) with ReactServerDOMClient.createFromReadableStream().