build error in SWR 2.2.0

[himself65]

"use client";

import { useState } from "react";
import useSWR from 'swr'

export const Counter = () => {
  // @ts-ignore
  const { data } = useSWR('hello', () => 'world', {
    suspense: true
  })
  const [count, setCount] = useState(0);
  return (
    <div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
      <h3>This is a client component.</h3>
      <div>
        {data}
      </div>
    </div>
  );
};

/Users/himself65/.nvm/versions/node/v18.16.1/bin/npm run build

> [email protected] build
> waku build

vite v4.3.9 building SSR bundle for production...
✓ 6 modules transformed.
✓ built in 42ms
"default" is not exported by "node_modules/swr/core/dist/react-server.mjs", imported by "src/Counter.tsx".
file: /Users/himself65/Code/affine-waku/src/Counter.tsx:4:7
2: 
3: import { useState } from "react";
4: import useSWR from 'swr'
          ^
5: 
6: export const Counter = () => {
file:///Users/himself65/Code/affine-waku/node_modules/rollup/dist/es/shared/node-entry.js:2124
        base = Object.assign(new Error(base.message), base);
                             ^

Error [RollupError]: "default" is not exported by "node_modules/swr/core/dist/react-server.mjs", imported by "src/Counter.tsx".
    at error (file:///Users/himself65/Code/affine-waku/node_modules/rollup/dist/es/shared/node-entry.js:2124:30)
    at Module.error (file:///Users/himself65/Code/affine-waku/node_modules/rollup/dist/es/shared/node-entry.js:13463:16)
    at Module.traceVariable (file:///Users/himself65/Code/affine-waku/node_modules/rollup/dist/es/shared/node-entry.js:13884:29)
    at ModuleScope.findVariable (file:///Users/himself65/Code/affine-waku/node_modules/rollup/dist/es/shared/node-entry.js:12429:39)
    at ReturnValueScope.findVariable (file:///Users/himself65/Code/affine-waku/node_modules/rollup/dist/es/shared/node-entry.js:6965:38)
    at ChildScope.findVariable (file:///Users/himself65/Code/affine-waku/node_modules/rollup/dist/es/shared/node-entry.js:6965:38)
    at Identifier.bind (file:///Users/himself65/Code/affine-waku/node_modules/rollup/dist/es/shared/node-entry.js:8127:40)
    at CallExpression.bind (file:///Users/himself65/Code/affine-waku/node_modules/rollup/dist/es/shared/node-entry.js:5738:23)
    at CallExpression.bind (file:///Users/himself65/Code/affine-waku/node_modules/rollup/dist/es/shared/node-entry.js:9680:15)
    at VariableDeclarator.bind (file:///Users/himself65/Code/affine-waku/node_modules/rollup/dist/es/shared/node-entry.js:5738:23) {
  binding: 'default',
  code: 'MISSING_EXPORT',
  exporter: '/Users/himself65/Code/affine-waku/node_modules/swr/core/dist/react-server.mjs',
  id: '/Users/himself65/Code/affine-waku/src/Counter.tsx',
  url: 'https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module',
  pos: 103,
  loc: {
    column: 7,
    file: '/Users/himself65/Code/affine-waku/src/Counter.tsx',
    line: 4
  },
  frame: '2: \n' +
    '3: import { useState } from "react";\n' +
    "4: import useSWR from 'swr'\n" +
    '          ^\n' +
    '5: \n' +
    '6: export const Counter = () => {',
  watchFiles: [
    '/Users/himself65/Code/affine-waku/entries.ts',
    '/Users/himself65/Code/affine-waku/package.json',
    '/Users/himself65/Code/affine-waku/node_modules/waku/dist/server.js',
    '/Users/himself65/Code/affine-waku/src/App.tsx',
    '/Users/himself65/Code/affine-waku/src/Counter.tsx',
    '/Users/himself65/Code/affine-waku/node_modules/swr/core/dist/react-server.mjs',
    '/Users/himself65/Code/affine-waku/node_modules/swr/_internal/dist/react-server.mjs'
  ]
}

Node.js v18.16.1

Process finished with exit code 1

Upstream: vercel/swr#2700

---

repo: https://github.com/himself65/affine-waku/blob/issue-swr/src/Counter.tsx

yarn install
yarn build

[himself65]

same kind of code run success in storybook and next.js

[himself65]

BTW, SWR 2.1.5 works

[himself65]

I think because they update the exports

vercel/swr@v2.1.5...v2.2.0#diff-7f67769260741e2563407af949f7e54fbf0431d1c607933f6e8a8094e3219e26R5-R11

[dai-shi]

https://unpkg.com/browse/[email protected]/package.json

    "react-server": "./core/dist/react-server.mjs",

Yeah, it's because this new condition is added in exports.

Hmm, wait, your file is under "use client". So, we should simply ignore it on server bundling?
Does it work with waku dev?

[himself65]

waku dev works, but not for build

[dai-shi]

diff --git a/src/lib/builder.ts b/src/lib/builder.ts
index 4c87114..a9cfe11 100644
--- a/src/lib/builder.ts
+++ b/src/lib/builder.ts
@@ -62,7 +62,7 @@ const analyzeEntries = async (entriesFile: string) => {
     ssr: {
       noExternal: /^(?!node:)/,
       // FIXME this is very adhoc.
-      external: ["react", "minimatch"],
+      external: ["react", "minimatch", "swr"],
     },
     resolve: {
       conditions: ["react-server"],

That ☝️ seems to work around the build error.

This is slightly related with #79, but we don't have a good workaround for this.
I think we might need to revisit how to use Vite for server bundling.

[EasonYou]

It seems can't use in server components.

[dai-shi]

Hi, thanks for jumping in.
Can anyone try #103 to see how it change the error?

[dai-shi]

The latest version v0.14.0 causes another error:

import { serialize, OBJECT, SWRConfig as SWRConfig$1, defaultConfig, withArgs, SWRGlobalState, createCacheHelper, isUndefined, getTimestamp, UNDEFINED, isFunction, revalidateEvents, internalMutate, useIsomorphicLayoutEffect, subscribeCallback, IS_SERVER, rAF, IS_REACT_LEGACY, mergeObjects } from 'swr/_internal';
                                                                                                                                                                                                                                                                    ^^^^^^^^^^^^^^^
SyntaxError: The requested module 'swr/_internal' does not provide an export named 'IS_REACT_LEGACY'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

Can anyone investigate it??

Not sure if it is somehow related with #111.