00:00 Let's start on the server side. We're going to go to our server app. Right in here, we've got rendered a pipeable stream. We need to tell rendered pipeable stream, hey, when you come up to a client reference, I want you to take that ID of the client reference,

00:13 which is the file name with the pound sign and the named export. I want you to convert that into a client reference that doesn't have the full file path and all that stuff. We're going to create a module base path that is set to new URL dot dot slash UI.

00:32 We're just saying, hey, here's where our UI directory is. You could console log this if you'd like to. Then we'll pass that right here. In fact, I'll console log this. Whoops, console log module base path. We'll see what that actually looks like. Now, if we come over here to our RSE endpoint,

00:51 we're no longer going to get that error because it's not having an error. We can look for edit text in here. There it is. We are properly converting that the component or your client component ID into its serialized form. Now, the browser can take over from there.

01:11 If we take a look at our logs over here, then we'll see module base path is just the path to where all of our modules are. Super. A bundler is going to do this. It's with its own mechanisms and everything, but we're using native ESM, so that's pretty sweet. Coming back on the client side now,

01:29 if we go to our UI index file, all we need to do is say, hey, how do you convert this slash edit text into the URL where this lives? Well, actually, if we go to slash ui slash edit text.js, and here, there it is. Our server is going to serve that file.

01:49 We just need to update it so that it will go HTTP localhost 4000, UI edit text. So to do that and to make sure we are also not dependent on localhost because you don't want to ship that to production, we'll use window location origin slash UI. It will add our slash edit text.js to that,

02:08 and we will be in business. So let's try this out. Oh snap, it totally works. I can click on this and oh wow, it's actually focusing and we can do our fast Galaxy Cruiser. So yeah, we've got UI stuff going on here. This is awesome, super into this.

02:26 Well done. It just was two steps. First, we had to update our back-end code and then our UI code for handling this module resolution, and now with all the other work that we've done before, we can now use client components all over the code base.

02:45 Like I said, a bit of a mind bend, but now that we've got it, then our client components are really, really powerful. The composition is just so good. So good job.