Node.js Loader
π¨βπΌ Great job!
'use client'
import { createElement as h, useRef, useState } from 'react'
import { flushSync } from 'react-dom'
// ...
export function EditableText({ id, shipId, initialValue = '' }) {
// ...
}
It's getting this:
import {registerClientReference} from "react-server-dom-esm/server";
export const EditableText = registerClientReference(function() {throw new Error("Attempted to call EditableText() from the server but EditableText is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.");},"file:///Users/kentcdodds/code/epicweb-dev/react-server-components/playground/ui/edit-text.js","EditableText");
function() {throw new Error("Attempted to call EditableText() from the server but EditableText is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.");}
Meaning if I try to call it in the RSC environment, I get an error.
(If you added the logs, you should have seen something like that in the
console). That transformation is happening thanks to the loader you've
registered.
The important elements here are:
- All exports of this module are wrapped in
registerClientReference. - The error message is thrown when the function is called on the server (because it should not be).
- The path to the file is passed as the second argument to
registerClientReference. - The name of the export is passed as the third argument to
registerClientReference.
The
registerClientReference function uses the path and name to generate a
unique identifier for the client-side function. This identifier is used to
generate a reference when rendering our server components that use these client
components.No build tool. Just built-in runtime features of Node.js. Cool huh!?
π§ββοΈ I'm going to add some error boundaries in our app to get it ready for the
work you're going to do. Check out my changes if
you like.