ReferenceError: module is not defined in ES module scope

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./path/to/your/index.html'], // index.html의 경로를 정확히 지정하세요.
  defaultExtractor: content => content.match(/[\\w-/:]+(?<!:)/g) || []
});

module.exports = {
  plugins: [
    purgecss
  ]
}

위와 같이 제대로 PostCSS 설정 파일을 생성했으나, npx postcss ./src/output.css -o ./src/purged-output.css 명령어로 실행하면 아래와 같은 오류가 발생하는 경우가 있습니다.

ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'C:\Users\\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

이 오류 메시지는 postcss.config.js 파일이 ES 모듈로 처리되고 있지만, CommonJS 문법을 사용하고 있다는 뜻입니다.

오류가 발생하는 이유

package.json에 "type": "module"이 포함되어 있기 때문입니다. ES 모듈과 CommonJS 모듈은 서로 다른 모듈 시스템을 사용합니다.

문제를 해결하기 위한 몇 가지 방법이 있는데, 저는 아래와 같은 방법으로 해결했습니다.

postcss.config.js를 ES 모듈로 변환하여 해결

postcss.config.js 파일을 ES 모듈 문법으로 수정합니다. require 대신 import 구문을 사용해야 합니다. 예를 들면 아래와 같습니다.

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

export default {
  plugins: [
    tailwindcss,
    autoprefixer,
    purgecss({
      content: ["./**/*.html"],
      // 기타 설정...
    }),
  ],
};