Bug: Compatibility between ReactServerDOMReader and ReactDOMServer

This issue has been created since 2022-11-07.

React version: 0.0.0-experimental-6883d7944-20221101

Steps To Reproduce

  1. Render a server component with ReactServerDOMWriter.renderToPipeableStream (with react-server-dom-webpack/node-register codemod)
  2. Using ReactDOMServer.renderToPipeableStream, render a client component that uses ReactServerDOMReader.createFromReadableStream (without codemod) to process the server component
    (note that we can't load the codemod at this point as we need to render client components)

Link to code example:

https://github.com/penx/server-components-ssr

Note that in this example, I have a set globalThis.__webpack_require__ in src/api.server.js in order provide a basic mock, this seems to work but I doubt is the intended usage of this library.

The current behavior

ReferenceError: webpack_chunk_load is not defined

ReferenceError: __webpack_chunk_load__ is not defined
    at preloadModule (/server-components-demo/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.development.js:76:22)
    at resolveModule (/server-components-demo/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.development.js:643:17)
    at processFullRow (/server-components-demo/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.development.js:728:9)
    at processBinaryChunk (/server-components-demo/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.development.js:782:5)
    at progress (/server-components-demo/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.development.js:835:5)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

If we set globalThis.__webpack_chunk_load__, we then get a similar error regarding __webpack_require__.

This is due to

const thenable = __webpack_chunk_load__(chunkId);

and

The expected behavior

A way to call ReactServerDOMReader.createFromReadableStream that is not dependent on __webpack_chunk_load__ and .__webpack_require__, or for this error to be silenced if this isn't required on the server.

penx wrote this answer on 2022-11-07

Thinking about this further, I suspect it is because I am passing the client moduleMap (react-client-manifest.json) in to the server render of ReactServerDOMWriter.renderToPipeableStream, and I need to find a way to pass something else so that the files are client component files loaded directly rather than via the chunks.

penx wrote this answer on 2022-11-08

I have this working by passing a proxy object in as the moduleMap:

let proxy = new Proxy(
  {},
  {
    get(_, id) {
      return new Proxy(
        {},
        {
          get(_, n) {
            return {
              id,
              chunks: [],
              name: n,
            };
          },
        }
      );
    },
  }
);

and then setting

globalThis.__webpack_require__ = (name) =>
  require(path.relative(__filename, new URL(name).pathname));

...though pretty sure this isn't the intended usage, so would be good to know if there's another way to get ReactDOMServer to render a component that has been created by ReactServerDOMReader.

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-12-10
Star Count 198882
Watcher Count 6638
Fork Count 41302
Issue Count 1120

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
assets+tarodb: adopt versioning for asset updates+transfers 0 2022-09-27 2022-12-03
taroclI: add stdin+stdout options for Import/Export proof 0 2022-09-27 2022-12-03
bip-taro+proofs+commitment: account for sweep case and collectible transfer to non-interactive sends 1 2022-09-14 2022-12-03
Clicking on a sticker in chat view opens wrong sticker pack if its contract is also registered on another network 2 2022-07-18 2022-08-09
Add svelte and gitignore icons 3 2022-02-18 2022-11-17
`u1F439` is wider than 16px 1 2022-06-07 2022-11-17
How to compile static version of it in mingw 1 2018-10-25 2022-11-13
setApplicationHomePage() doesn't work 1 2018-10-24 2022-11-13
error while trying to compile with mingw 1 2018-10-25 2022-11-13
KDENLIVE crashes with dlight theme 1 2018-11-05 2022-11-13
Add support for conditional return values in mocks. 3 2021-08-19 2022-09-30
Interrupted System call when doing multi-GPU training 5 2022-08-21 2022-12-08
Using optimizations Minestom [1.18.2] 0 2022-10-04 2022-12-01
split-attrs: UserGuide 0 2022-09-23 2022-11-17
Press command twice to use AltTab 1 2021-10-23 2022-09-20
Instead of /books/<int> have /books/<name>? 2 2022-04-05 2022-11-01
Publish docker container to ease running on schedulers 0 2021-11-29 2022-10-08
the trait `From<i32>` is not implemented for `NodeIndex` 0 2022-09-23 2022-12-02
single borders should be non-rounded 2 2021-10-31 2022-12-09
[Error] executing vim.schedule lua callback ... lsp_signature.lua: 257 8 2021-11-22 2022-11-14
Force add search engine 1 2022-02-12 2022-11-27
Error caused by stopping Postgres server can not be checked 3 2021-08-02 2022-12-07
Add unicode support for strings. 4 2021-10-09 2022-11-16
yara cmdline external variable not match unicode string? 0 2021-10-14 2022-10-25
Mouse events not reaching JPanel 2 2021-10-28 2022-10-08
Rendering issue on page 177 2 2021-09-29 2022-12-09
Point always visible through other objects in `ThreeDScene` when using Cairo 1 2021-10-09 2022-10-25
Timer Trigger timezones: no mention of localhost/developer machines, which could be misleading 1 2022-07-24 2022-10-25
When checking for uptime of device, don't assume a non-responce is always fatal 0 2021-11-02 2022-12-01
redis.password is failing to authenticate with "Exception in thread "Thread-2" redis.clients.jedis.exceptions.JedisDataException: NOAUTH Authentication required." error 10 2020-05-14 2022-09-19
Decommission e2e test bug 0 2021-06-29 2022-09-29
Compiler bug when pass anon fn as reference in struct field 1 2022-02-25 2022-12-05
Bitfield alignment problem or size 0 2021-05-10 2022-10-28
Change the URL of this repo to github.io 1 2016-09-29 2022-12-03
Add: Metropolitana del Cuzco 0 2022-11-19 2022-11-21
Add support for alternative option file 0 2022-03-28 2022-12-07
Bump PSRule dependency to v1.9.0 0 2021-11-10 2022-12-08
Bump PSRule dependency to v1.7.0 0 2021-09-05 2022-11-26
Bump PSRule dependency to v1.7.2 0 2021-09-11 2022-12-08
Make hardcoded 15 second launch_testing timeout configurable 3 2022-01-13 2022-11-24
auto-revert SIGSEGV 0 2021-09-28 2022-01-16
Incorrect cylinder transformation 2 2022-01-23 2022-12-03
ERROR: aten::norm is not Supported! 10 2022-07-25 2022-09-27
将发行版从JCenter迁移到Maven Central 7 2021-04-03 2022-11-05
Question about possible wrong merge 2 2022-03-14 2022-11-30
`psum` fails with 1 process per GPU 0 2022-08-26 2022-10-02
[PeoplePicker] - NVDA Screen reader doesn't read when an email has been removed (FluentUI v8) 4 2022-01-21 2022-11-13
terminal autoReply gets sent thrice 3 2022-02-10 2022-09-05
Support for general overlay network jsonrpc endpoints 0 2021-11-08 2022-09-17