ReferenceError: __filename is not defined

[amosbastian]

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

^0.5.1

What version of Tailwind CSS are you using?

^3.3.3

What version of Node.js are you using?

v18.14.0

What package manager are you using?

pnpm

What operating system are you using?

macOS

Describe your issue

I randomly upgraded the package today and it caused Prettier to stop working (I see that you only released it 13 minutes ago) and it gives this error:

ReferenceError: __filename is not defined
    at Uz (file:///Users/amosbastian/Development/contentbase/node_modules/.pnpm/[email protected][email protected]/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2379:3613)
    at file:///Users/amosbastian/Development/contentbase/node_modules/.pnpm/[email protected][email protected]/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2379:3791
    at Vz (file:///Users/amosbastian/Development/contentbase/node_modules/.pnpm/[email protected][email protected]/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2379:3800)
    at CG (file:///Users/amosbastian/Development/contentbase/node_modules/.pnpm/[email protected][email protected]/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2379:40916)
    at cI (file:///Users/amosbastian/Development/contentbase/node_modules/.pnpm/[email protected][email protected]/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2379:40215)
    at async Object.parse (file:///Users/amosbastian/Development/contentbase/node_modules/.pnpm/[email protected][email protected]/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2379:43865)
    at async parse (file:///Users/amosbastian/Development/contentbase/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:16712:11)
    at async coreFormat (file:///Users/amosbastian/Development/contentbase/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:18033:7)
    at async formatWithCursor (file:///Users/amosbastian/Development/contentbase/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:18235:14)
    at async Module.format2 (file:///Users/amosbastian/Development/contentbase/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:21425:25)

Downgrading to 0.4.1 fixes it

[thecrypticace]

Hey, can you provide a reproduction for this? My suspicion is this may have to do with ESM/TS config files but in my testing they appear to work.

[auvred]

Hi! Here is minimal reproduction with readable stack trace
(I built latest code from main branch)

$ pnpm list
Legend: production dependency, optional only, dev only

dependencies:
prettier 3.0.1
prettier-plugin-tailwindcss link:../prettier-plugin-tailwindcss

$ cat .prettierrc.cjs
module.exports = {
  "plugins": ["prettier-plugin-tailwindcss"]
}

$ pnpm prettier --check .prettierrc.cjs
Checking formatting...
.prettierrc.cjs
[error] .prettierrc.cjs: ReferenceError: __dirname is not defined
[error]     at preflight (file:///home/auvred/shared-volume/prettier/prettier-plugin-tailwindcss/dist/index.mjs:30480:90)
[error]     at registerPlugins (file:///home/auvred/shared-volume/prettier/prettier-plugin-tailwindcss/dist/index.mjs:35439:59)
[error]     at createContext (file:///home/auvred/shared-volume/prettier/prettier-plugin-tailwindcss/dist/index.mjs:35789:7)
[error]     at loadTailwindConfig (file:///home/auvred/shared-volume/prettier/prettier-plugin-tailwindcss/dist/index.mjs:95214:17)
[error]     at getTailwindConfig (file:///home/auvred/shared-volume/prettier/prettier-plugin-tailwindcss/dist/index.mjs:95168:16)
[error]     at async Object.parse (file:///home/auvred/shared-volume/prettier/prettier-plugin-tailwindcss/dist/index.mjs:95415:40)
[error]     at async parse (file:///home/auvred/shared-volume/prettier/twcss/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:16712:11)
[error]     at async coreFormat (file:///home/auvred/shared-volume/prettier/twcss/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:18033:7)
[error]     at async formatWithCursor (file:///home/auvred/shared-volume/prettier/twcss/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:18235:14)
[error]     at async formatFiles (file:///home/auvred/shared-volume/prettier/twcss/node_modules/.pnpm/[email protected]/node_modules/prettier/internal/cli.mjs:6782:18)
All matched files use Prettier code style!

---

It seems that this error was caused by tailwindcss

$ sed -n '30478,30482p' ../prettier-plugin-tailwindcss/dist/index.mjs
    var corePlugins = {
      preflight: ({ addBase }) => {
        let preflightStyles = _postcss.default.parse(_fs.default.readFileSync(_path.join(__dirname, "./css/preflight.css"), "utf8"));
        addBase([
          _postcss.default.comment({

https://github.com/tailwindlabs/tailwindcss/blob/237e71598d9ffc020f5302dba221cdd01b3046a8/src/corePlugins.js#L499-L505

[thecrypticace]

@auvred Okay, I can repro that one. I don't think it's the same issue as the original comment but the underlying cause is likely the same. I'm looking into it.

You can work around it by making sure you have a local version of tailwindcss rather than relying on the fallback / built-in one in the plugin.

[thecrypticace]

Hey, I merged in #199 which hopefully should fix this. Could you both give this a try through our insiders build?

pnpm add prettier-plugin-tailwindcss@insiders

[auvred]

For me the issue was solved, but not sure what about the original issue :)

[thecrypticace]

Fantastic news! I'll hold off on a release until @amosbastian can give it a check.

[ydcjeff]

I also faced similar issues but with __dirname. I can confirm that using the insiders build fixed the issue.

[luas10c]

I am interested in submitting a PR that supports ES Modules. what do you think?

[thecrypticace]

I've published v0.5.2 to NPM which should fix this problem. Thanks for checking!