Hydrogen npm run codegen does not work when prettier-plugin-tailwindcss is present

Dev Platform
1

How to reproduce?

(Step 1) Create Hydrogen skeleton using npm create @shopify/hydrogen@latest – --quickstart

(Step 2) Install Tailwing CSS as described in the official doc: Install Tailwind CSS with React Router - Tailwind CSS

(Step 3) Install prettier-plugin-tailwindcss as described in the repo: GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.

(Step 4) Execute npm run codegen and the following error will be thrown:
Codegen] require() cannot be used on an ESM graph with top-level await. Use │
│ import() instead. To see where the top-level await comes from, use │
│ --experimental-print-required-tla. │
│ │
│ From node_modules/@shopify/cli/dist/chunk-PKR7KJ6P.js │
│ Requiring node_modules/prettier-plugin-tailwindcss/dist/index.mjs

2

Hi @siva636, thanks for reaching out about this.

Could you share the documentation that recommends installing the Prettier plugin for Tailwind? Given this incompatibility, I wasn’t aware we were suggesting it, and I’d like to make sure we correct the guidance if needed.

3

No official Shopify doc specifically recommends prettier-plugin-tailwindcss as far as I know. But many professional Hydrogen developers really want this package installed I hope.

Also this issue seems not specifically related to prettier-plugin-tailwindcss package, instead other ESM only packages will face the same issue I guess.

Tainwind itself strongly recommends this package:

4

Thanks for sharing that context.

I can see how this package would be helpful for larger Hydrogen projects. We’ll consider improving CLI support for these types of packages, but I can’t make any promises right now. I’ll follow up here once we’ve either added support or decided not to pursue it.

In the meantime, it may be worth looking at alternatives such as IDE extensions.