swr icon indicating copy to clipboard operation
swr copied to clipboard

RSC Example doesn't work

Open ricksmit3000 opened this issue 1 year ago • 6 comments

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

ricksmit3000 avatar Jun 05 '24 08:06 ricksmit3000

You can run this example with pnpm dev.

koba04 avatar Jun 05 '24 14:06 koba04

I'm probably doing something run, but when I run it with pnpm dev I still get the same issue.

ricksmit3000 avatar Jun 05 '24 15:06 ricksmit3000

weird, I've also tried to "One-Click Deploy" this suspense example, and get the same error during build:

CleanShot 2024-06-05 at 17 35 28@2x

ricksmit3000 avatar Jun 05 '24 15:06 ricksmit3000

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."

koba04 avatar Jun 05 '24 15:06 koba04

CONTRIBUTING.md will also help you.

koba04 avatar Jun 05 '24 15:06 koba04

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

ricksmit3000 avatar Jun 05 '24 16:06 ricksmit3000