TypeError in plugin "gulp-postcss" plugin is not a function

[katebakal]

I have been having an ongoing issue that I can't seem to resolve. Any ideas?

[17:01:15] 'style' errored after 2.63 s
[17:01:15] TypeError in plugin "gulp-postcss"
Message:
    plugin is not a function
Details:
    fileName: /Users/kate/Documents/Web/Dev/cms/_scss/cms.css
    domainEmitter: [object Object]
    domainThrown: false

Stack:
TypeError: plugin is not a function
    at LazyResult.run (/Users/kate/Documents/Web/Dev/cms/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/Users/kate/Documents/Web/Dev/cms/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/Users/kate/Documents/Web/Dev/cms/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:225:14)
    at /Users/kate/Documents/Web/Dev/cms/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/Users/kate/Documents/Web/Dev/cms/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/Users/kate/Documents/Web/Dev/cms/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:131:17)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

      "devDependencies": {
        "@babel/core": "^7.8.0",
        "@babel/preset-env": "^7.8.2",
        "autoprefixer": "^9.8.6",
        "browser-sync": "^2.27.9",
        "cssnano": "^5.1.12",
        "gulp": "^4.0.2",
        "gulp-babel": "^8.0.0",
        "gulp-concat": "^2.6.1",
        "gulp-postcss": "^9.0.1",
        "gulp-rename": "^2.0.0",
        "gulp-sass": "^5.1.0",
        "gulp-sourcemaps": "^2.6.5",
        "gulp-uglify": "^3.0.2",
        "postcss": "^8.4.14",
        "rename": "^1.0.4",
        "sass": "^1.54.2"
      }

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require("gulp-sourcemaps");
const postcss = require('gulp-postcss');
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
const rename = require("gulp-rename");
const browserSync = require('browser-sync').create();


var paths = {
  styles: {
      //  check all folders for any scss file
    src: "./_scss/**/*.scss",
      // compile files to
    dest: "./assets/css"
  }

  // jssty
  ,
  js: {
    src: './_js/**/*.js',
    dest: './assets/js'
  }
};

// compile scss to css
function style(){
    return gulp
      .src(paths.styles.src)
      .pipe(sourcemaps.init())
      .pipe(sass()
      .on('error', sass.logError))
      .pipe(postcss([autoprefixer(), cssnano()]))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(paths.styles.dest))
    // browser sync
      .pipe(browserSync.stream());
}
// minify js
function jsmin() {
  return gulp
    .src(paths.js.src)
    .pipe(babel({
			presets: ['@babel/preset-env']
		}))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.js.dest));
}

function watch(){
    browserSync.init({
        notify:false,
        injectChanges: true,
        server:{
          baseDir: "./",
          // baseDir: "./public",
          // baseDir: "http://localhost:",
        }
      });

    gulp.watch(paths.styles.src, style)
    gulp.watch('./**/*.html').on('change', browserSync.reload);
    // gulp.watch(paths.js.src, jsmin).on('change', browserSync.reload);
}
// exports.jsmin = jsmin;
exports.style = style;
exports.watch = watch;