Outdated use of require() causing errors in external library usage

[martitv]

What version of prettier-plugin-tailwindcss are you using?

v0.5.4

What version of Tailwind CSS are you using?

v3.3.3

What version of Node.js are you using?

v18.16.1

What package manager are you using?

pnpm

What operating system are you using?

Windows

Reproduction URL

None

Describe your issue

I am trying to use ts-to-zod to generate Zod schemas from my autogenerated types. ts-to-zod fails due to:

Error: require() of ES Module C:\Users\Myself\Repositories\MyRepo\myApp\node_modules\.pnpm\[email protected][email protected]\node_modules\prettier-plugin-tailwindcss\dist\index.mjs not supported.
Instead change the require of C:\Users\Myself\Repositories\MyRepo\myApp\node_modules\.pnpm\[email protected][email protected]\node_modules\prettier-plugin-tailwindcss\dist\index.mjs to a dynamic import() which is available in all CommonJS modules.
    Code: ERR_REQUIRE_ESM

[thecrypticace]

@martitv this error is generally because one is using require() to load the plugin when they should not be. Looking at the linked issue I suspect it's trying to use Prettier 2 to load this plugin when it is Prettier 3 only.

Can you provide a reproduction repo I can take a look at (doesn't need to be minimal — just want to verify things to see if I'm on the right track about this).

[martitv]

Here: https://github.com/martitv/ts-to-zod-prettier-plugin-tailwindcss

Just stand in the "my-app" folder and run npm run codegen:schemas and you should see the error

[thecrypticace]

Hey! Thanks for that repro. The problem is definitely that ts-to-zod is using Prettier 2 to do some formatting internally, we only support Prettier v3, and they're both using your config file (plus Prettier v2 autoloads plugins by default so even without the config it'd still break):

That said, I did figure out a workaround but it requires a super strange setup for the config to stop v2 from loading prettier-plugin-tailwindcss while still allowing ts-to-zod to use Prettier and your config.

You'll want to customize your prettier config such that:

• Prettier v2 autoloading is disabled — otherwise the plugin will always be picked up because of the package name and you'll keep getting the error
• Configure Prettier to only load the plugin for files matching app/*. You do this via the overrides key in your config.

This setup looks like this:

/** @type {import('prettier').Config} */
module.exports = {
  // Stop autoloading in Prettier v2
  // This is a warning in Prettier v3
  // but you can safely ignore it
  pluginSearchDirs: [],

  overrides: [
    // Only load `prettier-plugin-tailwindcss` when scanning the app dir
    // This _should_ work so long as `ts-to-zod` doesn't run prettier on any files in `app/*`
    {
      files: ["app/*"],
      options: {
        plugins: ["prettier-plugin-tailwindcss"],
      },
    },
  ],
};

So, unfortunately nothing we can do to fix this on our end but the above Prettier config might fix things for you. Hope that helps! ✨

[martitv]

Thanks for the help! Ill reopen the issue on ts-to-zod to tell the to update their prettier version