Closed salman15 closed 1 month ago
Found this solution for emotion and here is my implementation:
'use client';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { useServerInsertedHTML } from 'next/navigation';
import { FC, PropsWithChildren, useState } from 'react';
const RootStyleRegistry: FC<PropsWithChildren> = ({ children }) => {
const [cache] = useState(() => {
const cache = createCache({ key: 'css' });
cache.compat = true;
return cache;
});
useServerInsertedHTML(() => {
return (
<style
data-emotion={`${cache.key} ${Object.keys(cache.inserted).join(' ')}`}
dangerouslySetInnerHTML={{
__html: Object.values(cache.inserted).join(' '),
}}
/>
);
});
return <CacheProvider value={cache}>{children}</CacheProvider>;
};
export default RootStyleRegistry;
I'm running Next.JS with NX and am trying can not seem to run twin.macro
I keep running into an error:
Can't resolve 'styled-components/jsx-dev-runtime'
What am I doing wrong in my configuration?
my setup:
withTwin.mjs
.babelrc.
next.config.mjs