Description of problem:

Dynamic plugins are loaded via a (webpack) federation. However, plugins loaded with that look different (buggy) than plugins loaded statically. We have a workaround (see https://github.com/janus-idp/backstage-plugins/pull/2183), which we added in 1.4 also to our wrappers (see https://github.com/janus-idp/backstage-showcase/pull/2022).

Plugins wrappers or plugins must include currently this workaround if they using MUI v5 components:

import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';

ClassNameGenerator.configure(componentName => {
  return componentName.startsWith('v5-')
    ? componentName
    : `v5-${componentName}`;
})

But this will not work when users build the plugins their own. Locally or on a cluster.

Some options:

1. If there a way that we share also (as a webpack singleton) the ClassNameGenerator?
2. Can the janus cli automatically adds this code if the package.json contains @mui/* with the version 5.? (maybe 6. as well)

Prerequisites (if any, like setup, operators/versions):

Steps to Reproduce

Build, for example, the Bulk import plugin and install it into the dynamic-plugins-root of your showcase:

npx @janus-idp/cli package export-dynamic-plugin --dynamic-plugins-root ~/git/janus-idp/backstage-showcase/dynamic-plugins-root --dev

Actual results:

The Repository | Organization switcher on the first page from the add flow is broken (no padding)

Expected results:

The Bulk import add flow should work.

Reproducibility (Always/Intermittent/Only Once):

Always

Build Details:

Latest main

Additional info (Such as Logs, Screenshots, etc):