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.
Login to get access to the exclusive discord channel.
  • 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 Β· 10 days 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 Β· 14 days 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 Β· 21 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
    58 Β· 12 days 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 Β· a month 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 Β· 2 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 Β· 2 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 Β· 6 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 Β· 3 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 Β· 3 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 Β· 3 months ago
  • General
    Problem with playground
    Xrayoptions πŸš€:
    Problem section doesn't show <@105755735731781632> how to fix it ?
    • βœ…1
    9 Β· 3 months 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...
    12 Β· 4 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 Β· 4 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 Β· 6 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 Β· 5 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 Β· 6 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 Β· 6 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 Β· 6 months ago
  • General
    Received this error when running the setup script for React Fundamentals
    ChrisP πŸš€:
    Hey guys, I am completely blocked at the moment. When I clone and run the setup for react fundamenta...
    • βœ…1
    2 Β· 6 months ago
  • General
    Unexpected server error (workshop-app does not load onboarding step)
    Matias 🌌 πŸš€:
    Hey! πŸ‘‹ I installed the free workshop "Build React Hooks" last week with no issues. Yesterday, whe...
    • βœ…1
    3 Β· 6 months ago
  • General
    Eye opening moment in 05/06 (β€žsatisfiesβ€œ operator of typescript)
    Chrigi πŸš€:
    Up until today I was not aware that having the type annotation on a variable is actually a type-cast...
    • πŸ™Œ2
    • βœ…1
    2 Β· 6 months ago
  • General
    Failed to fetch dynamically imported module...
    FacuPerezM 🌌:
    I am getting this error out of nowhere, in the 'test' tab inside the Workshop app. ``` Failed to f...
    • βœ…1
    3 Β· 6 months ago
  • General
    Epicshop not saving the video resolution
    Toni πŸš€ 🌌:
    Playback speed and caption settings are saved, but the video resolution always defaults to auto. Is ...
    • βœ…1
    7 Β· 6 months ago
  • General
    Clicking an exercise file launch VIM instead of VS Code
    DBattou πŸš€:
    I started going through the workshops, everything is setup and working fine except for opening a fil...
    • βœ…1
    2 Β· 6 months ago