diff --git a/fixtures/flight-vite/server/region.js b/fixtures/flight-vite/server/region.js index 58c6dfb98a67b..8b8cf8d0d0faa 100644 --- a/fixtures/flight-vite/server/region.js +++ b/fixtures/flight-vite/server/region.js @@ -66,7 +66,9 @@ async function createApp() { loadModule = async entry => { return await viteServer.ssrLoadModule( - path.resolve(viteServer.config.root, entry) + path.isAbsolute(entry) + ? entry + : path.join(viteServer.config.root, entry) ); }; } else { @@ -124,7 +126,7 @@ async function createApp() { const serverReference = req.get('rsc-action'); if (serverReference) { // This is the client-side case - const [filepath, name] = JSON.parse(serverReference); + const [filepath, name] = serverReference.split('#'); const action = (await loadModule(filepath))[name]; // Validate that this is actually a function we intended to expose and // not the client trying to invoke arbitrary functions. In a real app, diff --git a/fixtures/flight-vite/src/index.js b/fixtures/flight-vite/src/index.js index f4580e0d25776..66b00364cd9e0 100644 --- a/fixtures/flight-vite/src/index.js +++ b/fixtures/flight-vite/src/index.js @@ -24,7 +24,7 @@ async function callServer(id, args) { method: 'POST', headers: { Accept: 'text/x-component', - 'rsc-action': JSON.stringify(id), + 'rsc-action': id, }, body: await encodeReply(args), }); diff --git a/packages/react-server-dom-vite/src/ReactFlightClientConfigViteBundler.js b/packages/react-server-dom-vite/src/ReactFlightClientConfigViteBundler.js index 7a124ef3b12ad..ddfb8c2c43bf0 100644 --- a/packages/react-server-dom-vite/src/ReactFlightClientConfigViteBundler.js +++ b/packages/react-server-dom-vite/src/ReactFlightClientConfigViteBundler.js @@ -17,17 +17,9 @@ export type SSRManifest = string; // Module root path export type ServerManifest = string; // Module root path -export type ServerReferenceId = - | [ - string, // module path - string, // export name - ] - | string; +export type ServerReferenceId = string; -export opaque type ClientReferenceMetadata = [ - string, // module path - string, // export name -]; +export opaque type ClientReferenceMetadata = string; // eslint-disable-next-line no-unused-vars export opaque type ClientReference = { @@ -39,9 +31,10 @@ export function resolveClientReference( bundlerConfig: SSRManifest, metadata: ClientReferenceMetadata, ): ClientReference { + const [specifier, name] = metadata.split('#'); return { - specifier: metadata[0], - name: metadata[1], + specifier, + name, }; } @@ -49,16 +42,10 @@ export function resolveServerReference( config: ServerManifest, id: ServerReferenceId, ): ClientReference { - if (typeof id === 'string') { - const [specifier, name] = id.split(','); - return { - specifier, - name, - }; - } + const [specifier, name] = id.split('#'); return { - specifier: id[0], - name: id[1], + specifier, + name, }; } diff --git a/packages/react-server-dom-vite/src/ReactFlightViteRuntime.js b/packages/react-server-dom-vite/src/ReactFlightViteRuntime.js index 1eadf79de50b5..bd78f55a80d2a 100644 --- a/packages/react-server-dom-vite/src/ReactFlightViteRuntime.js +++ b/packages/react-server-dom-vite/src/ReactFlightViteRuntime.js @@ -197,7 +197,7 @@ export function createClientReference( const clientReference = Object.defineProperties(({}: any), { $$typeof: {value: CLIENT_REFERENCE}, // Represents the whole Module object instead of a particular import. - $$id: {value: [moduleId, name], configurable: true}, + $$id: {value: `${moduleId}#${name}`}, $$async: {value: false}, }); return new Proxy(clientReference, proxyHandlers); @@ -211,7 +211,7 @@ export function createServerReference( const serverReference = Object.defineProperties(fn, { $$typeof: {value: SERVER_REFERENCE}, // Represents the whole Module object instead of a particular import. - $$id: {value: [moduleId, name], configurable: true}, + $$id: {value: `${moduleId}#${name}`}, $$bound: {value: null}, }); return serverReference;