MagicUI and Astro

[sacred steeple]

Just created my first Astro project! I am trying to use some cool components from MagicUI, like ShimmeringButton, but it keeps crashing 😦

22:17:31 [ERROR] [vite] Named export 'CSSProperties' not found. The requested module 'react' 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 'react';
const {CSSProperties} = pkg;

I followed the instructions on MagicUI in order to install it, maybe do I need to change some config?

[sacred steeple]

another error, using BlurFade:
23:47:15 [ERROR] [vite] The requested module 'framer-motion' does not provide an export named 'Variants'

[supple pewter]

for shimmering-button, you have to change its CSSProperties import to this ⤵️

import React, { type CSSProperties } from "react"; // type import

similar changes are meant in blur-fade for Variants (and UseInViewOptions upon further inspect)

[sacred steeple]

cool! thanks, just made it work!!!