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

AlbertFiat24 commented 4 days ago

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

[X] I agree to follow this project's Code of Conduct

sjoqvist commented 3 days ago

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 commented 3 days ago

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

Daniel3711997 commented 1 day ago

Still not compatible with NextJS 15

FullHuman / purgecss