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 support@datocms.com 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:

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/207#issuecomment-1698071122

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)