[Flight] Fix webpack watch mode issue (#20457)
Dan Abramov committed
Dec 14, 2020 at 15:50 UTC
070372cde2d8b344a96ec63c92b5dcbec863073f
1 file changed
+47
-49
packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+47
-49
@@ -95,6 +95,7 @@ export default class ReactFlightWebpackPlugin {
95
}
96
97
apply(compiler: any) {
98
+ let resolvedClientReferences;
99
const run = (params, callback) => {
100
// First we need to find all client files on the file system. We do this early so
101
// that we have them synchronously available later when we need them. This might
@@ -107,59 +108,12 @@ export default class ReactFlightWebpackPlugin {
108
contextResolver,
109
compiler.inputFileSystem,
110
compiler.createContextModuleFactory(),
110
- (err, resolvedClientReferences) => {
111
+ (err, resolvedClientRefs) => {
112
if (err) {
113
callback(err);
114
return;
115
}
115
- compiler.hooks.compilation.tap(
116
- PLUGIN_NAME,
117
- (compilation, {normalModuleFactory}) => {
118
- compilation.dependencyFactories.set(
119
- ClientReferenceDependency,
120
- normalModuleFactory,
121
- );
122
- compilation.dependencyTemplates.set(
123
- ClientReferenceDependency,
124
- new NullDependency.Template(),
125
- );
126
-
127
- compilation.hooks.buildModule.tap(PLUGIN_NAME, module => {
128
- // We need to add all client references as dependency of something in the graph so
129
- // Webpack knows which entries need to know about the relevant chunks and include the
130
- // map in their runtime. The things that actually resolves the dependency is the Flight
131
- // client runtime. So we add them as a dependency of the Flight client runtime.
132
- // Anything that imports the runtime will be made aware of these chunks.
133
- // TODO: Warn if we don't find this file anywhere in the compilation.
134
- if (module.resource !== clientFileName) {
135
- return;
136
- }
137
- if (resolvedClientReferences) {
138
- for (let i = 0; i < resolvedClientReferences.length; i++) {
139
- const dep = resolvedClientReferences[i];
140
- const chunkName = this.chunkName
141
- .replace(/\[index\]/g, '' + i)
142
- .replace(
143
- /\[request\]/g,
144
- Template.toPath(dep.userRequest),
145
- );
146
-
147
- const block = new AsyncDependenciesBlock(
148
- {
149
- name: chunkName,
150
- },
151
- module,
152
- null,
153
- dep.require,
154
- );
155
- block.addDependency(dep);
156
- module.addBlock(block);
157
- }
158
- }
159
- });
160
- },
161
- );
162
-
116
+ resolvedClientReferences = resolvedClientRefs;
117
callback();
118
},
119
);
@@ -167,6 +121,50 @@ export default class ReactFlightWebpackPlugin {
121
122
compiler.hooks.run.tapAsync(PLUGIN_NAME, run);
123
compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, run);
124
+ compiler.hooks.compilation.tap(
125
+ PLUGIN_NAME,
126
+ (compilation, {normalModuleFactory}) => {
127
+ compilation.dependencyFactories.set(
128
+ ClientReferenceDependency,
129
+ normalModuleFactory,
130
+ );
131
+ compilation.dependencyTemplates.set(
132
+ ClientReferenceDependency,
133
+ new NullDependency.Template(),
134
+ );
135
+
136
+ compilation.hooks.buildModule.tap(PLUGIN_NAME, module => {
137
+ // We need to add all client references as dependency of something in the graph so
138
+ // Webpack knows which entries need to know about the relevant chunks and include the
139
+ // map in their runtime. The things that actually resolves the dependency is the Flight
140
+ // client runtime. So we add them as a dependency of the Flight client runtime.
141
+ // Anything that imports the runtime will be made aware of these chunks.
142
+ // TODO: Warn if we don't find this file anywhere in the compilation.
143
+ if (module.resource !== clientFileName) {
144
+ return;
145
+ }
146
+ if (resolvedClientReferences) {
147
+ for (let i = 0; i < resolvedClientReferences.length; i++) {
148
+ const dep = resolvedClientReferences[i];
149
+ const chunkName = this.chunkName
150
+ .replace(/\[index\]/g, '' + i)
151
+ .replace(/\[request\]/g, Template.toPath(dep.userRequest));
152
+
153
+ const block = new AsyncDependenciesBlock(
154
+ {
155
+ name: chunkName,
156
+ },
157
+ module,
158
+ null,
159
+ dep.require,
160
+ );
161
+ block.addDependency(dep);
162
+ module.addBlock(block);
163
+ }
164
+ }
165
+ });
166
+ },
167
+ );
168
169
compiler.hooks.emit.tap(PLUGIN_NAME, compilation => {
170
const json = {};