[Flight] Fix Webpack Chunk Loading (#25271)
* Fix acorn import I'm not sure how this ever worked. * Fix cache to wait for entries already added to the chunk cache * Modernize API
Sebastian Markbåge committed
Sep 14, 2022 at 22:57 UTC
c5d06fdc5daf0605a035b283207f349abb990d9c
3 files changed
+8
-8
fixtures/flight/src/index.js
+3
-4
@@ -1,6 +1,6 @@
1
import * as React from 'react';
2
import {Suspense} from 'react';
3
-import ReactDOM from 'react-dom';
3
+import ReactDOM from 'react-dom/client';
4
import ReactServerDOMReader from 'react-server-dom-webpack';
5
6
let data = ReactServerDOMReader.createFromFetch(fetch('http://localhost:3001'));
@@ -9,9 +9,8 @@ function Content() {
9
return React.experimental_use(data);
10
}
11
12
-ReactDOM.render(
12
+ReactDOM.createRoot(document.getElementById('root')).render(
13
<Suspense fallback={<h1>Loading...</h1>}>
14
<Content />
15
- </Suspense>,
16
- document.getElementById('root')
15
+ </Suspense>
16
);
packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
+4
-3
@@ -55,7 +55,7 @@ export function resolveModuleReference<T>(
55
// If they're still pending they're a thenable. This map also exists
56
// in Webpack but unfortunately it's not exposed so we have to
57
// replicate it in user space. null means that it has already loaded.
58
-const chunkCache: Map<string, null | Promise<any> | Error> = new Map();
58
+const chunkCache: Map<string, null | Promise<any>> = new Map();
59
const asyncModuleCache: Map<string, Thenable<any>> = new Map();
60
61
// Start preloading the modules since we might need them soon.
@@ -72,9 +72,10 @@ export function preloadModule<T>(
72
const thenable = __webpack_chunk_load__(chunkId);
73
promises.push(thenable);
74
const resolve = chunkCache.set.bind(chunkCache, chunkId, null);
75
- const reject = chunkCache.set.bind(chunkCache, chunkId);
76
- thenable.then(resolve, reject);
75
+ thenable.then(resolve);
76
chunkCache.set(chunkId, thenable);
77
+ } else if (entry !== null) {
78
+ promises.push(entry);
79
}
80
}
81
if (moduleData.async) {
packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+1
-1
@@ -7,7 +7,7 @@
7
* @flow
8
*/
9
10
-import {acorn} from 'acorn';
10
+import * as acorn from 'acorn';
11
12
type ResolveContext = {
13
conditions: Array<string>,