Unable to autogenerate migrations when using plugin prettier-plugin-tailwindcss

[khaleelkhalifa]

Hi,
Currently having issues trying to run the following
npx datocms migrations:new --autogenerate=feature:main 'test'

I have the plugin "prettier-plugin-tailwindcss": "^0.5.6", installed with "@datocms/cli": "^1.2.1" as devDependencies
I am getting the following error

Writing "migrations\1697721894_test.ts"... !
    Error: require() of ES Module C:\Users\_..omitted.._\node_modules\prettier-plugin-tailwindcss\dist\index.mjs not supported.
    Instead change the require of C:\Users\_..omitted.._\node_modules\prettier-plugin-tailwindcss\dist\index.mjs to a dynamic import() which is available in all   
    CommonJS modules.
    Code: ERR_REQUIRE_ESM

[stefanoverna]

@khaleelkhalifa can you please try to temporarily replace the content of your tsconfig with the following, and running the migrations again?

{
  "compilerOptions": {
    "declaration": true,
    "importHelpers": true,
    "module": "commonjs",
    "strict": true,
    "target": "es2019"
  }
}

[khaleelkhalifa]

Hi @stefanoverna , Still the same error I am afraid

[stefanoverna]

@khaleelkhalifa we don't use "prettier-plugin-tailwindcss" so it's quite strange. Can you provide a complete stack trace, if available?

[khaleelkhalifa]

@stefanoverna I am only getting that error back without any stack trace and can't see a flag to turn on verbose.
Do you know what I need to pass in to get one?

Note, I am using prettier-plugin-tailwindcss as a dev dependancy for my project.

[khaleelkhalifa]

Were you able to replicate this issue? @stefanoverna

[stefanoverna]

Nope @khaleelkhalifa.. can you share with us a repo with the problem? You can send it to [email protected] if you prefer.

[khaleelkhalifa]

Hi, Please see https://github.com/khaleelkhalifa/dato-migrations

[stefanoverna]

@marcelofinamorvieira can you take a look at this?

[khaleelkhalifa]

Hi, Has there been any update on this? Keen to get migrations working on our tech stack

[marcelofinamorvieira]

Hey @khaleelkhalifa sorry for the delay on the response!

It seems like all versions after v0.5 do not support ts files that are compiled to "commonjs" to include "import" as you can read right here, so it won't be compatible with our CLI:

tailwindlabs/prettier-plugin-tailwindcss#207 (comment)

Since our migration files always start with

import { Client, SimpleSchemaTypes } from "@datocms/cli/lib/cma-client-node";

You get that error when trying to write the migration file if you run the generate migration command in a repository with that prettier plugin version.

An easy way to solve this would be to just generate and run the migrations in a different app folder, one without the prettier + prettier-tailwind plugin, with a clean package.json
Using a repo just for the migrations is usually better (as the migrations don't need to be in the same folder as your front-end, since they only interact with Dato directly)

[luukschipperheyn]

I started experiencing this issue after upgrading @datocms/cli from version 2.0.14 to 2.0.15.

[stefanoverna]

Mh, v2.0.15 solves a super-minor issue (migration generation crashed if field ID or label contained the word "export") so I don't think it could be the cause of the problem.

Can you share a repo reproducing the issue @luukschipperheyn so we can better investigate?

[luukschipperheyn]

@stefanoverna here you go. I copied the dependencies and some config files from the project I'm working on: https://github.com/luukschipperheyn/datocms-cli-migration-issue

steps to reproduce

• npm i
• make a datcms project. add a simple schema to main
• fork main, call it develop
• make a schema change in develop
• create .env and add DATOCMS_API_TOKEN=[your-token]
• npx datocms migrations:new --autogenerate=develop:main test

This yields the following error for me:

Error: require() of ES Module /Users/luuk/development/datocms-cli-migration-issue/node_modules/prettier-plugin-tailwindcss/dist/index.mjs
not supported.
Instead change the require of /Users/luuk/development/datocms-cli-migration-issue/node_modules/prettier-plugin-tailwindcss/dist/index.mjs to
    a dynamic import() which is available in all CommonJS modules.
Code: ERR_REQUIRE_ESM

Downgrading @datocms/cli to 2.0.14 gets rid of the error:

• npm install --save-dev @datocms/[email protected]
• npx datocms migrations:new --autogenerate=develop:main test

[stefanoverna]

Thanks for the repro @luukschipperheyn! v2.0.16 should fix this issue.

— Basically, what happens is that the CLI formats the migration file with Prettier and tries to reuse the .prettierrc settings from the repository in which it is run (which makes sense). But things can go wrong. In your case, the Tailwind plugin only supports Prettier 3, while the CLI uses Prettier 2.

The fix has been to continue trying to use the .prettierrc.. but if it fails, fallback to pristine Prettier settings.