[BUG] - Serialized Error: { code: 'ERR_UNSUPPORTED_DIR_IMPORT' }

[Gbolade-True]

Describe the bug

Directory import `node_modules/@mui/material/Box` is not supported resolving ES modules imported from `node_modules/@refinedev/mui/dist/index.mjs`.

After extensive research, I found out that Node.JS doesn't support Directory imports. At least not yet. This is an issue with the latest release of the @refinedev/mui library. It imports Material UI components via directories.

This error was noticed when running tests using vitest in my application.

Steps To Reproduce

1. Setup a basic React application with Vite and install latest release of necessary dependencies for refine:

"@refinedev/core": "^4.51.0",
"@refinedev/mui": "^5.17.0",

2. Setup standard configurations for vitest after installing vitest , @testing-library/dom, @testing-library/jest-dom, @testing-library/react, and @vitejs/plugin-react.
3. Create a basic test file. App.test.tsx
4. Run vitest and see the error in the terminal.

Expected behavior

I expected the tests to run properly. If there were no Directory imports in the node_modules/@refinedev/mui/dist/index.mjs file, there wouldn't have been an issue. A minor fix to move from directory imports to file imports will be good and following the standards set by Node.JS

Packages

"@refinedev/core": "^4.51.0",
"@refinedev/mui": "^5.17.0",
"@refinedev/react-hook-form": "^4.8.20",
"@refinedev/react-router-v6": "^4.5.11",

Additional Context

No response

[mimccio]

Same issue here

[gdnthomas]

Same issue here

[aliemir]

Sorry for the issue everyone! This is related with the Material UI's ESM builds and their publishing methods. Check out the issue from Material UI mui/material-ui#30671

We can update all our usage in @refinedev/mui from subpath imports to index imports for @mui/material, @mui/icons-material and @mui/lab which will fix the issue for vitest but previously we had issues with these imports for the bundle size especially in Next.js. We'll investigate if the current state of the bundlers work well to modularize those imports in our package.

Currently, due to issues in Material UI some bundler fail to interpret Material UI imports as ESM. This is not actionable on our side until there are any progress on Material UI side. 🙏

As a workaround for vitest, inlining the @refinedev/mui dep. resolves the errors. Check out below code:

// vite.config.ts
/// <reference types="vitest" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    setupFiles: ["./vitest-setup.js"],
+   server: {
+     deps: {
+       inline: ["@refinedev/mui"]
+     }
+   }
  }
});

We'll update this issue when we have any progress 🙏

[mimccio]

Thanks @aliemir for the workaround !

[Gbolade-True]

Thanks, @aliemir !!
I just implemented the workaround, and it works fine.
Yes, unfortunately, the changes are dependent on Material UI, but hopefully, they fix up soon and a more comprehensive fix can be implemented by the refinedev team.

Great work💯🫡