Improve support for using @mui in vitest with explicit exports in package.json for ESM support

[heath-freenome]

Summary

According to this vitest discussion they resolve nested inclusion of libraries via the main block in package.json unless explicit exports block exists with explicit import definitions. As a result, I've had to patch @mui/utils, @mui/system, @mui/material, @mui/icons-material and @mui/styled-engine to add these explicit exports.

I'd love NOT to have to do this and have your libraries build them in.

Thanks

Examples

Here's what I've added to @mui/material:

"exports": {
    ".": {
      "types": "./index.d.ts",
      "import": "./index.js",
      "require": "./node/index.js"
    },
    "./*": {
      "types": "./*/index.d.ts",
      "import": "./*",
      "require": "./node/*/index.js"
    },
    "./utils": {
      "types": "./utils/index.d.ts",
      "import": "./utils/index.js",
      "require": "./node/utils/index.js"
    },
    "./utils/*": {
      "types": "./utils/*.d.ts",
      "import": "./utils/*.js",
      "require": "./node/utils/*.js"
    },
    "./styles": {
      "types": "./styles/index.d.ts",
      "import": "./styles/index.js",
      "require": "./node/styles/index.js"
    },
    "./styles/*": {
      "types": "./styles/*.d.ts",
      "import": "./styles/*.js",
      "require": "./node/styles/*.js"
    }
  }

And what I've added to @mui/utils:

"exports": {
    ".": {
      "require": "./index.js",
      "import": "./esm/index.js",
      "types": "./index.d.ts"
    },
    "./*": {
      "types": "./*/index.d.ts",
      "import": "./esm/*/index.js",
      "require": "./*/index.js"
    }
  }

and @mui/system:

"exports": {
    ".": {
      "require": "./index.js",
      "import": "./esm/index.js",
      "types": "./index.d.ts"
    },
    "./*": {
      "types": "./*/index.d.ts",
      "import": "./esm/*/index.js",
      "require": "./*/index.js"
    }
  }

And @mui/styled-engine:

"exports": {
    ".": {
      "require": "./node/index.js",
      "import": "./index.js",
      "types": "./index.d.ts"
    }
  }

And a small addition to the exports in @mui/icons-material:

"./esm/utils/*": {
      "types": "./utils/*.d.ts",
      "import": "./esm/utils/*.js",
      "require": "./utils/*.js"
    }

Motivation

We are switching our testing system from jest to vitest because of it's superior ESM support due to a bunch of our dependencies switching to ESM only. We have built a bunch of our own internal libraries which are using @mui and @rjsf together. We encountered this issue in a conversion of a library that uses both.

Thanks for a quick resolution

Search keywords: vitest ES Modules

[heath-freenome]

These are the patch files I'm using if they help:

@mui+icons-material+6.4.5.patch
@mui+material+6.4.5.patch
@mui+styled-engine+6.4.6.patch
@mui+system+6.4.7.patch
@mui+utils+6.4.6.patch

NOTE: I am stuck on 6.4.5 for @mui/material and @mui/icons-material due to this issue

[Janpot]

Please try whether @mui/material@next works for you. We're adding the exports field in version 7.

NOTE: I am stuck on 6.4.5 for @mui/material and @mui/icons-material due to this issue

Unfortunately we can't backport this to v6 as it's a breaking change.

[heath-freenome]

@Janpot I give it a try, but you it's still in beta, right? We were planning on updating once it is released. I can't tell whether there are any breaking changes

[Janpot]

It's still in beta yes, that's also why your feedback would be very valuable, if you have the time to try it out. A stable release is planned at the end of the month.

From your snippets I can already tell you that we won't be supporting "./utils", "./utils/*" and "./styles/*".

[heath-freenome]

It's still in beta yes, that's also why your feedback would be very valuable, if you have the time to try it out. A stable release is planned at the end of the month.

From your snippets I can already tell you that we won't be supporting "./utils", "./utils/*" and "./styles/*".

Those were needed to solve some of the ways @mui/material and @mui/icons-material were referencing the @mui/system, @mui/utils and @mui/icons-material. If you've fixed those libraries then they won't be an issue for us.

Are there any breaking changes I should be aware of? Any migration guides I can reference?