【发布时间】:2021-08-26 18:52:34
【问题描述】:
我正在尝试重新创建它(将一个反应应用程序加载到另一个应用程序中)。在下面的示例中,一切正常:
https://react-app-load2.netlify.app/
将App1加载到App2的主脚本文件在这里
onsole.log("Hello world!");
const fetchAssets = async () => {
try {
console.log("fetchAssets executed");
const request = await (
await fetch(`https://react-app-load1.netlify.app/asset-manifest.json`)
).json();
console.log(request, "REQUEST");
importFilesFromArray(request.entrypoints, "https://react-app-load1.netlify.app/");
} catch (error) {
console.error(error, "error");
console.error("Error fetching app 1 assets");
}
};
// Takes the provided array, parses it and loads all of the
// JS and CSS files based on their file extension.
function importFilesFromArray(files, rootURL) {
console.log(files, "FILES");
for (var i = 0; i < files.length; i++) {
if (files[i].endsWith(".js")) {
importJSFile(rootURL + files[i]);
} else if (files[i].endsWith(".css")) {
importCSSFile(rootURL + files[i]);
}
}
}
// Imports a single JS file.
function importJSFile(url) {
console.log(url, "url");
var jsElement = document.createElement("script");
jsElement.src = url;
jsElement.type = "text/javascript";
var head = document.head;
head.insertBefore(jsElement, head.childNodes[0]);
}
// Imports a single CSS file.
function importCSSFile(url) {
var cssElement = document.createElement("link");
cssElement.href = url;
cssElement.rel = "stylesheet";
cssElement.type = "text/css";
var head = document.head;
head.insertBefore(cssElement, head.childNodes[0]);
}
window.onload = function () {
fetchAssets();
};
两个仓库的代码都在这里
问题
在上面的示例中,一切都按预期工作。它执行以下操作:
- App1 已构建并加载到
- App2 已构建并在 App1 中加载
在我的现场工作生产环境(此处未显示)中,我无法让#2 工作。我尝试更改脚本文件的加载方式,并弹出 React / unminified 它以运行一些调试
不知道如何解决这个错误,因为没有很多关于这个问题的文档
【问题讨论】:
标签: javascript reactjs webpack build create-react-app