【问题标题】:Not able to load one React app into another无法将一个 React 应用加载到另一个
【发布时间】: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();
};

两个仓库的代码都在这里

问题

在上面的示例中,一切都按预期工作。它执行以下操作:

  1. App1 已构建并加载到
  2. App2 已构建并在 App1 中加载

在我的现场工作生产环境(此处未显示)中,我无法让#2 工作。我尝试更改脚本文件的加载方式,并弹出 React / unminified 它以运行一些调试

不知道如何解决这个错误,因为没有很多关于这个问题的文档

【问题讨论】:

    标签: javascript reactjs webpack build create-react-app


    【解决方案1】:

    我最终不得不在两个存储库之间更新package.json 上的name,所以它们是不同的。 Webpack 使用与构建两个应用程序相同的命名空间,它覆盖了现有的 webpack 文件

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-08-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多