OpenAPI codegen + Prettier 3 plugins

[philsp]

Adding Tailwind plugin to Prettier breaks codegen

{
  "name": "openapi-test",
  "dependencies": {
    "@rtk-query/codegen-openapi": "^1.0.0",
    "prettier": "^3.0.0",
    "prettier-plugin-tailwindcss": "^0.4.1"
  }
}

// openapi.config.js
module.exports = {
  schemaFile: 'https://raw.githubusercontent.com/reduxjs/redux-toolkit/master/packages/rtk-query-codegen-openapi/test/fixtures/petstore.json',
  apiFile: 'https://raw.githubusercontent.com/reduxjs/redux-toolkit/master/packages/rtk-query-codegen-openapi/test/fixtures/emptyApi.ts',
  outputFile: './example.ts',
};

// prettier.config.js
module.exports = {
  printWidth: 10000,
  plugins: ['prettier-plugin-tailwindcss'], // remove this to make codegen work
}

Output

npx @rtk-query/codegen-openapi openapi.config.js
Generating ./example.ts
TypeError: Cannot read properties of undefined (reading 'startsWith')
    at printAngular (___\openapi-test\node_modules\@rtk-query\codegen-openapi\node_modules\prettier\index.js:24775:22)
    ...

[ikkz]

I downgrade prettier to 2.8.8 and it works. see https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/176

[philsp]

The problem still persists with prettier 3. It's probably related to the prettier dependency of codegen-openapi

[kirillshvets]

I have found a workaround and it seems to be working You can use an environment variable to detect when codegen by RTK Query is running and opt-out the prettier-plugin-tailwindcss

// package.json
{
  "scripts": {
    "openapi:gen": "RTK_QUERY_CODEGEN=true rtk-query-codegen-openapi openapi.config.ts"
  }
}

// .prettierrc.cjs
const RTK_QUERY_CODEGEN = process.env.RTK_QUERY_CODEGEN;

module.exports = {
  plugins: RTK_QUERY_CODEGEN ? [] : ['prettier-plugin-tailwindcss']
};

[markerikson]

https://github.com/reduxjs/redux-toolkit/releases/tag/%40rtk-query%2Fcodegen-openapi%402.0.0-alpha.0 has an option to point to an alternate Prettier Please try it out and let us know if it works!