Node.js Loader

๐Ÿ‘จโ€๐Ÿ’ผ Great job!
๐Ÿฆ‰ So when Node.js imports the file, instead of this:
'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");
And when I console.log(EditableText.toString()) in , I'm getting this:
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:
  1. All exports of this module are wrapped in registerClientReference.
  2. The error message is thrown when the function is called on the server (because it should not be).
  3. The path to the file is passed as the second argument to registerClientReference.
  4. 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.

Please set the playground first

Loading "Node.js Loader"
Loading "Node.js Loader"
Login to get access to the exclusive discord channel.
  • ๐ŸŽฃHooks
    General
    Terminal error when setting playground
    Natiq ๐Ÿš€:
    Every time I click on the "SET TO PLAYGROUND", the app stops with the following error. How can I fix...
    1 ยท 11 days ago
  • General
    Welcome to EpicReact.dev! Say Hello ๐Ÿ‘‹
    Kent C. Dodds โ—† ๐Ÿš€๐Ÿ†๐ŸŒŒ:
    Welcome to the first of many posts in the EpicReact.dev channel! Take a moment to introduce yourself...
    • ๐Ÿš€6
    59 ยท 13 days ago
  • ๐Ÿคนโ€โ™‚๏ธServer Components
    Issue with auth in React Server Components workshop
    gual:
    Hey, I'm having issues running the RSC workshop locally, specifically when logging in. I completed t...
    • โœ…1
    12 ยท 7 months ago
  • ๐Ÿคนโ€โ™‚๏ธServer Components
    In 4. Client Router / 05. Cache
    efrain ๐Ÿš€:
    Hey guys, I'm trying to understand the reason for using the `useContentCache` hook instead of direct...
    • โœ…1
    1 ยท 6 months ago
  • General
    error when installing the MCP server
    DBattou ๐Ÿš€:
    I tried to install the mcp server by following the instructions on the blog post here -> https://www...
    • ๐Ÿ‘1
    • โœ…1
    8 ยท 2 months ago
  • General
    Interviews with Experts -> Start Watching CTA gives regional restricted license error
    .shreyasvaidya ๐Ÿš€:
    I have purchased my course from India with the regional pricing method, and I am trying to watch the...
    • โœ…1
    4 ยท 4 months ago
  • General
    You are offline - warning
    marianavinyolas ๐ŸŒŒ ๐Ÿš€:
    Hi there! Today I want to start with the Advanced Patterns workshop, but after clone and run the rep...
    • โœ…1
    3 ยท 4 months ago
  • General
    โš›๏ธFundamentals
    Clicking on index.html when start opens in Terminal and not on the editor.
    Waddle ๐Ÿš€:
    Hello, just starting out with this and noticed that when I click on the 'index.html' file as display...
    • โœ…2
    1 ยท 4 months ago
  • General
    Am I following the course in the proper way?
    bauti ๐Ÿš€ ๐ŸŒŒ:
    The way im doing things in epic-react is: Clone the repo for the module i want to do (for example a...
    • โœ…1
    3 ยท 5 months ago
  • ๐ŸŽฃHooks
    General
    VSCode imports from wrong source
    mathemaat ๐Ÿš€:
    I encountered something silly that threw me off for a minute or two. I was working on the Tic Tac To...
    • โœ…1
    1 ยท 5 months ago
  • General
    Terminal Errors When Running Workshop App
    Giovanni ๐Ÿš€:
    Hello guys, I am facing an issue with the Workshop App, that basically I get this message over and...
    • โœ…1
    3 ยท 5 months ago
  • General
    Launch editor error: spawn code ENOENT
    Andrew Elans ๐ŸŒŒ ๐Ÿš€:
    Clicking index.html gives this error in VS Code. Both from Chrome and Safari. Anyone?
    • โœ…2
    6 ยท 10 months ago
  • General
    Cannot connect workshop app
    Philipp ๐Ÿš€:
    I try to connect with my Company MacBook and get the following error ๐Ÿ˜ฆ There was an error: unable t...
    • โœ…1
    5 ยท 6 months ago
  • General
    Problem generating the diff
    mikeyjmcc ๐Ÿš€:
    I am not sure what has changed but I am now receiving errors that the diff cannot be generated. This...
    • โœ…2
    1 ยท 6 months ago
  • General
    Problem with playground
    Xrayoptions ๐Ÿš€:
    Problem section doesn't show <@105755735731781632> how to fix it ?
    • โœ…1
    9 ยท 7 months ago
  • General
    How to run tests in IDE?
    anonymousBlack10:
    Is it possible to run the tests from the IDE or are they setup to be run just from the browser? Some...
    • โœ…1
    1 ยท 7 months ago
  • General
    Launch editor error: Could not open 'index.html' from:'playground' in the editor.
    Japhet ๐Ÿš€ ๐Ÿ† ๐ŸŒŒ:
    I'm encountering an issue when trying to open a link from the file list. The error message I receive...
    • โœ…1
    15 ยท 9 months ago
  • General
    AI Assistant?
    John ๐Ÿš€:
    Kent has mentioned an AI assistant that he's using in VSCode. Is there any detail on what that is an...
    • โœ…2
    2 ยท 9 months ago
  • General
    Script to save playground folder
    larissapissurno ๐Ÿš€:
    Hi all, I personally like to take notes on the playground files, so in order to not lose this notes ...
    • โœ…1
    2 ยท 9 months ago
  • General
    Runninng Learning app on iPad?
    marcus_polonus ๐Ÿš€ ๐ŸŒŒ:
    Hi all, Did anyone managed to setup learning app on iPad? I tried to use codesandbox, but when I am...
    • โœ…1
    1 ยท 9 months ago
  • General
    โš›๏ธFundamentals
    Error boundary good practice
    Lloren ๐Ÿš€:
    I have always wondered if the error boundary is there a limit of error boundary that you can impleme...
    • โœ…1
    1 ยท 9 months ago