egoist / egoist/tsup

react-hook-form webpack error & tailwind doesn't compile from external ui package - HELP

Open
#928 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
11.3k
Forks
275
PR merge metrics
No merged PRs in 30d

Description

I am posting this on the relevant repositories as I do not know what to do.

I have a project with NextJS that I've started to work on which has a `ui` package with `tsup` and that contains tailwind based components via shadcn and one of the components is form using `react-hook-form`.

## Problem 1 - `react-hook-form`
When I use the form component, I get this error, even though I have configured tsup to do "use client"; and also in the component itself I am using "use client";

```TypeError: Cannot destructure property 'getFieldState' of '(0 , react_hook_form__WEBPACK_IMPORTED_MODULE_5__.useFormContext)(...)' as it is null.```

## Problem 2 - tailwind compiler not working
This might be my configuration error, but I've replicated the configuration from a monorepo with the [same setup as me](https://github.com/juliusmarminge/acme-corp/tree/main) in the NextJS tailwind compiler content to go `"../../packages/ui/src/**/*.{ts,tsx}"`.

The way I am testing it is with a button component from the UI package being rendered on the page:

image

You can see that there is no styling on the button.

Any help would be appreciated, or at least some steps to the right direction. [Here is my project](https://github.com/DavidIlie/laundrey)

Thank you!

Contributor guide

Open the contributing guide

Research direction

Start by reproducing both failures from the linked laundrey project, then inspect the tsup configuration, the UI package's form component, and the NextJS Tailwind content configuration. Separate the react-hook-form context error from the missing Tailwind styles; done means both the form renders without the reported error and the external UI button receives its styles.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, tailwindcss, typescript
Domain
build-system, frontend, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.