Prettier 3.0.0 causes TypeError: Cannot read properties of undefined (reading 'parsers')

[francisleigh]

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

v0.3.0

What version of Tailwind CSS are you using?

v3.3.1

What version of Node.js are you using?

v16.13.0

What package manager are you using?

pnpm

What operating system are you using?

macOS

Describe your issue

We had our prettier dep set to latest and the update to v3.0.0 causes this module to fail with the error:

TypeError: Cannot read properties of undefined (reading 'parsers')
    at Jz (/Users/user/Developer/.../node_modules/prettier-plugin-tailwindcss/dist/index.js:2368:52914)
    at Object.<anonymous> (/Users/user/Developer/.../node_modules/prettier-plugin-tailwindcss/dist/index.js:2368:43390)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
Process finished with exit code -1

[francisleigh]

Note that down-grading prettier to v2.8.8 fixes the issue.

[adamwathan]

Make sure to upgrade this library too, v0.4.0 and up support Prettier v3 and resolve this error: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases/tag/v0.4.0

[francisleigh]

Great thanks Adam, I should have looked at the prettier-plugin-tailwindcs releases!

[meness]

@adamwathan I still have the issue.

{
"prettier-plugin-tailwindcss": "^0.4.1",
"tailwindcss": "^3.3.3",
"prettier": "^3.0.0",
}

{
  "printWidth": 120,
  "singleQuote": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "bracketSameLine": true,
  "semi": true,
  "jsxSingleQuote": false,
  "singleAttributePerLine": true,
  "plugins": [
    "prettier-plugin-sort-json",
    "prettier-plugin-packagejson",
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss"
  ],
  "overrides": [
    {
      "files": "*.svg",
      "options": {
        "parser": "html"
      }
    }
  ]
}

TypeError: Cannot read properties of undefined (reading 'parsers')
    at Jz (/x/x/x/x/x/x/node_modules/prettier-plugin-tailwindcss/dist/index.js:2368:52914)
    at Object.<anonymous> (/x/x/x/x/x/x/node_modules/prettier-plugin-tailwindcss/dist/index.js:2368:43390)
    at Module._compile (node:internal/modules/cjs/loader:1188:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1243:10)
    at Module.load (node:internal/modules/cjs/loader:1058:32)
    at Module._load (node:internal/modules/cjs/loader:893:12)
    at f._load (node:electron/js2c/asar_bundle:2:13330)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)

[adamwathan]

@meness Can you create a new issue that includes a proper reproduction? Something we can clone down and reproduce the problem with on our own machines so we can look into it and troubleshoot.

[Igloczek]

@meness restart VS Code or reload the Prettier extension, should fix it.
There is something weird going with reading the config files since the v3 release, probably they are not reading the config file on the fly anymore.