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

thedavidprice commented 1 year ago

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.

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases/tag/v0.5.0

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:

https://prettier.io/blog/2023/07/05/3.0.0.html

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

Next Steps

PR to work around for now is here:

9076

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?

[x] I'm interested in working on this

ahaywood commented 1 year ago

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

papaponmx commented 1 year ago

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.

dustinsgoodman commented 12 months ago

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.

Here are the error messages I got:

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

dustinsgoodman commented 12 months ago

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 commented 11 months ago

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

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

All good now.

ehowey commented 9 months ago

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

Upgrade to Redwood 6.2.2

Re-run the tailwind set up with yarn rw setup ui tailwindcss --force

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.

redwoodjs / redwood