Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug?]: Tailwind setup fails due to latest dep requiring Prettier v3 #9075

Closed
1 task done
thedavidprice opened this issue Aug 27, 2023 · 7 comments · Fixed by #9076
Closed
1 task done

[Bug?]: Tailwind setup fails due to latest dep requiring Prettier v3 #9075

thedavidprice opened this issue Aug 27, 2023 · 7 comments · Fixed by #9076
Assignees
Labels
bug/confirmed We have confirmed this is a bug

Comments

@thedavidprice
Copy link
Contributor

thedavidprice commented Aug 27, 2023

What's not working?

See this Forum thread: https://community.redwoodjs.com/t/error-after-setup-tailwind-with-rw-6-0-typescript/5213

^^ Includes a workaround.

What's happening?

The Tailwind dependency prettier-plugin-tailwindcss requires Prettier v3 as of version >= 0.5.

Prettier v3 was released on July 5th (bummer we missed it for RW v6), and will need to be included in the next Redwood major:

Prettier v3 is now ESM but does support CJS (migration guide in post above).

Next Steps

PR to work around for now is here:

For v7 (next major), here are the PRs to revert current workaround and resolve via Prettier v3 support:

How do we reproduce the bug?

This will fail for any version of Redwood when running the command: yarn rw setup ui tailwindcsss

The setup command always uses the latest versions of the Tailwind dependencies.

What's your environment? (If it applies)

No response

Are you interested in working on this?

  • I'm interested in working on this
@thedavidprice thedavidprice added the bug/needs-info More information is needed for reproduction label Aug 27, 2023
thedavidprice added a commit that referenced this issue Aug 27, 2023
…ier-plugin-tailwindcss v0.5 (#9076)

fixes #9075

`prettier-plugin-tailwindcss` >= 0.5 requires Prettier v3. This PR pins
the version to `0.4.1`, which is the most recent version prior to v0.5.

**NOTE:** This issue will still affect all previous versions of Redwood
because the setup ui tailwindcss command defaults to adding the Tailwind
deps at latest.

### Next Steps
I'll open two PRs, one to revert this and one to upgrade Prettier to v3
(both for next major).
@thedavidprice thedavidprice reopened this Aug 27, 2023
@thedavidprice thedavidprice added bug/confirmed We have confirmed this is a bug and removed bug/needs-info More information is needed for reproduction labels Aug 27, 2023
@thedavidprice thedavidprice self-assigned this Aug 27, 2023
@ahaywood
Copy link
Contributor

Once this is resolved, it will also fix #9046 and #9035 (duplicates)

@papaponmx
Copy link
Contributor

papaponmx commented Aug 31, 2023

Not sure if this adds to the conversation but I can confirm that today.
I have a fresh setup, that just ran yarn rw setup ui tailwindcss

then ran

yarn redwood generate page Home

and found the error below which is quite similar to #9035.

← Reverted because: Error applying template at
  /Users/papaponmx/Projects/prioritize-me/node_modules
  /@redwoodjs/cli/dist/commands/generate/page/template
  s/page.tsx.template for Home: require() of ES Module
  /Users/papaponmx/Projects/prioritize-me/node_modules
  /prettier-plugin-tailwindcss/dist/index.mjs not
  supported.
  Instead change the require of
  /Users/papaponmx/Projects/prioritize-me/node_modules
  /prettier-plugin-tailwindcss/dist/index.mjs to a
  dynamic import() which is available in all CommonJS
  modules.
◼ Updating routes file...
◼ Generating types...
◼ One more thing...
Error applying template at /Users/papaponmx/Projects/prioritize-me/node_modules/@redwoodjs/cli/dist/commands/generate/page/templates/page.tsx.template for Home: require() of ES Module /Users/papaponmx/Projects/prioritize-me/node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of /Users/papaponmx/Projects/prioritize-me/node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

jtoar pushed a commit that referenced this issue Sep 2, 2023
…ier-plugin-tailwindcss v0.5 (#9076)

fixes #9075

`prettier-plugin-tailwindcss` >= 0.5 requires Prettier v3. This PR pins
the version to `0.4.1`, which is the most recent version prior to v0.5.

**NOTE:** This issue will still affect all previous versions of Redwood
because the setup ui tailwindcss command defaults to adding the Tailwind
deps at latest.

### Next Steps
I'll open two PRs, one to revert this and one to upgrade Prettier to v3
(both for next major).
jtoar pushed a commit that referenced this issue Sep 2, 2023
…ier-plugin-tailwindcss v0.5 (#9076)

fixes #9075

`prettier-plugin-tailwindcss` >= 0.5 requires Prettier v3. This PR pins
the version to `0.4.1`, which is the most recent version prior to v0.5.

**NOTE:** This issue will still affect all previous versions of Redwood
because the setup ui tailwindcss command defaults to adding the Tailwind
deps at latest.

### Next Steps
I'll open two PRs, one to revert this and one to upgrade Prettier to v3
(both for next major).
@dustinsgoodman
Copy link
Contributor

dustinsgoodman commented Sep 10, 2023

I think there may be some other lint related issues to installing Tailwind. I took the patch and locked in at version 0.4.1 for the tailwind prettier plugin but I also had to install several other deps to get linting to work again. I'm on a v6.2.0 install of Redwood with Tailwind installed as of v6.1.0. If you revert this commit on this repo, linting will start failing.

image

Here are the error messages I got:
image
image
image

The first 2 were resolved by adding the specified dep to devDeps. The last one required the patch fix from this issue.

@dustinsgoodman
Copy link
Contributor

dustinsgoodman commented Sep 10, 2023

Adding to the above, turns out I had to do one more dependency install to fix the dev server. Seems like this is also needed to resolve dev server issues. I did try reducing down to just the tailwind patch but that wasn't sufficient here.

UPDATE: This actually rabbit holed a bit. Doing these changes led to the RW CLI breaking and so I just reverted all the installs and removed the tailwind prettier plugin for now. I'll wait for the next release that fixes this.

UPDATE 2: I broke a lot of the references here because my entire setup got borked. Had to revert a good ways to get back to a healthy build. I think there's a combination of issues with tailwind and rw 6.2.0. I kept it to a branch for reference but I need to revert my main branch to get back to a healthy working state. https://github.com/dustinsgoodman/event-platform/commits/broken-state

@dustinsgoodman
Copy link
Contributor

I did the following to get back to a stable state for those following along:

  1. Upgrade to Redwood 6.2.2
  2. Re-run the tailwind set up with yarn rw setup ui tailwindcss --force
  3. I had manually installed prettier and needed to uninstall it.

All good now.

@ehowey
Copy link
Contributor

ehowey commented Dec 8, 2023

I did the following to get back to a stable state for those following along:

  1. Upgrade to Redwood 6.2.2
  2. Re-run the tailwind set up with yarn rw setup ui tailwindcss --force
  3. I had manually installed prettier and needed to uninstall it.

All good now.

This worked for me too in case anyone else runs into the issue, except I am on v6.5.

@ahaywood
Copy link
Contributor

I believe this has been resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment