[Bug]: TypeError: require(...) is not a function

[AlbertFiat24]

Describe the bug

A bug when upgrading to postcss-purgecss v7.0.2, when trying to build NextJS, gives the error

Import trace for requested module:
./node_modules/react-intl-tel-input-18/dist/main.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[7].oneOf[10].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[7].oneOf[10].use[2]!./node_modules/react-intl-tel-input-18/dist/main.css
./node_modules/react-intl-tel-input-18/dist/main.css

./styles/animated-counter.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[7].oneOf[12].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[7].oneOf[12].use[2]!./styles/animated-counter.css
TypeError: require(...) is not a function
at /Users/albert/Developer/reactdapp/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:62:63
at plugin (/Users/albert/Developer/reactdapp/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:30:44)
at Processor.normalize (/Users/albert/Developer/reactdapp/node_modules/next/node_modules/postcss/lib/processor.js:18:13)
at new Processor (/Users/albert/Developer/reactdapp/node_modules/next/node_modules/postcss/lib/processor.js:11:25)
at postcss (/Users/albert/Developer/reactdapp/node_modules/next/node_modules/postcss/lib/postcss.js:26:10)
at /Users/albert/Developer/reactdapp/node_modules/next/dist/build/webpack/config/blocks/css/index.js:127:37

Previously in v6.0.0 works correctly.

To Reproduce

Run v7.X.X in a NextJS application

Expected Behavior

Should build the project correctly.

Environment

MacOS,
"@fullhuman/postcss-purgecss": "7.0.2",
"next": "15.0.3",
node v20.10.0
npm v10.2.3

Add any other context about the problem here

context

Code of Conduct

• I agree to follow this project's Code of Conduct

[sjoqvist]

I have a possibly related problem. The following postcss.config.js worked fine with @fullhuman/postcss-purgecss version 6.0.0.

import autoprefixer from 'autoprefixer';
import purgecss from '@fullhuman/postcss-purgecss';

export default {
  plugins: [
    autoprefixer({}),
    purgecss({
      content: ['./index.html', './src/**/*.tsx', './src/**/*.ts'],
      safelist: [/^(?!mdi-)/],
    }),
  ],
};

After upgrading to 7.0.2 (and not changing anything else) I get the following build error.

3.472 vite v5.4.11 building for production...
3.531 transforming...
3.649 node:internal/process/promises:394
3.649     triggerUncaughtException(err, true /* fromPromise */);
3.649     ^
3.649
3.649 [Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /usr/src/web): [TypeError] purgecss is not a function
3.649 TypeError: purgecss is not a function
3.649     at file:///usr/src/web/postcss.config.js:7:5
3.649     at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
3.649     at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:547:26)
3.649     at async importDefault (file:///usr/src/web/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:33758:18)
3.649     at async Object.search (file:///usr/src/web/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:25914:23)]
3.649
3.649 Node.js v23.2.0

The following change seems to fix it, though.

@@ -1,10 +1,10 @@
 import autoprefixer from 'autoprefixer';
-import purgecss from '@fullhuman/postcss-purgecss';
+import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';

 export default {
   plugins: [
     autoprefixer({}),
-    purgecss({
+    purgeCSSPlugin({
       content: ['./index.html', './src/**/*.tsx', './src/**/*.ts'],
       safelist: [/^(?!mdi-)/],
     }),

If this is the intended fix, I recommend documenting it. It's not mentioned under Breaking Changes in the changelog.

[Ffloriel]

You are right, I will add it under Breaking Changes.

[Daniel3711997]

Still not compatible with NextJS 15

[AlbertFiat24]

in case it helps, this is the setup i follow in NextJS:
https://purgecss.com/guides/next.html

Please update the documentation, if it needs something different with the new version 7.x.x

[bdkjones]

Is PurgeCSS 7.x no longer supporting require and now forcing everyone to move to import syntax?

If so, that's a really giant breaking change, because a ton of configuration scripts are not using ECMAScript Module syntax. It'll force me to stay on 6.x for a long time.

[Daniel3711997]

Until this is fixed for NextJS 15 i made a patch to allow the CJS loader to load the plugin

diff --git a/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js b/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js
index c54db9f..aa66a7f 100644
--- a/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js
+++ b/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js
@@ -109,5 +109,7 @@ const purgeCSSPlugin = function (opts) {
 };
 purgeCSSPlugin.postcss = true;
 
-exports.default = purgeCSSPlugin;
-exports.purgeCSSPlugin = purgeCSSPlugin;
+// exports.default = purgeCSSPlugin;
+// exports.purgeCSSPlugin = purgeCSSPlugin;
+
+module.exports = purgeCSSPlugin;
\ No newline at end of file

The problem seems to be here: 87d15b7

I think the problem is that the Rollup compiler when sees only a default export it transpiles to module.exports = function but when using exports too it transpiles to export.default = function and exports.export = function and thats why only specifying the plugin name on the postcss plugin won't work because there is no function to call, only a object.

[carlosjeurissen]

Seems for now you can use this hack:

const purgeCSSPlugin = require('@fullhuman/postcss-purgecss').default;

Or more breaking-proof:

const purgeImport = require('@fullhuman/postcss-purgecss');
const purgeCSSPlugin = purgeImport.purgeCSSPlugin || purgeImport.default || purgeImport;

// use like before
purgeCSSPlugin();