Is anybody else having an issue with the Embed-CSS component?
We’re using the Ant Design Input Component, and the Embed-CSS component from the Plasmic Components Library.
The Custom CSS is working inside of Plasmic Studio, but not on my local machine.
We have a Global Variant for a Dark Theme, and we’re using that variant for a Plasmic Component created from Ant Design’s. Ant Design’s Components have some sort of issue with their tags accepting styling from Plasmic Studio, so we wrote a snippet of CSS, created a class dark for the Input in the Dark Theme Global variant.
Hi @parliamentary_trout! Currently for codegen you might need to manually wrap your pages with GlobalContextsProvider component, which provides the global contexts you set in the project settings such as the custom CSS.
import { createContext, useContext } from 'react';
import ThemeContext from "../../components/plasmic/lottie_shop_com/PlasmicGlobalVariant__Theme";
import { GlobalAuthenticationContext } from "../../components/plasmic/lottie_shop_com/PlasmicGlobalVariant__GlobalAuthentication";
import { GlobalContextsProvider } from "../../components/plasmic/lottie_shop_com/PlasmicGlobalContextsProvider";
import { useState, useEffect } from 'react';
import { Auth } from 'aws-amplify'
import {
useAppSelector,
useAppDispatch
} from '../app/hooks';
import {
selectTheme,
setDark,
setLight
} from '../features/theme/themeSlice';
export function AppWrapper({ children }) {
const [user, setUser] = useState(undefined);
const theme = useAppSelector(selectTheme);
const dispatch = useAppDispatch();
//const [theme, setTheme] = useState(undefined);
useEffect(() => {
if (typeof window !== 'undefined') {
const media = window.matchMedia(`(prefers-color-scheme: dark)`);
console.log("Media",media)
console.log("MQL",window.matchMedia)
if (media.matches) {
dispatch(setDark)
}else{
dispatch(setLight())
}
}
}, []);
useEffect(() => {
console.log("Checking auth status")
Auth.currentAuthenticatedUser()
.then(user => setUser("authenticated"))
// if there is no authenticated user, redirect to profile page
.catch((e) => setUser(undefined))
}, [])
return (
<GlobalContextsProvider>
<ThemeContext.Provider value={theme}>
<GlobalAuthenticationContext.Provider value={user} >
{children}
</GlobalAuthenticationContext.Provider>
</ThemeContext.Provider>
</GlobalContextsProvider>
);
}
Got this:
Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
