Running into "late setup error" with Next.js

[itsMapleLeaf]

Originally posted in #49

So one issue I notice with the way the API works, is that you have to manually ensure tw is only called after setup. Integrating twind in my Next.js project and having followed the examples, even then, I'm still getting some "late setup call" errors, which I think is a sign that this constraint can't be reliably followed

Suggestion: when needing a config override, the user should create their own tw file which includes the setup call. Setup returns the tw function, which is then imported throughout the app for styling. Logically, this ensures that setup can't be called after tw. To clarify:

// tw.ts
import { setup } from "twind"

export const tw = setup({
	theme: { colors: { palevioletred: "palevioletred" } },
})

// Button.tsx
import { tw } from "./tw"

export const Button = () => (
	<button type="button" className={tw`p-3 rounded bg-blue-500 text-white`}>
		hi
	</button>
)

With the current API, it's true that one could also reexport tw from the tw.ts file. My suggestion is to make this API change to possibly enforce using the returned tw function, and/or document that usage

The app in question is a testbed project which makes use of the reddit API. Repo: https://github.com/itsMapleLeaf/reddit-client/tree/twind

Key files:

• https://github.com/itsMapleLeaf/reddit-client/blob/twind/src/pages/_document.tsx
• https://github.com/itsMapleLeaf/reddit-client/blob/twind/src/pages/_app.tsx
• https://github.com/itsMapleLeaf/reddit-client/blob/twind/tailwind.config.js

[sastan]

Thanks for the report.

We should make it more clear that setup should be called in the main entry file. The idea is that the setup export modifies the tw export to allow libraries to use import { tw } from 'twind' while the application is may configure tw using setup.

What you are trying is already possible using the yet undocumented create export (see Web Components example):

// tw.ts
import { create } from "twind"

export const { tw } = create({
	theme: { colors: { palevioletred: "palevioletred" } },
})

I hope that helps...

PS: Sorry for the inconvenience we are still working on the documentation.

[sastan]

I can not really try the app because i'm missing a NEXT_PUBLIC_REDDIT_APP_ID. But i see the LATE_SETUP_CALL error in the server log.

I think the problem is that next/webpack are re-evaluating pages/_app.js and/or the setup guard typeof window !== undefined seems not to work. Maybe there is another way to detect if webpack builds a server bundle?

[itsMapleLeaf]

Yeah, so it seems more like an issue with the SSR setup, or something else in the project that's causing unwarranted side effects.

Also, for reference, I also tried the create function approach (now reverted, but I pushed the commit for reference): itsMapleLeaf/reddit-client@733a5d3

Here's what I got in the console when doing that:

error - ./node_modules/.pnpm/[email protected][email protected]/node_modules/twind/server/server.cjs:35:0
Module not found: Can't resolve 'async_hooks'
null

[sastan]

That is because 'async_hooks' is a node builtin that should only be used on the server. I'll send you an example tomorrow.

[itsMapleLeaf]

Found the problem 🤦‍♂️

- if (typeof window !== undefined) {
+ if (typeof window !== "undefined") {