Can't `require()` plugin after upgrading to v0.5.x

[Paget96]

What version of prettier-plugin-tailwindcss are you using?
v0.5.3

What version of Tailwind CSS are you using?
v3.3.3

What version of Node.js are you using?
19.5.0

What package manager are you using?
npm

What operating system are you using?
Windows 11

Describe your issue
I have just updated from v0.4.0 to 0.5.3 and this issue came when we do try to run the site

`
./app/global.css.webpack[javascript/auto]!=!../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[13].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[13].use[3]!./app/global.css
D:\Development\EmploHub\Emplohub\node_modules\prettier-plugin-tailwindcss\dist\index.mjs:4
const require=_module2.createRequire.call(void 0, import.meta.url)
^

SyntaxError: Identifier 'require' has already been declared
`

We are using NextJs 13.4.19

[thecrypticace]

Can you provide a reproduction? That seems like something is trying to compile the prettier plugin to CJS which isn't possible rather than just run it (which shouldn't be happening).

[Jobbies]

I have the same error.

What version of prettier-plugin-tailwindcss are you using?
v0.5.3

What version of Tailwind CSS are you using?
v3.3.3

What version of Node.js are you using?
18.7.0

What package manager are you using?
npm

What operating system are you using?
MacOS 13.5.1

/Users/joel/.nvm/versions/node/v18.17.0/bin/npm run tw-watch

> hychill.com.au@4.0.0 tw-watch
> NODE_ENV=development TAILWIND_MODE=watch npx tailwindcss -i assets/css/tailwind.css -o assets/css/hychill.css --watch

Rebuilding...
/Users/joel/Files/sites/hychill.com.au/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:4
const require=_module2.createRequire.call(void 0, import.meta.url)
      ^
SyntaxError: Identifier 'require' has already been declared

[triplecasquette]

Facing the same problem:

What version of prettier-plugin-tailwindcss are you using?
v0.5.3

What version of Tailwind CSS are you using?
v3.3.3

What version of Node.js are you using?
20.3.0

What package manager are you using?
pnpm

What operating system are you using?
MacOS 13.4.1

My framework is nextJs

Here is the error message :

- error ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@13.4.19_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[5].oneOf[12].use[2]!./node_modules/.pnpm/next@13.4.19_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[5].oneOf[12].use[3]!./app/globals.css
/Users/vincentcottalorda/sites/ada/node_modules/.pnpm/prettier-plugin-tailwindcss@0.5.3_prettier@3.0.2/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:4
const require=_module2.createRequire.call(void 0, import.meta.url)
      ^

SyntaxError: Identifier 'require' has already been declared
Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@13.4.19_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[5].oneOf[12].use[2]!./node_modules/.pnpm/next@13.4.19_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[5].oneOf[12].use[3]!./app/globals.css
./app/globals.css```

Thanks for any help

Edit: For the moment I just delete the require on the plugins line of my tailwind config so my site run again, but the plugin doesn't work

[thecrypticace]

@Jobbies @com-pote Could either of you provide a reproduction? Or at the very least your tailwind config files?

@com-pote Are you calling require('prettier-plugin-tailwindcss') in your application code, tailwind config, or somewhere else?

[PaulHaze]

I also have been having this issue when upgrading to prettier v3.0 and this plug in to 0.5.3. Apparently this is has been noticed over at Prettier too:

prettier/prettier#15231

prettier/prettier#15062

My prettierrc.json:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

my tailwind config:

/* @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],

  theme: {
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
    },
    screens: {
      xs: '431px',
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
      mxs: { max: '431px' },
      msm: { max: '640px' },
      mmd: { max: '768px' },
      mlg: { max: '1024px' },
      mxl: { max: '1280px' },
      m2xl: { max: '1536px' },
      xsm: { min: '431px' },
      smm: { min: '640px' },
      mdm: { min: '768px' },
      lgm: { min: '1024px' },
      xlm: { min: '1280px' },
      '2xlm': { min: '1536px' },
    },
    container: {
      center: true,
    },
    extend: {
      minWidth: {
        xs: '431px',
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
      maxWidth: {
        xs: '431px',
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
      spacing: {
        sm: '1rem',
        md: '2rem',
        lg: '4rem',
        xl: '8rem',
        '2xl': '16rem',
        '4xl': '32rem',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
};

[diegohaz]

Not sure if it's related, but I see the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of /node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

Here's the prettier.config.cjs file:

/** @type {import("prettier").Config} */
module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
  tailwindConfig: "./tailwind.config.cjs",
};

I'd expect require to work since it's a .cjs file, unless prettier-plugin-tailwindcss is now ESM-only?

[Jobbies]

Well this is embarrassing. I was requiring prettier-plugin-tailwindcss in tailwind.config.js as well as prettier.config.js. Removing it from tailwind.config.js solved the problem for me.

[triplecasquette]

After a few checks I realized that in my prettier file I write .js whereas my tailwind configuration file is a .ts file. So I renamed my file to tailwind.config.js and now I can run pnpm exec prettier ./components --write However, with this configuration I'm no longer able to format with my text editor which, by the way, is vscode, nor can I format on save either, obviously. Maybe there's a configuration problem. Because if I no longer have a prettier.config.js file, I'm still able to format my code as usual, as well as when saving. If you have any advice on my vsCode configuration in relation to prettier, or a way to run the plugin without the prettier config file that would be very helpful, thank you.

[weixinnnn]

My fix is remove prettier-plugin-tailwindcss from tailwind.config and put it in prettier.config as following
module.exports = { plugins: [require("prettier-plugin-tailwindcss")], };
And to avoid conflict, I changed both of them into .js

[mhuretski]

Not sure if it's related, but I see the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of /node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

Here's the prettier.config.cjs file:

/** @type {import("prettier").Config} */
module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
  tailwindConfig: "./tailwind.config.cjs",
};

I'd expect require to work since it's a .cjs file, unless prettier-plugin-tailwindcss is now ESM-only?

the same error for me

[triplecasquette]

plugins: ["prettier-plugin-tailwindcss"],

don't require neither in tailwind.config.js

[mhuretski]

This plugin now requires Prettier v3+

i had 2.8.8, so updating to v3 fixed the issue

[buhlerfanny]

What version of prettier-plugin-tailwindcss are you using?
v0.5.3

What version of Tailwind CSS are you using?
v3.3.2

What version of Prettier are you using?
v3.0.2

What version of Node are you using?
v16.13.0

I'm also getting this error:

Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of .../node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

I've also tried making this file a cjs-file without luck.

// prettier.config.js
module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
};

[thecrypticace]

@buhlerfanny You should use just the plugin name without require():

// prettier.config.js
module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};