Support "use server" module directive with higher order function export?

[alexdo]

Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

• plugin-rsc

Description

As a developer using @vitejs/plugin-rsc, I want to be able to use React.cache in Server Components.

Right now, exporting React.cache from a Server Component throws unsupported non async function (via validateNonAsyncFunction()).

I made a reproducer based on a react-router example here. It has two routes, both have identical code except for one route using React.cache.

Suggested solution

I tried disabling the throw new Error-Part in both validateNonAsyncFunction functions and the route using React.cache is rendering fine. So maybe it'll be sufficient to conditionally throw the error? 🤔

Alternative

No response

Additional context

I just want to express my appreciation of all the work being done here on bringing RSCs to Vite. Amazing! 🙏

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[hi-ogawa]

Hey, thanks for trying it out. For your use case, I don't think 'use server' is appropriate. It's a server component time fetching, so it shouldn't be a server function https://github.com/alexdo/vite-rsc-react-cache-reproducer/blob/e656d76ca99e31455dc22d85a38c2b930fce008d/src/routes/cache/pokemonActions.ts#L1.

I might be misunderstanding something. If so, can you clarify your use case? Also could you check how it would work on Parcel or Next.js? Thank you!

[alexdo]

Thank you for pointing that out! Removing the 'use server' directive removes the error and is working just fine.

Parcel + Next handles this more gracefully. I made the same reproducer in Parcel and Next and both render just fine without any error.

My use-case is coming from an internal application based on Next.js where 'use server' has been quite over-used and I think it was mostly understood as "this file is server territory". I'm trying to port a part of it over to react-router + RSC. It has one case where a file is structured like this:

'use server'

import { cache } from 'react';

export const fetchPokemon = async () => {
	const response = await fetch('https://pokeapi.co/api/v2/type/3');
	const parsed = await response.json();

	return parsed;
};

export const fetchPokemonCached = cache(fetchPokemon);

This will error on @vitejs/plugin-rsc but not on Parcel + Next. It is still wrong in terms of 'use server' usage because even when fetchPokemon() would be called from client-side code, it'd be sufficient to put the declaration inside the function itself. And putting it inside of the function is also working fine with @vitejs/plugin-rsc. 👍

So it's not about "React.cache not working" (my issue title and description is wrong here, sorry!), but more about DX compared to Parcel/Next.js 😌

[hi-ogawa]

'use server' has been quite over-used and I think it was mostly understood as "this file is server territory".

Yes, this is a wrong usage of use server. use server means all exports (and potentially more) inside the module are exposed as public POST API, so such approach should be definitely corrected. import "server-only" is intended for that purpose.

Parcel + Next handles this more gracefully. I made the same reproducer in Parcel and Next and both render just fine without any error.

I think export const fetchPokemonCached = cache(fetchPokemon); is actually quite gray area in RSC spec https://react.dev/reference/rsc/use-server#caveats For static analysis to know, it needs to be explicitly async function and Next.js should reject some other patterns.

[hi-ogawa]

I don't think this is related to React.cache, but Next.js has some heuristics for higher order function export inside "use server" module directive. See also https://nextjs.org/docs/messages/invalid-use-server-value#why-this-error-occurred

Here is an example https://github.com/hi-ogawa/reproductions/blob/main/next-rsc-action/app/action-module.tsx

"use server"

function testHO(f: any): any {
  return () => {};
}

// [ok]
export const testFn = testHO(async () => {
  return "foo";
})

// [not ok]
export const testFn = testHO(() => {
  return "foo";
})

// [ok]
export const testFn = testHO("anything")

I think @vitejs/plugin-rsc rejects all of them right now.