Home Original page

Migrate @mui/x-date-pickers to v6 by sebastianfrey · Pull Request #2139 · eclipsesource/jsonforms

@lucas-koehler After a little bit more investigation it turns out, that the problem originates from the required @mui/material upgrade.

In detail the reason for the problem is

b. how @mui/utils is published (Transpiled ES-Module)
c. how @mui/utils is leveraged in @mui/x-date-pickers
d. how Rollup handles CommonJS default exports of transpile ES-Modules

It seems that rollup/plugins#948 is related and that rollup/plugins#1165 might fix it.

Unfortunately I have not the time right now to dig here deeper, maybe some of you guys might take a look?

UPDATE 2023-05-25:

Yesterday I was browsing through some GitHub-issues on the topic and read up a bit on how Rollup plugins do work. Actually I found a solution to the problem, but it is a bit hacky.

As I have already mentioned, the cause of the problem is on the one hand the way @mui/utils is published and on the other hand how the Rollup CommonJS plugin handles these imports. To come around the problem, I have created the following Rollup plugin:

diff --git a/packages/material-renderers/rollup.example.config.js b/packages/material-renderers/rollup.example.config.js
index 1cc764d0..e46b6711 100644
--- a/packages/material-renderers/rollup.example.config.js
+++ b/packages/material-renderers/rollup.example.config.js
@@ -6,6 +6,36 @@ import copy from 'rollup-plugin-copy';
 import css from 'rollup-plugin-import-css';
 import typescript from 'rollup-plugin-typescript2';
 
+function cjsCompatPlugin() {
+  return {
+    name: 'cjs-compat-plugin',
+    transform(code, id) {
+      // ignore all packages which are not @mui/utils
+      if (
+        !/@mui\/utils.*.js$/.test(id) ||
+        id.includes('@mui/utils/node_modules')
+      ) {
+        return code;
+      }
+
+      // try to extract the commonjs namespace variable
+      const moduleName = code.match(
+        /(?<module>[a-zA-Z0-9_$]*).default = _default;/
+      )?.groups?.module;
+
+      if (!moduleName || !code.includes(`return ${moduleName};`)) {
+        return code;
+      }
+
+      // return default export instead of namespace
+      return code.replace(
+        `return ${moduleName}`,
+        `return ${moduleName}.default`
+      );
+    },
+  };
+}
+
 /**
  * @type {import('rollup').RollupOptions}
  */
@@ -34,6 +64,7 @@ const config = {
         },
       },
     }),
+    cjsCompatPlugin(),
     copy({
       targets: [
         {

It basically mutates the generated CommonJS code by returning the default export instead of the namespace. If you're happy with that solution, I will update the PR.