RSC Example doesn't work
Bug report
The RSC example from the examples folder doesn't work.
Description / Observed Behavior
The RSC example as is, throws an error when running it.
When I await the request (const serverData = fetcher('http://localhost:3000/api/data') in page.jsx it does works.
Expected Behavior
I expect being able run the example without having to await the promise in the page component.
Repro Steps / Code Example
I cloned the RSC example
run yarn install
run yarn run dev
navigate to localhost:3000/rsc
I see TypeError: data.map is not a function.
Additional Context
SWR version: 2.2.5
You can run this example with pnpm dev.
I'm probably doing something run, but when I run it with pnpm dev I still get the same issue.
weird, I've also tried to "One-Click Deploy" this suspense example, and get the same error during build:
You might still use the latest version of SWR; the example depends on the feature that is contained in the beta versions.
Did you clean your deps (node_modules/) and run pnpm install and pnpm build on the root before running the app?
weird, I've also tried to "One-Click Deploy" this suspense example, and get the same error during build:
Yeah, this example points to the latest version of SWR, so this won't work. https://github.com/vercel/swr/blob/main/examples/suspense/package.json#L10 I expect this will work after you update the version to "beta."
CONTRIBUTING.md will also help you.
Thanks for explaining! I've updated the package.json to use "beta" but that causes this error:
Packages: +24
++++++++++++++++++++++++
Progress: resolved 32, reused 19, downloaded 5, added 24, done
dependencies:
+ next 14.2.3
+ react 18.3.1
+ react-dom 18.3.1
+ swr 2.2.6-beta.4
Done in 3.1s
➜ suspense pnpm build
> [email protected] build /Users/Dev/suspense
> next build
▲ Next.js 14.2.3
Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
Collecting page data ..file:///Users/Dev/suspense/node_modules/.pnpm/[email protected][email protected]/node_modules/swr/dist/_internal/index.mjs:1
import { i as isWindowDefined, a as isFunction, m as mergeObjects, S as SWRConfigContext, d as defaultConfig, s as serialize, b as SWRGlobalState, c as cache, e as isUndefined, f as mergeConfigs } from './config-context-client-Ds68J9M9.js';
^
SyntaxError: Named export 'S' not found. The requested module './config-context-client-Ds68J9M9.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from './config-context-client-Ds68J9M9.js';
const { i: isWindowDefined, a: isFunction, m: mergeObjects, S: SWRConfigContext, d: defaultConfig, s: serialize, b: SWRGlobalState, c: cache, e: isUndefined, f: mergeConfigs } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
> Build error occurred
Error: Failed to collect page data for /
at /Users/Dev/suspense/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/utils.js:1268:15 {
type: 'Error'
}
Collecting page data . ELIFECYCLE Command failed with exit code 1.
I am able to run the rsc example now though