Closed anniebombanie closed 1 year ago
Thanks for the report. I try to take a look next week. Would it be possible for you to upgrade to v1 (the next branch in the twind repo)? I believe that this issue is fixed there.
Hi @sastan!
Thanks so much for getting back to me.
So I tried to upgrade to @v1.0.0-next.37
but there's a dependency error with @twind/next@1.0.9
When I try to --force
this, it doesn't work. However, --legacy-peer-deps
works and it installs.
Unfortunately, when trying to npm run dev
, I then get these errors:
I've paired with my CTO on this to see if we could resolve this but the errors don't really make sense. Tried uninstalled/reinstalled node_modules
several times as well but again, am stuck.
Currently, "twind": "^0.16.17"
is able to build, except with the SSR issue. Thanks again for your help and attention! 🙏
That is my bad. Sorry. For v1 you should use @twind/with-next. There is an example linked in the readme.
I'm very sorry for the lack of documentation.
Ahhh I see, I missed the @twind/next
vs @twind/with-next
🤦🏻♀️ Thanks for letting me know! Quick update to let you know we're trying to get the upgrade working to see if it fixes the SSR issue. (Had to upgrade Next + a bunch of other dependencies and you know how fun that is lol) Will report back.
Hi there,
Just an update.
In the end, it was a huge overhaul to try and upgrade our entire environment and codebase to get this working. We managed to isolate the issue to setup()
which results in the LATE_SETUP_CALL {}
error and causes SSR rendering to fail. Tried a similar solution to what JLarky wrote but it wasn't happening. Without using setup()
, SSR rendering works. So we managed to make it work without.
Although this issue ultimately wasn't solved, feel free to close.
Hi there!
I really love what you're doing with Twind. I've been implementing it in our codebase and got really far, but ultimately got blocked on an SSR issue and am unable to move forward.
We're seeing a FOUC on the pages because the CSS isn't getting rendered on server-side, and the styles only come in later on client-side.
In the building stage, we're seeing the
LATE_SETUP_CALL
notices and have not been able to resolve them. Looked through this open issue, but didn't seem to have a solution.In the Twind Next JS Code Sandbox example, the styles are also missing from the head as well. It shows as an empty style tag:
<style id="__tw-9"></style>
without styles. We're seeing the same thing our end as well. This suggests that React is correctly creating the style element and setting theid: '__' + hash
but not inserting any styles within or getting thetextContent
.In the Sandbox example, there is a
data-next-hide-fouc="true"
but we don't want the page empty before the styles come in. We're assuming that SSR should work out of the box with the Twind integration, but is there something we've missed in the documentation that says otherwise? Bit of a loss as to what to do next, so any direction would be greatly appreciated!Running on:
twind.config.js
```js /** @type {import('twind').Configuration} */ import { setup } from 'twind'; import { withForms } from '@twind/forms'; setup({ preflight: withForms({ '@font-face': [ // fonts here ] }), theme: { fontFamily: { // fonts here }, colors: { // colors here } } }); export default {}; ```pages/_app.js
```js import React from 'react'; import Head from 'next/head'; import withTwindApp from '@twind/next/app'; import twindConfig from 'twind.config'; import globalAppStyles from './app.global.scss?type=global'; function PastelApp({ Component, pageProps }) { return ( <> <> >pages/_document.tsx
```js import Document, { Html, Head, Main, NextScript } from 'next/document'; import { tw } from 'twind'; import withTwindDocument from '@twind/next/document'; import twindConfig from '../twind.config'; class MyDocument extends Document { static async getInitialProps(context) { const initialProps = await Document.getInitialProps(context); return { ...initialProps }; } render() { return (next.config.js
```js process.env.NODE_ENV = process.env.NODE_ENV || 'development'; const webpack = require('webpack'); const path = require('path'); module.exports = { webpack: (config, { _dev, defaultLoaders }) => { config.plugins.push( new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }) ); config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'] }); config.module.rules.push({ test: /\.(css|scss)$/, use: [ defaultLoaders.babel, { loader: require('styled-jsx/webpack').loader, options: { type: (fileName, options) => options.query.type || 'scoped' } }, { loader: 'sass-loader', options: { sassOptions: { includePaths: [path.resolve(__dirname, './styles')] } } } ] }); return config; } }; ```Thanks in advance!