aldabil21
Error importing ES modules while running Vitest
Hi,
I was using @mui/material v5, and Vitest was working fine. As I need to display a calendar view, I use react-scheduler and need to upgrade to v6 (v6.4.6). Now, despite vite start running normally, all unit tests are broken. I would greatly appreciate any support with this matter.
Please see the message below.
FAIL src/components/ListSchedules/ListSchedules.test.tsx [ src/components/ListSchedules/ListSchedules.test.tsx ]
Error: Directory import '/home/project/node_modules/@mui/material/styles' is not supported resolving ES modules imported from /home/project/node_modules/@aldabil/react-scheduler/index.js
Did you mean to import "@mui/material/node/styles/index.js"?
This is my vite config:
/// <reference types="vitest" />
import react from "@vitejs/plugin-react";
import { defineConfig, loadEnv } from "vite";
import type { ConfigEnv, UserConfig } from "vite";
import topLevelAwait from "vite-plugin-top-level-await";
// Workaround for top-level await in Vite
// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
process.env = { ...process.env, ...loadEnv(mode, process.cwd(), "") };
return {
optimizeDeps: {
esbuildOptions: {
target: "esnext",
supported: {
"top-level-await": true, //browsers can handle top-level-await features
},
},
},
build: {
target: "esnext", //browsers can handle the latest ES features
},
plugins: [
react(),
{
name: "vite-config",
config: () => ({
define: {
"process.env": process.env,
},
}),
},
topLevelAwait({
// The export name of top-level await promise for each chunk module
promiseExportName: "__tla",
// The function to generate import names of top-level await promise in each chunk module
promiseImportName: i => `__tla_${i}`,
}) as Plugin,
],
test: {
environment: "jsdom",
globals: true,
css: {
include: /.*/,
},
include: ["src/**/*.test.tsx", "src/**/*.test.ts"],
deps: {
web: {
transformCss: true,
},
},
logHeapUsage: true,
coverage: {
provider: "v8",
},
maxConcurrency: 1,
},
};
});
Thank you for your response!
I have looked into this issue, as well as other related problems with ESM in the mui/material-ui repository, but none of the solutions have worked. I also tried upgrading mui/material-ui to version 7.
I only use the Scheduler component in ListSchedules, but unit tests for 20 other components failed. However, when I comment out the Scheduler import, all tests pass.
Additionally, I do not have "type": "module" in my package.json.
Upgrade @mui/material@next and @mui/x-date-pickers@next will resolve loading @mui/material/styles from an ES module. Recommended in mui/material-ui#42544
However, they renamed AdapterDateFnsV3 in mui/mui-x#16082
@aldabil21 Could you please upgrade the version of mui packages, please? Thank you!