Astro throws ESM import error

[mayank99]

Getting this error when following astro instructions:

$ astro dev
<project>/node_modules/@whyframe/astro/src/index.js:2
import { createFilter } from 'vite'
         ^^^^^^^^^^^^
SyntaxError: Named export 'createFilter' not found. The requested module 'vite' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
 
import pkg from 'vite';
const { createFilter } = pkg;
 
at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:193:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
error Command failed with exit code 1.

using this astro.config.ts (also the same using .mjs):

export default defineConfig({
  integrations: [
    react(),
  ],
  vite: {
    plugins: [
      whyframe({ defaultSrc: '/frames/default' }),
      whyframeAstro({ defaultFramework: 'react' }),
    ],
  },
});

with the following package versions:

"@astrojs/react": "^1.1.1",
"@whyframe/core": "^0.1.3",
"@whyframe/astro": "^0.1.1",
"astro": "^1.1.5",
"react": "^18.0.0",
"react-dom": "^18.0.0",

I've tried using the default import and destructuring that, but I still get the same error.

[mayank99]

Actually, nevermind. I was unable to create a minimal repro, when I realized that this is happening because I have vite 2 and vite 3 conflicting in my monorepo. Apologies!