Error after setup Tailwind with RW 6.0 typescript

Get Help and Help Others
1

Hi, I’ve just created a new project using RW 6.0.5:

$ yarn create redwood-app --ts ./redwoodblog

Then, I setup Tailwind using:

$ yarn rw setup ui tailwindcss

Everything looks good, but I found this problem trying to create a new page:

$ yarn redwood generate page home /
← Reverted because: Error applying template at
  /home/fernando/git/redwoodblog/node_modules/@redwoodjs/cli/dist/commands/generate/page/templates/page.tsx.template for home: require() of ES Module
  /home/fernando/git/redwoodblog/node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
  Instead change the require of /home/fernando/git/redwoodblog/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 /home/fernando/git/redwoodblog/node_modules/@redwoodjs/cli/dist/commands/generate/page/templates/page.tsx.template for home: require() of ES Module /home/fernando/git/redwoodblog/node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of /home/fernando/git/redwoodblog/node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

I think this is a minor issue, but I don’t have enough skills to resolve it.
Any idea how to fix this?

2

howdy @fmiranda

I also encountered this issue. The quick fix is to go to your package.json in your project root and change "prettier-plugin-tailwindcss": "^0.5.2" to "prettier-plugin-tailwindcss": "0.4.1".

4 Likes
3

@matt Thanks a lot, I was blocked here.
Is this an issue of Redwood or prettier-plugin-tailwindcss?

4

thanks man, lowering down the version fix the issues for now…

to everybodyelse, everytime you update your package.json file, dont forget to yarn install again :sweat_smile:

5

Workaround for code is in this PR: [Bug?]: Tailwind setup fails due to latest dep requiring Prettier v3 · Issue #9075 · redwoodjs/redwood · GitHub

prettier-plugin-tailwindcss >= to v0.5 requires Prettier v3. Redwood is at 2.8. Workaround for now is to pin the dep as shown in solution above. Full resolution will come with the next major after upgrading to Prettier v3 (and then reverting the workaround).

Thanks, all!