Module Resolution
π¨βπΌ We've successfully converted any of our
'use client' modules into special
modules which register themselves as client references. Now we need to help
react-server-dom-esm resolve these properly when generating the RSC payload
and resolve that to the correct URL for loading the client module in the
browser.On the server-side, we need to tell
renderToPipeableStream how to convert the
full-path file URL of our client modules into relative URLs the browser can use.
This will also allow renderToPipeableStream to warn us if any client modules
are imported outside of the proper base directory. So you need to pass the path
to the base directory of our client modules as the second argument to
renderToPipeableStream:renderToPipeableStream(h(App), moduleBasePath)
On the client-side, we need to tell
createFromFetch how to convert the
relative path into a full URL for fetching the client module.createFromFetch(promise, { moduleBaseURL })
Because
react-server-dom-esm is the one performing the dymamic import, all
imports will be relative to that module. On the client, we're loading it from
esm.sh, so we'll want to make sure we give the full URL to
our server including the origin.Once you're finished with this, you may want to take a look at what the RSC
payload looks like on a page with a client component.