Error with latest react builds

[dai-shi]

18.3.0-canary-e91142dd6-20230705 works, but 18.3.0-canary-fdc8c81e0-20230707 fails.

[vite] Error when evaluating SSR module /src/components/App.tsx: failed to import "/src/components/Counter.tsx"
|- Error: The React Server Writer cannot be used outside a react-server environment. You must configure Node.js using the --conditions react-server flag.

It seems like facebook/react#27033 changes to use import {registerServerReference} from "react-server-dom-webpack/server"; in the transformed file with packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js, which might cause the error.

Not yet sure how to fix it.

[rogepi]

I seem to encounter the same error in waku dev

env: node@20.70, react-server-dom-webpack@18.3.0-canary-7118f5dd7-20230705

> waku dev --with-ssr

(node:3894) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Listening on 3000

node:internal/event_target:1083
  process.nextTick(() => { throw err; });
                           ^
Error: The React Server Writer cannot be used outside a react-server environment. You must configure Node.js using the `--conditions react-server` flag.

but it's ok in node@18.18

[himself65]

source code:

https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react-server-dom-webpack/package.json#L50C1-L62

https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react-server-dom-webpack/npm/server.js#L3-L6

[rogepi]

I found that in lib/middleware/rsc/worker-impl.ts, changing import RSDWServer from "react-server-dom-webpack/server" to import RSDWServer from "react-server-dom-webpack/server.node.unbundled" solves the problem for me, although I don't really understand the difference.

[himself65]

I found that in lib/middleware/rsc/worker-impl.ts, changing import RSDWServer from "react-server-dom-webpack/server" to import RSDWServer from "react-server-dom-webpack/server.node.unbundled" solves the problem for me, although I don't really understand the difference.

If you use /server, vite will automatically try to resolve the file using exports in react's packages.json

[himself65]

I believe this will fix the issue. Just waiting for the merge vitejs/vite#13487