Open rstacruz opened 3 years ago
For me, when using Webpack 5, the style is not pre-rendered on the server (which is what the setup for). A demo for this: issue https://codesandbox.io/s/magical-river-45guq?file=/pages/index.js
Sorry for not responding earlier. I try to look into this at the end of the week.
Unsure if this is the right issue to share this on. I also have this happen to values of a custom theme I've made, but only on a build and thus in production, not in development. It results in breaking classes that have mentions to these custom theme values, and thus breaking other styles as well. This happens at random during refresh, and most often during the first load of the site for any given client, in desktop, mobile, pagespeedinsights, etc.
I've been running into this too with WMR, so doesn't look to be tied to Next. (might be premature assumption, but does look to be tied to the lack of styles being prerendered)
Repo + instructions to reproduce: https://github.com/rschristian/twind-late-setup-call-bug
Has anyone solved this problem? Please let me know, thx a lot.
As we run into some trouble with this and re-configuring twind during runtime I'm thinking about to allow setup
calls anytime you want. That would require some internal changes and may only come v1.
Is there a way to check if setup function has already run from the user point of view? :) for me it happens because of HMR and I store the flag on window
:) kind of like:
if (!window.Twind) {
setup({});
window.Twind = true;
}
Here's a more involved workaround:
const createTwind = () => {
setup({
theme: {
extend: {
colors: {
"brand-red-500": "#FA3541",
},
},
},
});
// in my code here I create some custom sheets
return 123;
};
let singletonHolder: ReturnType<typeof createTwind> | undefined;
// call this function instead of `setup` itself
export function getTwind() {
return singletonHolder || (singletonHolder = createTwind());
}
// my typescript is a bit misconfigured, you might not need this
declare global {
interface NodeModule {
hot?: {
data: { singletonHolder?: typeof singletonHolder };
dispose: (callback: (data: { singletonHolder?: typeof singletonHolder }) => void) => void;
};
}
}
if (module.hot) {
// here I'm restoring my sheets, you can just check if twind is already initialized
singletonHolder = module.hot?.data?.singletonHolder || singletonHolder;
module.hot.dispose(data => {
// I'm storing my stuff, you will just mark that initialization happened
data.singletonHolder = singletonHolder;
});
}
Hi there! Great work with Twind... it's an amazing concept and I am really loving the API.
I tried integrating it with Next.js + Webpack 5 and got this error:
A lot of times it's not really causing any issues (pages continue to work) but sometimes they cause
Internal Server Error
to show up for some pages.package.json
```json "dependencies": { "@twind/next": "^1.0.7", "next": "10.1.3", "next-mdx-remote": "^2.1.4", "twind": "^0.16.13", } ```twind.config.js
```js import * as colors from 'twind/colors' /** @type {import('twind').Configuration} */ export default { // mode: 'strict', theme: { extend: { borderColor: { line: colors.gray['200'], }, textColor: { mute: colors.gray['600'], accent: colors.red['600'], }, }, fontFamily: { sans: ['Roboto', 'ui-sans', 'sans-serif'], serif: ['Eczar', 'ui-serif', 'Georgia', 'Cambria', 'sans-serif'], }, maxWidth: { article: '580px', }, }, } ```pages/_document.js
```js import withTwindDocument from '@twind/next/document' import twindConfig from '../twind.config' export default withTwindDocument(twindConfig) ```pages/_app.js
```js import twindConfig from '../twind.config' import withTwindApp from '@twind/next/app' import '../styles/globals.css' import '@fontsource/eczar/400.css' import '@fontsource/roboto/400.css' import '@fontsource/roboto/700.css' import { css, tw } from 'twind/css' function MyApp({ Component, pageProps }) { // tw( // css({ // ':global': { body: { '@apply': 'font-sans', }, // }, // }) // ) returnnext.config.js
```js module.exports = { future: { webpack5: true }, } ```