SystemJS: Material UI webpack external import sub paths causing errors

Question

I've currently got a mostly working single spa setup where I need to have Material UI (v4). This setup currently works with any import from from "@material-ui/core":

Import Map on the root app

<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 Config on a microservice

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"
      }
    }
  });
};

But if I have any export that comes from MUI sub path I will then get an error, for example:

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

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

How would I go about solving this so sub paths will not cause errors? I have tried making every import come from /core but in some cases this can't work such as theme module augmentation, but also end up getting errors for /core/utills where I have no import coming from there in my code.

I have tried the code below, found here, but this results in the same error just with window["material-ui"].button in the error instead.

/** 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();
}

Edit:

I have also tried MaterialUI.${component} as per this pr but still the same

SystemJS: Material UI webpack external import sub paths causing errors

0 Answers0