0

我目前有一个主要工作的单一 spa 设置，我需要有 Material UI (v4)。此设置当前适用于来自以下的任何导入from "@material-ui/core"：

在根应用程序上导入地图

<script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
        "react": "https://unpkg.com/react@17/umd/react.production.min.js",
        "react-dom": "https://unpkg.com/react-dom@17/umd/react-dom.production.min.js",
        "react-router-dom": "https://unpkg.com/browse/react-router-dom@5.3.0/umd/react-router-dom.min.js",
        "react-router": "https://unpkg.com/browse/react-router@5.2.1/umd/react-router.min.js",

        "@material-ui/core": "https://cdn.jsdelivr.net/npm/@material-ui/core@4.12.3/umd/material-ui.production.min.js"
      }
    }
  </script>

微服务上的 Webpack 配置

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "ORG",
    projectName: "NAME",
    webpackConfigEnv,
    argv,
  });

  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    externals: [
      /@material-ui\/core.*/
    ],
    devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
      }
    }
  });
};

但是，如果我有任何来自 MUI 子路径的导出，我会得到一个错误，例如：

import { Button } from "@material-ui/core/Button";

Uncaught (in promise) Error: Unable to resolve bare specifier '@material-ui/core/Button'

我将如何解决这个问题，以便子路径不会导致错误？我尝试让每个导入都来自，/core但在某些情况下，这不起作用，例如主题模块扩充，但最终也会因为/core/utills我的代码中没有来自那里的导入而出现错误。

我已经尝试了下面的代码，在此处找到，但这会导致与错误相同window["material-ui"].button的错误。

/** Callbacks with global UMD-name of material-ui imports */
function externalMaterialUI (_, module, callback) {
    var isMaterialUIComponent = /^@material-ui\/core\/([^/]+)$/;
    var match = isMaterialUIComponent.exec(module);
    if (match !== null) {
        var component = match[1];
        return callback(null, `window["material-ui"].${component}`);
    }
    callback();
}

编辑：

我也MaterialUI.${component}按照他的公关尝试过，但还是一样

4

0 回答 0