remote-components 0.3.0 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/config/nextjs.cjs.map +1 -1
- package/dist/config/nextjs.js.map +1 -1
- package/dist/host/html.cjs +467 -395
- package/dist/host/html.cjs.map +1 -1
- package/dist/host/html.js +467 -395
- package/dist/host/html.js.map +1 -1
- package/dist/host/nextjs/app/client-only.cjs +507 -447
- package/dist/host/nextjs/app/client-only.cjs.map +1 -1
- package/dist/host/nextjs/app/client-only.js +515 -455
- package/dist/host/nextjs/app/client-only.js.map +1 -1
- package/dist/host/nextjs/app.cjs +5 -6
- package/dist/host/nextjs/app.cjs.map +1 -1
- package/dist/host/nextjs/app.js +5 -6
- package/dist/host/nextjs/app.js.map +1 -1
- package/dist/host/nextjs/pages.cjs +6 -11
- package/dist/host/nextjs/pages.cjs.map +1 -1
- package/dist/host/nextjs/pages.js +9 -11
- package/dist/host/nextjs/pages.js.map +1 -1
- package/dist/host/react.cjs +435 -374
- package/dist/host/react.cjs.map +1 -1
- package/dist/host/react.js +435 -374
- package/dist/host/react.js.map +1 -1
- package/dist/internal/host/nextjs/dom-flight.cjs +16 -7
- package/dist/internal/host/nextjs/dom-flight.cjs.map +1 -1
- package/dist/internal/host/nextjs/dom-flight.d.ts +2 -2
- package/dist/internal/host/nextjs/dom-flight.js +16 -7
- package/dist/internal/host/nextjs/dom-flight.js.map +1 -1
- package/dist/internal/host/nextjs/image-shared.cjs +2 -2
- package/dist/internal/host/nextjs/image-shared.cjs.map +1 -1
- package/dist/internal/host/nextjs/image-shared.js +2 -2
- package/dist/internal/host/nextjs/image-shared.js.map +1 -1
- package/dist/internal/host/server/fetch-remote-component.cjs +183 -149
- package/dist/internal/host/server/fetch-remote-component.cjs.map +1 -1
- package/dist/internal/host/server/fetch-remote-component.js +185 -149
- package/dist/internal/host/server/fetch-remote-component.js.map +1 -1
- package/dist/internal/host/shared/remote-image-loader.cjs +2 -5
- package/dist/internal/host/shared/remote-image-loader.cjs.map +1 -1
- package/dist/internal/host/shared/remote-image-loader.js +2 -5
- package/dist/internal/host/shared/remote-image-loader.js.map +1 -1
- package/dist/internal/runtime/constants.cjs +6 -6
- package/dist/internal/runtime/constants.cjs.map +1 -1
- package/dist/internal/runtime/constants.d.ts +3 -3
- package/dist/internal/runtime/constants.js +4 -4
- package/dist/internal/runtime/constants.js.map +1 -1
- package/dist/internal/runtime/html/parse-remote-html.cjs +11 -15
- package/dist/internal/runtime/html/parse-remote-html.cjs.map +1 -1
- package/dist/internal/runtime/html/parse-remote-html.d.ts +2 -12
- package/dist/internal/runtime/html/parse-remote-html.js +17 -15
- package/dist/internal/runtime/html/parse-remote-html.js.map +1 -1
- package/dist/internal/runtime/loaders/script-loader.cjs +2 -2
- package/dist/internal/runtime/loaders/script-loader.cjs.map +1 -1
- package/dist/internal/runtime/loaders/script-loader.js +1 -1
- package/dist/internal/runtime/loaders/script-loader.js.map +1 -1
- package/dist/internal/runtime/metadata.cjs +42 -0
- package/dist/internal/runtime/metadata.cjs.map +1 -1
- package/dist/internal/runtime/metadata.d.ts +21 -1
- package/dist/internal/runtime/metadata.js +38 -0
- package/dist/internal/runtime/metadata.js.map +1 -1
- package/dist/internal/runtime/patterns.cjs +38 -0
- package/dist/internal/runtime/patterns.cjs.map +1 -0
- package/dist/internal/runtime/patterns.d.ts +5 -0
- package/dist/internal/runtime/patterns.js +12 -0
- package/dist/internal/runtime/patterns.js.map +1 -0
- package/dist/internal/runtime/turbopack/chunk-loader.cjs +79 -128
- package/dist/internal/runtime/turbopack/chunk-loader.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/chunk-loader.d.ts +22 -7
- package/dist/internal/runtime/turbopack/chunk-loader.js +85 -131
- package/dist/internal/runtime/turbopack/chunk-loader.js.map +1 -1
- package/dist/internal/runtime/turbopack/module.cjs +56 -57
- package/dist/internal/runtime/turbopack/module.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/module.d.ts +14 -11
- package/dist/internal/runtime/turbopack/module.js +54 -56
- package/dist/internal/runtime/turbopack/module.js.map +1 -1
- package/dist/internal/runtime/turbopack/remote-scope.cjs +101 -0
- package/dist/internal/runtime/turbopack/remote-scope.cjs.map +1 -0
- package/dist/internal/runtime/turbopack/remote-scope.d.ts +55 -0
- package/dist/internal/runtime/turbopack/remote-scope.js +73 -0
- package/dist/internal/runtime/turbopack/remote-scope.js.map +1 -0
- package/dist/internal/runtime/turbopack/shared-modules.cjs +62 -56
- package/dist/internal/runtime/turbopack/shared-modules.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/shared-modules.d.ts +7 -3
- package/dist/internal/runtime/turbopack/shared-modules.js +63 -57
- package/dist/internal/runtime/turbopack/shared-modules.js.map +1 -1
- package/dist/internal/runtime/turbopack/webpack-runtime.cjs +50 -31
- package/dist/internal/runtime/turbopack/webpack-runtime.cjs.map +1 -1
- package/dist/internal/runtime/turbopack/webpack-runtime.d.ts +5 -2
- package/dist/internal/runtime/turbopack/webpack-runtime.js +52 -34
- package/dist/internal/runtime/turbopack/webpack-runtime.js.map +1 -1
- package/dist/internal/runtime/types.cjs.map +1 -1
- package/dist/internal/runtime/types.d.ts +4 -3
- package/dist/internal/utils/logger.cjs.map +1 -1
- package/dist/internal/utils/logger.d.ts +1 -1
- package/dist/internal/utils/logger.js.map +1 -1
- package/dist/internal/utils.cjs +5 -0
- package/dist/internal/utils.cjs.map +1 -1
- package/dist/internal/utils.d.ts +15 -1
- package/dist/internal/utils.js +4 -0
- package/dist/internal/utils.js.map +1 -1
- package/dist/remote/html.cjs.map +1 -1
- package/dist/remote/html.js.map +1 -1
- package/dist/remote/nextjs/app.cjs +2 -1
- package/dist/remote/nextjs/app.cjs.map +1 -1
- package/dist/remote/nextjs/app.js +2 -1
- package/dist/remote/nextjs/app.js.map +1 -1
- package/package.json +1 -1
|
@@ -37,11 +37,168 @@ var import_skeleton = require("#internal/host/nextjs/skeleton");
|
|
|
37
37
|
var import_fetch_with_hooks = require("#internal/host/server/fetch-with-hooks");
|
|
38
38
|
var import_get_client_src = require("#internal/host/server/get-client-src");
|
|
39
39
|
var import_get_ssr_relative_path_base_url = require("#internal/host/server/get-ssr-relative-path-base-url");
|
|
40
|
+
var import_metadata = require("#internal/runtime/metadata");
|
|
41
|
+
var import_utils = require("#internal/utils");
|
|
40
42
|
var import_error = require("#internal/utils/error");
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
})
|
|
43
|
+
async function buildRscComponent(rsc, serverUrl) {
|
|
44
|
+
const componentRSC = `0:${JSON.stringify(rsc)}
|
|
45
|
+
`;
|
|
46
|
+
const { createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.edge");
|
|
47
|
+
return createFromReadableStream(
|
|
48
|
+
new ReadableStream({
|
|
49
|
+
type: "bytes",
|
|
50
|
+
start(controller) {
|
|
51
|
+
const encoder = new TextEncoder();
|
|
52
|
+
controller.enqueue(encoder.encode(componentRSC));
|
|
53
|
+
controller.close();
|
|
54
|
+
}
|
|
55
|
+
}),
|
|
56
|
+
{
|
|
57
|
+
serverConsumerManifest: {
|
|
58
|
+
moduleLoading: {
|
|
59
|
+
prefix: serverUrl.origin,
|
|
60
|
+
crossOrigin: true
|
|
61
|
+
},
|
|
62
|
+
moduleMap: {}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
function buildSkeletonResponse(serverUrl, metadata, skeletonComponent) {
|
|
68
|
+
return {
|
|
69
|
+
name: "remote-component-skeleton",
|
|
70
|
+
serverUrl,
|
|
71
|
+
metadata: {
|
|
72
|
+
...metadata,
|
|
73
|
+
type: "remote-component"
|
|
74
|
+
},
|
|
75
|
+
rsc: (0, import_skeleton.getSkeletonMessage)(),
|
|
76
|
+
scripts: [],
|
|
77
|
+
links: [],
|
|
78
|
+
hydrationData: [],
|
|
79
|
+
nextData: void 0,
|
|
80
|
+
component: skeletonComponent,
|
|
81
|
+
html: (0, import_skeleton.getSkeletonHtml)(serverUrl.href),
|
|
82
|
+
remoteShared: {}
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
function scopeChunkReferences(chunk, bundle, scopedName) {
|
|
86
|
+
return chunk.replaceAll(`[${bundle}]`, `[${scopedName}]`);
|
|
87
|
+
}
|
|
88
|
+
function visitFragment(fragment, serverUrl, remoteName) {
|
|
89
|
+
const scriptSrcSet = /* @__PURE__ */ new Set();
|
|
90
|
+
const scriptTextSet = /* @__PURE__ */ new Set();
|
|
91
|
+
const scripts = [];
|
|
92
|
+
const linkKeySet = /* @__PURE__ */ new Set();
|
|
93
|
+
const links = [];
|
|
94
|
+
const hydrationData = [];
|
|
95
|
+
const htmlChunks = /* @__PURE__ */ new Set();
|
|
96
|
+
let metadata;
|
|
97
|
+
let nextData;
|
|
98
|
+
let remoteShared = {};
|
|
99
|
+
let hasRSC = false;
|
|
100
|
+
let hasShared = false;
|
|
101
|
+
let error;
|
|
102
|
+
const isCrossOrigin = serverUrl.origin !== (0, import_get_ssr_relative_path_base_url.getSSRRelativePathBaseUrl)();
|
|
103
|
+
const rawRscChunks = [];
|
|
104
|
+
const rsc = (0, import_dom_flight.visit)(fragment, {
|
|
105
|
+
url: serverUrl,
|
|
106
|
+
name: remoteName,
|
|
107
|
+
onMetadata(attrs) {
|
|
108
|
+
const incoming = (0, import_metadata.buildMetadata)(attrs, serverUrl);
|
|
109
|
+
if (!remoteName && metadata && metadata.id !== incoming.id && incoming.id !== "__next" && metadata.id !== "__next" && !nextData) {
|
|
110
|
+
throw (0, import_error.multipleRemoteComponentsError)(serverUrl.href);
|
|
111
|
+
}
|
|
112
|
+
metadata = incoming;
|
|
113
|
+
},
|
|
114
|
+
onScript(attrs) {
|
|
115
|
+
const clientSrc = (0, import_get_client_src.getClientSrc)(attrs.src, serverUrl.href);
|
|
116
|
+
const textContent = typeof attrs.textContent === "string" ? attrs.textContent : void 0;
|
|
117
|
+
if (textContent) {
|
|
118
|
+
if (!scriptTextSet.has(textContent)) {
|
|
119
|
+
scriptTextSet.add(textContent);
|
|
120
|
+
scripts.push({ src: "", textContent });
|
|
121
|
+
}
|
|
122
|
+
} else if (!scriptSrcSet.has(clientSrc)) {
|
|
123
|
+
scriptSrcSet.add(clientSrc);
|
|
124
|
+
scripts.push({ src: clientSrc });
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
onLink(attrs) {
|
|
128
|
+
const relativeAttrs = {
|
|
129
|
+
...attrs,
|
|
130
|
+
href: (0, import_get_client_src.getClientSrc)(attrs.href, serverUrl.href)
|
|
131
|
+
};
|
|
132
|
+
const linkKey = `${relativeAttrs.href}::${attrs.rel}`;
|
|
133
|
+
if (!linkKeySet.has(linkKey)) {
|
|
134
|
+
linkKeySet.add(linkKey);
|
|
135
|
+
links.push(relativeAttrs);
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
onRSC(chunk) {
|
|
139
|
+
rawRscChunks.push(chunk);
|
|
140
|
+
hasRSC = true;
|
|
141
|
+
},
|
|
142
|
+
onNextData(data) {
|
|
143
|
+
nextData = data;
|
|
144
|
+
},
|
|
145
|
+
onHTML(chunk) {
|
|
146
|
+
if (!htmlChunks.has(chunk)) {
|
|
147
|
+
htmlChunks.add(chunk);
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
onShared(_shared) {
|
|
151
|
+
remoteShared = _shared;
|
|
152
|
+
hasShared = true;
|
|
153
|
+
},
|
|
154
|
+
onError(message, stack) {
|
|
155
|
+
error = new import_error.RemoteComponentsError(message);
|
|
156
|
+
if (stack) {
|
|
157
|
+
error.stack = stack;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
if (isCrossOrigin && metadata?.bundle) {
|
|
162
|
+
const scopedName = (0, import_utils.computeScopedName)(metadata.bundle, {
|
|
163
|
+
remoteHost: serverUrl.host,
|
|
164
|
+
isCrossOrigin: true
|
|
165
|
+
});
|
|
166
|
+
for (const chunk of rawRscChunks) {
|
|
167
|
+
hydrationData.push(
|
|
168
|
+
scopeChunkReferences(chunk, metadata.bundle, scopedName)
|
|
169
|
+
);
|
|
170
|
+
}
|
|
171
|
+
} else {
|
|
172
|
+
hydrationData.push(...rawRscChunks);
|
|
173
|
+
}
|
|
174
|
+
if (error) {
|
|
175
|
+
throw error;
|
|
176
|
+
}
|
|
177
|
+
if (metadata) {
|
|
178
|
+
if (!hasRSC && !nextData && metadata.type === "nextjs") {
|
|
179
|
+
throw new import_error.RemoteComponentsError(
|
|
180
|
+
`The Remote Component at "${serverUrl.href}" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`
|
|
181
|
+
);
|
|
182
|
+
}
|
|
183
|
+
if (metadata.type === "nextjs" && !hasShared && !nextData?.props.__REMOTE_COMPONENT__?.shared) {
|
|
184
|
+
throw new import_error.RemoteComponentsError(
|
|
185
|
+
`No shared dependencies found for Remote Component at "${serverUrl.href}". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`
|
|
186
|
+
);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
const resolvedShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;
|
|
190
|
+
return {
|
|
191
|
+
rsc,
|
|
192
|
+
metadata,
|
|
193
|
+
scripts,
|
|
194
|
+
links,
|
|
195
|
+
hydrationData,
|
|
196
|
+
nextData,
|
|
197
|
+
remoteShared: resolvedShared,
|
|
198
|
+
html: Array.from(htmlChunks).join("")
|
|
199
|
+
};
|
|
200
|
+
}
|
|
201
|
+
async function fetchRemoteComponent(src, options = {}) {
|
|
45
202
|
const ssrRelativePathBaseUrl = (0, import_get_ssr_relative_path_base_url.getSSRRelativePathBaseUrl)();
|
|
46
203
|
const serverUrl = new URL(src, ssrRelativePathBaseUrl);
|
|
47
204
|
const tags = [
|
|
@@ -94,122 +251,36 @@ async function fetchRemoteComponent(src, options = {
|
|
|
94
251
|
parser.tokenizer.write(decoder.decode(chunk), false);
|
|
95
252
|
}
|
|
96
253
|
const fragment = parser.getFragment();
|
|
97
|
-
let metadata = {
|
|
98
|
-
bundle: CURRENT_ZONE ?? "__vercel_remote_component",
|
|
99
|
-
route: "/",
|
|
100
|
-
runtime: "webpack",
|
|
101
|
-
id: "__vercel_remote_component",
|
|
102
|
-
type: "unknown"
|
|
103
|
-
};
|
|
104
|
-
let remoteShared = {};
|
|
105
|
-
const scripts = [];
|
|
106
|
-
const links = [];
|
|
107
|
-
const hydrationData = [];
|
|
108
|
-
let nextData;
|
|
109
|
-
let html = "";
|
|
110
254
|
const remoteName = options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : void 0);
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}
|
|
123
|
-
metadata = _metadata;
|
|
124
|
-
hasRemoteComponent = true;
|
|
125
|
-
},
|
|
126
|
-
onScript(attrs) {
|
|
127
|
-
const clientSrc = (0, import_get_client_src.getClientSrc)(attrs.src, serverUrl.href);
|
|
128
|
-
if (!scripts.find(
|
|
129
|
-
(it) => it.src === clientSrc || attrs.textContent && it.textContent === attrs.textContent
|
|
130
|
-
)) {
|
|
131
|
-
scripts.push(
|
|
132
|
-
typeof attrs.textContent === "string" ? {
|
|
133
|
-
src: "",
|
|
134
|
-
textContent: attrs.textContent
|
|
135
|
-
} : {
|
|
136
|
-
src: clientSrc
|
|
137
|
-
}
|
|
138
|
-
);
|
|
139
|
-
}
|
|
140
|
-
},
|
|
141
|
-
onLink(attrs) {
|
|
142
|
-
const relativeAttrs = {
|
|
143
|
-
...attrs,
|
|
144
|
-
href: (0, import_get_client_src.getClientSrc)(attrs.href, serverUrl.href)
|
|
145
|
-
};
|
|
146
|
-
if (!links.find(
|
|
147
|
-
(it) => it.href === relativeAttrs.href && it.rel === attrs.rel
|
|
148
|
-
)) {
|
|
149
|
-
links.push(relativeAttrs);
|
|
150
|
-
}
|
|
151
|
-
},
|
|
152
|
-
onRSC(chunk) {
|
|
153
|
-
hydrationData.push(chunk);
|
|
154
|
-
hasRSC = true;
|
|
155
|
-
},
|
|
156
|
-
onNextData(data) {
|
|
157
|
-
nextData = data;
|
|
158
|
-
if (data.props.__REMOTE_COMPONENT__) {
|
|
159
|
-
Object.assign(metadata, data.props.__REMOTE_COMPONENT__);
|
|
160
|
-
metadata.id = "__next";
|
|
161
|
-
metadata.route = data.page ?? "/";
|
|
162
|
-
}
|
|
163
|
-
},
|
|
164
|
-
onHTML(_html) {
|
|
165
|
-
if (!html.includes(_html)) {
|
|
166
|
-
html += _html;
|
|
167
|
-
}
|
|
168
|
-
},
|
|
169
|
-
onShared(_shared) {
|
|
170
|
-
remoteShared = _shared;
|
|
171
|
-
hasShared = true;
|
|
172
|
-
},
|
|
173
|
-
onError(message, stack) {
|
|
174
|
-
error = new import_error.RemoteComponentsError(message);
|
|
175
|
-
if (stack) {
|
|
176
|
-
error.stack = stack;
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
});
|
|
180
|
-
if (error) {
|
|
181
|
-
throw error;
|
|
182
|
-
}
|
|
183
|
-
if (!hasRemoteComponent) {
|
|
255
|
+
const {
|
|
256
|
+
rsc,
|
|
257
|
+
metadata,
|
|
258
|
+
scripts,
|
|
259
|
+
links,
|
|
260
|
+
hydrationData,
|
|
261
|
+
nextData,
|
|
262
|
+
remoteShared,
|
|
263
|
+
html
|
|
264
|
+
} = visitFragment(fragment, serverUrl, remoteName);
|
|
265
|
+
if (!metadata) {
|
|
184
266
|
const isSSGBuild = process.env.NEXT_PHASE === "phase-production-build";
|
|
185
267
|
const isSSRRelativePathBase = serverUrl.host === new URL(ssrRelativePathBaseUrl).host;
|
|
186
268
|
const isPreview = process.env.VERCEL_TARGET_ENV === "preview";
|
|
187
269
|
if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {
|
|
188
|
-
const skeletonMessage = (0, import_skeleton.getSkeletonMessage)();
|
|
189
|
-
const skeletonHtml = (0, import_skeleton.getSkeletonHtml)(serverUrl.href);
|
|
190
270
|
let skeletonComponent;
|
|
191
271
|
if (options.rsc) {
|
|
192
272
|
const { createElement } = await import("react");
|
|
193
273
|
skeletonComponent = createElement("div", {
|
|
194
|
-
dangerouslySetInnerHTML: {
|
|
274
|
+
dangerouslySetInnerHTML: {
|
|
275
|
+
__html: (0, import_skeleton.getSkeletonHtml)(serverUrl.href)
|
|
276
|
+
}
|
|
195
277
|
});
|
|
196
278
|
}
|
|
197
|
-
return
|
|
198
|
-
name: "remote-component-skeleton",
|
|
279
|
+
return buildSkeletonResponse(
|
|
199
280
|
serverUrl,
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
},
|
|
204
|
-
rsc: skeletonMessage,
|
|
205
|
-
scripts: [],
|
|
206
|
-
links: [],
|
|
207
|
-
hydrationData: [],
|
|
208
|
-
nextData: void 0,
|
|
209
|
-
component: skeletonComponent,
|
|
210
|
-
html: skeletonHtml,
|
|
211
|
-
remoteShared: {}
|
|
212
|
-
};
|
|
281
|
+
(0, import_metadata.buildMetadata)({}, serverUrl),
|
|
282
|
+
skeletonComponent
|
|
283
|
+
);
|
|
213
284
|
}
|
|
214
285
|
throw (0, import_error.failedToFetchRemoteComponentError)(
|
|
215
286
|
serverUrl.href,
|
|
@@ -217,47 +288,10 @@ async function fetchRemoteComponent(src, options = {
|
|
|
217
288
|
`No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`
|
|
218
289
|
);
|
|
219
290
|
}
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
}
|
|
223
|
-
if (!hasRSC && !nextData && metadata.type === "nextjs") {
|
|
224
|
-
throw new import_error.RemoteComponentsError(
|
|
225
|
-
`The Remote Component at "${serverUrl.href}" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`
|
|
226
|
-
);
|
|
227
|
-
}
|
|
228
|
-
if (metadata.type === "nextjs" && // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
229
|
-
!hasShared && !nextData?.props.__REMOTE_COMPONENT__?.shared) {
|
|
230
|
-
throw new import_error.RemoteComponentsError(
|
|
231
|
-
`No shared dependencies found for Remote Component at "${serverUrl.href}". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`
|
|
232
|
-
);
|
|
233
|
-
}
|
|
234
|
-
let component;
|
|
235
|
-
if (options.rsc) {
|
|
236
|
-
const componentRSC = `0:${JSON.stringify(rsc)}
|
|
237
|
-
`;
|
|
238
|
-
const { createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.edge");
|
|
239
|
-
component = await createFromReadableStream(
|
|
240
|
-
new ReadableStream({
|
|
241
|
-
type: "bytes",
|
|
242
|
-
start(controller) {
|
|
243
|
-
const encoder = new TextEncoder();
|
|
244
|
-
controller.enqueue(encoder.encode(componentRSC));
|
|
245
|
-
controller.close();
|
|
246
|
-
}
|
|
247
|
-
}),
|
|
248
|
-
{
|
|
249
|
-
serverConsumerManifest: {
|
|
250
|
-
moduleLoading: {
|
|
251
|
-
prefix: serverUrl.origin,
|
|
252
|
-
crossOrigin: true
|
|
253
|
-
},
|
|
254
|
-
moduleMap: {}
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
);
|
|
258
|
-
}
|
|
291
|
+
const name = remoteName || metadata.name;
|
|
292
|
+
const component = options.rsc ? await buildRscComponent(rsc, serverUrl) : void 0;
|
|
259
293
|
return {
|
|
260
|
-
name
|
|
294
|
+
name,
|
|
261
295
|
serverUrl,
|
|
262
296
|
metadata,
|
|
263
297
|
rsc,
|
|
@@ -267,7 +301,7 @@ async function fetchRemoteComponent(src, options = {
|
|
|
267
301
|
nextData,
|
|
268
302
|
component,
|
|
269
303
|
html,
|
|
270
|
-
remoteShared
|
|
304
|
+
remoteShared
|
|
271
305
|
};
|
|
272
306
|
}
|
|
273
307
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { visit } from '#internal/host/nextjs/dom-flight';\nimport {\n getSkeletonHtml,\n getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport { getSSRRelativePathBaseUrl } from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n LinkDescriptor,\n ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n OnRequestHook,\n OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport type { RemoteComponentMetadata } from '#internal/runtime/metadata';\nimport {\n failedToFetchRemoteComponentError,\n multipleRemoteComponentsError,\n RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n options: {\n name?: string;\n rsc?: boolean;\n /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n appRouter?: boolean;\n onRequest?: OnRequestHook;\n onResponse?: OnResponseHook;\n } = {\n rsc: false,\n },\n): Promise<FetchRemoteComponentResponse> {\n const ssrRelativePathBaseUrl = getSSRRelativePathBaseUrl();\n const serverUrl = new URL(src, ssrRelativePathBaseUrl);\n\n const tags = [\n '_vc_rc:fetch-remote-component',\n // the max size of a next cache tag is 256 characters\n serverUrl.host.slice(0, 256),\n // use the suffix so this tag is unique if multiple remote\n // components have the same host, but unique pathnames / query params\n (typeof src === 'string' ? src : src.href).slice(-256),\n ];\n if (options.name) {\n tags.push(options.name.slice(-256));\n }\n\n const fetchInit = {\n next: {\n tags,\n },\n };\n\n const res = await fetchWithHooks(serverUrl, fetchInit, {\n onRequest: options.onRequest,\n onResponse: options.onResponse,\n });\n\n // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n if (!res.ok && !res.body) {\n throw failedToFetchRemoteComponentError(serverUrl.href, res);\n }\n\n if (res.status === 401) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n 'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n );\n }\n\n if (res.status === 404) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n 'Check if you can open it in the browser.',\n );\n }\n\n // create a parser for the HTML response\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n if (!res.body) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n );\n }\n\n const decoder = new TextDecoder();\n // read the response body as a stream and parse it using the parse5 fragment parser\n for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n parser.tokenizer.write(decoder.decode(chunk), false);\n }\n const fragment = parser.getFragment();\n\n let metadata: RemoteComponentMetadata = {\n bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n route: '/',\n runtime: 'webpack',\n id: '__vercel_remote_component',\n type: 'unknown',\n };\n let remoteShared: Record<string, string> = {};\n const scripts: ScriptDescriptor[] = [];\n const links: LinkDescriptor[] = [];\n const hydrationData: string[] = [];\n let nextData: NextData | undefined;\n let html = '';\n\n const remoteName =\n options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n // convert the parsed HTML fragment into an RSC flight data\n // and extract the metadata, scripts, links and remote component RSC flight data\n let hasRemoteComponent = false;\n let hasRSC = false;\n let hasShared = false;\n let hasMultipleRemoteComponents = false;\n let error: RemoteComponentsError | undefined;\n const rsc = visit(fragment, {\n url: serverUrl,\n name: remoteName,\n onMetadata(_metadata) {\n // Skip multiple component detection for Pages Router (__next) since it only supports one remote component per page\n if (\n hasRemoteComponent &&\n metadata.id !== _metadata.id &&\n _metadata.id !== '__next' &&\n metadata.id !== '__next' &&\n !nextData\n ) {\n hasMultipleRemoteComponents = true;\n }\n metadata = _metadata;\n hasRemoteComponent = true;\n },\n onScript(attrs) {\n const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n if (\n !scripts.find(\n (it) =>\n it.src === clientSrc ||\n (attrs.textContent && it.textContent === attrs.textContent),\n )\n ) {\n scripts.push(\n typeof attrs.textContent === 'string'\n ? {\n src: '',\n textContent: attrs.textContent,\n }\n : {\n src: clientSrc,\n },\n );\n }\n },\n onLink(attrs) {\n const relativeAttrs = {\n ...attrs,\n href: getClientSrc(attrs.href, serverUrl.href),\n };\n if (\n !links.find(\n (it) => it.href === relativeAttrs.href && it.rel === attrs.rel,\n )\n ) {\n links.push(relativeAttrs);\n }\n },\n onRSC(chunk) {\n hydrationData.push(chunk);\n hasRSC = true;\n },\n onNextData(data) {\n nextData = data;\n\n // use the Next.js Pages Router props data to extract remote component metadata\n if (data.props.__REMOTE_COMPONENT__) {\n Object.assign(metadata, data.props.__REMOTE_COMPONENT__);\n // only a singleton remote component is supported per page when using the Next.js Pages Router\n metadata.id = '__next';\n metadata.route = data.page ?? '/';\n }\n },\n onHTML(_html) {\n if (!html.includes(_html)) {\n html += _html;\n }\n },\n onShared(_shared) {\n remoteShared = _shared;\n hasShared = true;\n },\n onError(message, stack) {\n error = new RemoteComponentsError(message);\n if (stack) {\n error.stack = stack;\n }\n },\n });\n\n if (error) {\n throw error;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!hasRemoteComponent) {\n // For microfrontend builds during run time, the host and remote build\n // may be happening concurrently. In this case, the request will 404.\n // We want to allow the build to continue with a placeholder remote\n // component. Once the build completes, vercel will automatically revalidate\n // ISR and fetch the built remote component.\n const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n // If the remote component is part of a microfrontend, the src provided\n // will be relative.\n const isSSRRelativePathBase =\n serverUrl.host === new URL(ssrRelativePathBaseUrl).host;\n // Only want this skeleton behaviour in previews to unblock development.\n // For production, the remote component should already be built.\n const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n\n if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {\n const skeletonMessage = getSkeletonMessage();\n const skeletonHtml = getSkeletonHtml(serverUrl.href);\n\n let skeletonComponent: React.ReactNode | undefined;\n if (options.rsc) {\n const { createElement } = await import('react');\n skeletonComponent = createElement('div', {\n dangerouslySetInnerHTML: { __html: skeletonHtml },\n });\n }\n\n return {\n name: 'remote-component-skeleton',\n serverUrl,\n metadata: {\n ...metadata,\n type: 'remote-component',\n },\n rsc: skeletonMessage,\n scripts: [],\n links: [],\n hydrationData: [],\n nextData: undefined,\n component: skeletonComponent,\n html: skeletonHtml,\n remoteShared: {},\n };\n }\n\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (hasMultipleRemoteComponents && !remoteName) {\n throw multipleRemoteComponentsError(serverUrl.href);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n throw new RemoteComponentsError(\n `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n if (\n metadata.type === 'nextjs' &&\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n !hasShared &&\n !nextData?.props.__REMOTE_COMPONENT__?.shared\n ) {\n throw new RemoteComponentsError(\n `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n );\n }\n\n let component: React.ReactNode | undefined;\n\n // only create a React component if requested\n if (options.rsc) {\n // RSC flight data for the static HTML in a single RSC line\n const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n\n const { createFromReadableStream } = await import(\n 'next/dist/compiled/react-server-dom-webpack/client.edge'\n );\n\n // create a React tree from the RSC flight data\n component = await createFromReadableStream(\n new ReadableStream({\n type: 'bytes',\n start(controller) {\n const encoder = new TextEncoder();\n controller.enqueue(encoder.encode(componentRSC));\n controller.close();\n },\n }),\n {\n serverConsumerManifest: {\n moduleLoading: {\n prefix: serverUrl.origin,\n crossOrigin: true,\n },\n moduleMap: {},\n },\n },\n );\n }\n\n return {\n name: remoteName || metadata.id.replace(/_ssr$/, ''),\n serverUrl,\n metadata,\n rsc,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n html,\n remoteShared: nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared,\n };\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n getSkeletonHtml,\n getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport { getSSRRelativePathBaseUrl } from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n LinkDescriptor,\n ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n OnRequestHook,\n OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n buildMetadata,\n type RawMetadataAttrs,\n type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { computeScopedName } from '#internal/utils';\nimport {\n failedToFetchRemoteComponentError,\n multipleRemoteComponentsError,\n RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n rsc: RSC | RSC[] | string | null,\n serverUrl: URL,\n): Promise<React.ReactNode> {\n const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n const { createFromReadableStream } = await import(\n 'next/dist/compiled/react-server-dom-webpack/client.edge'\n );\n return createFromReadableStream(\n new ReadableStream({\n type: 'bytes',\n start(controller) {\n const encoder = new TextEncoder();\n controller.enqueue(encoder.encode(componentRSC));\n controller.close();\n },\n }),\n {\n serverConsumerManifest: {\n moduleLoading: {\n prefix: serverUrl.origin,\n crossOrigin: true,\n },\n moduleMap: {},\n },\n },\n );\n}\n\nfunction buildSkeletonResponse(\n serverUrl: URL,\n metadata: RemoteComponentMetadata,\n skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n return {\n name: 'remote-component-skeleton',\n serverUrl,\n metadata: {\n ...metadata,\n type: 'remote-component',\n },\n rsc: getSkeletonMessage(),\n scripts: [],\n links: [],\n hydrationData: [],\n nextData: undefined,\n component: skeletonComponent,\n html: getSkeletonHtml(serverUrl.href),\n remoteShared: {},\n };\n}\n\n/**\n * Rewrites the bundle identifier in RSC flight data from the plain bundle\n * name to the origin-qualified scoped name. When multiple remotes share the\n * same bundle name (e.g. production and preview of the same app), this\n * makes each one unique so the client can look up the correct RemoteScope\n * by name alone.\n *\n * `[bundle] /path` → `[scopedName] /path`\n * `[bundle] 12345` → `[scopedName] 12345`\n *\n * Only applied for cross-origin remotes — same-origin chunks keep the\n * plain bundle name since there's no ambiguity.\n */\nfunction scopeChunkReferences(\n chunk: string,\n bundle: string,\n scopedName: string,\n): string {\n return chunk.replaceAll(`[${bundle}]`, `[${scopedName}]`);\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n fragment: DefaultTreeAdapterMap['documentFragment'],\n serverUrl: URL,\n remoteName: string | undefined,\n) {\n const scriptSrcSet = new Set<string>();\n const scriptTextSet = new Set<string>();\n const scripts: ScriptDescriptor[] = [];\n\n const linkKeySet = new Set<string>();\n const links: LinkDescriptor[] = [];\n\n const hydrationData: string[] = [];\n const htmlChunks = new Set<string>();\n\n let metadata: RemoteComponentMetadata | undefined;\n let nextData: NextData | undefined;\n let remoteShared: Record<string, string> = {};\n let hasRSC = false;\n let hasShared = false;\n let error: RemoteComponentsError | undefined;\n\n // For cross-origin remotes, rewrite bundle identifiers in RSC chunks to\n // the scoped name so the client dispatchers resolve the correct scope.\n // Chunks are collected raw during visit() and rewritten afterwards because\n // RSC script tags appear before the metadata element in the HTML.\n const isCrossOrigin = serverUrl.origin !== getSSRRelativePathBaseUrl();\n\n const rawRscChunks: string[] = [];\n\n const rsc = visit(fragment, {\n url: serverUrl,\n name: remoteName,\n onMetadata(attrs: RawMetadataAttrs) {\n const incoming = buildMetadata(attrs, serverUrl);\n // Skip multiple component detection for Pages Router (__next) since\n // it only supports one remote component per page\n if (\n !remoteName &&\n metadata &&\n metadata.id !== incoming.id &&\n incoming.id !== '__next' &&\n metadata.id !== '__next' &&\n !nextData\n ) {\n throw multipleRemoteComponentsError(serverUrl.href);\n }\n metadata = incoming;\n },\n onScript(attrs) {\n const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n const textContent =\n typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n if (textContent) {\n if (!scriptTextSet.has(textContent)) {\n scriptTextSet.add(textContent);\n scripts.push({ src: '', textContent });\n }\n } else if (!scriptSrcSet.has(clientSrc)) {\n scriptSrcSet.add(clientSrc);\n scripts.push({ src: clientSrc });\n }\n },\n onLink(attrs) {\n const relativeAttrs = {\n ...attrs,\n href: getClientSrc(attrs.href, serverUrl.href),\n };\n const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n if (!linkKeySet.has(linkKey)) {\n linkKeySet.add(linkKey);\n links.push(relativeAttrs);\n }\n },\n onRSC(chunk) {\n rawRscChunks.push(chunk);\n hasRSC = true;\n },\n onNextData(data) {\n nextData = data;\n },\n onHTML(chunk) {\n if (!htmlChunks.has(chunk)) {\n htmlChunks.add(chunk);\n }\n },\n onShared(_shared) {\n remoteShared = _shared;\n hasShared = true;\n },\n onError(message, stack) {\n error = new RemoteComponentsError(message);\n if (stack) {\n error.stack = stack;\n }\n },\n });\n\n // Rewrite bundle identifiers in RSC chunk references to use the scoped name\n // so the client dispatchers can resolve the correct scope with a direct lookup.\n // This must happen after visit() because RSC script tags appear before the\n // metadata element in the HTML.\n if (isCrossOrigin && metadata?.bundle) {\n const scopedName = computeScopedName(metadata.bundle, {\n remoteHost: serverUrl.host,\n isCrossOrigin: true,\n });\n for (const chunk of rawRscChunks) {\n hydrationData.push(\n scopeChunkReferences(chunk, metadata.bundle, scopedName),\n );\n }\n } else {\n hydrationData.push(...rawRscChunks);\n }\n\n if (error) {\n throw error;\n }\n\n if (metadata) {\n if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n throw new RemoteComponentsError(\n `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n if (\n metadata.type === 'nextjs' &&\n !hasShared &&\n !nextData?.props.__REMOTE_COMPONENT__?.shared\n ) {\n throw new RemoteComponentsError(\n `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n );\n }\n }\n\n const resolvedShared =\n nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n return {\n rsc,\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n remoteShared: resolvedShared,\n html: Array.from(htmlChunks).join(''),\n };\n}\n\nexport async function fetchRemoteComponent(\n src: string | URL,\n options: {\n name?: string;\n rsc?: boolean;\n /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n appRouter?: boolean;\n onRequest?: OnRequestHook;\n onResponse?: OnResponseHook;\n } = {},\n): Promise<FetchRemoteComponentResponse> {\n const ssrRelativePathBaseUrl = getSSRRelativePathBaseUrl();\n const serverUrl = new URL(src, ssrRelativePathBaseUrl);\n\n const tags = [\n '_vc_rc:fetch-remote-component',\n // the max size of a next cache tag is 256 characters\n serverUrl.host.slice(0, 256),\n // use the suffix so this tag is unique if multiple remote\n // components have the same host, but unique pathnames / query params\n (typeof src === 'string' ? src : src.href).slice(-256),\n ];\n if (options.name) {\n tags.push(options.name.slice(-256));\n }\n\n const fetchInit = {\n next: {\n tags,\n },\n };\n\n const res = await fetchWithHooks(serverUrl, fetchInit, {\n onRequest: options.onRequest,\n onResponse: options.onResponse,\n });\n\n // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n if (!res.ok && !res.body) {\n throw failedToFetchRemoteComponentError(serverUrl.href, res);\n }\n\n if (res.status === 401) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n 'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n );\n }\n\n if (res.status === 404) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n 'Check if you can open it in the browser.',\n );\n }\n\n // create a parser for the HTML response\n const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n if (!res.body) {\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n );\n }\n\n const decoder = new TextDecoder();\n // read the response body as a stream and parse it using the parse5 fragment parser\n for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n parser.tokenizer.write(decoder.decode(chunk), false);\n }\n const fragment = parser.getFragment();\n\n const remoteName =\n options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n const {\n rsc,\n metadata,\n scripts,\n links,\n hydrationData,\n nextData,\n remoteShared,\n html,\n } = visitFragment(fragment, serverUrl, remoteName);\n\n if (!metadata) {\n // For microfrontend builds during run time, the host and remote build\n // may be happening concurrently. In this case, the request will 404.\n // We want to allow the build to continue with a placeholder remote\n // component. Once the build completes, vercel will automatically revalidate\n // ISR and fetch the built remote component.\n const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n // If the remote component is part of a microfrontend, the src provided\n // will be relative.\n const isSSRRelativePathBase =\n serverUrl.host === new URL(ssrRelativePathBaseUrl).host;\n // Only want this skeleton behaviour in previews to unblock development.\n // For production, the remote component should already be built.\n const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n\n if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {\n let skeletonComponent: React.ReactNode | undefined;\n if (options.rsc) {\n const { createElement } = await import('react');\n skeletonComponent = createElement('div', {\n dangerouslySetInnerHTML: {\n __html: getSkeletonHtml(serverUrl.href),\n },\n });\n }\n\n return buildSkeletonResponse(\n serverUrl,\n buildMetadata({}, serverUrl),\n skeletonComponent,\n );\n }\n\n throw failedToFetchRemoteComponentError(\n serverUrl.href,\n res,\n `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n );\n }\n\n const name = remoteName || metadata.name;\n const component = options.rsc\n ? await buildRscComponent(rsc, serverUrl)\n : undefined;\n\n return {\n name,\n serverUrl,\n metadata,\n rsc,\n scripts,\n links,\n hydrationData,\n nextData,\n component,\n html,\n remoteShared,\n };\n}\n"],"mappings":"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","names":[]}
|