SystemJS: внешние пути импорта веб-пакета пользовательского интерфейса материала, вызывающие ошибки

Question

В настоящее время у меня есть в основном работающая установка с одним спа, где мне нужен материальный пользовательский интерфейс (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}в соответствии с его пр , но все тот же