Closed joseDaKing closed 2 years ago
Can reproduce, createCss(system).x.div
is undefined on the server and defined on the client.
I did get it to work using a not so clean workaround https://stackblitz.com/edit/nextjs-9rrzrs?file=pages/index.js
Everywhere in node_modules/@xstyled/styled-components/dist/index.esm.js
other than for createX
we use scStyledInterop
instead of scStyled
, I tried changing this by hand, and it worked :man_shrugging:
const baseStyled = scStyledInterop(component);
return getCreateStyle(config ? baseStyled.withConfig(config) : baseStyled, css, generator);
};
};
const createStyled = (generator) => {
const css = createCssFunction(generator);
const styled = createBaseStyled(css);
const xstyled = createBaseStyled(css, generator);
styled.box = xstyled("div");
Object.keys(scStyledInterop).forEach((key) => {
styled[key] = styled(key);
styled[`${key}Box`] = xstyled(key);
});
return styled;
};
const createX = (generator) => {
const xstyled = createBaseStyled(createCssFunction(generator), generator);
const x = {};
- Object.keys(scStyled).forEach((tag) => {
+ Object.keys(scStyledInterop).forEach((tag) => {
x[tag] = xstyled(tag)``;
});
return x;
};
π Bug Report
I get this error in next js 12, and I have followed the Next js instruction on the website. The problem might be that next js 12 uses swc as compiler and not babel
To Reproduce
Create next js app and try to use xstyled
Expected behavior
It should work without any problem
Run
npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard
Paste the results here: