Issues with upgrading to Next.js v14.2.x

[ZhongYanZhiShi]

• Deploy 0:

  // postcss.config.cjs
  module.exports = {
    plugins: {},
  }
  
  // No errors will occur, but the unocss styles will not take effect

• Deploy 1:

  // postcss.config.cjs
  module.exports = {
    plugins: {
      '@unocss/postcss': {},
    },
  }

  ERROR:

    Build Error
  Failed to compile
  
  Next.js (14.2.0) out of date (learn more)
  ./app/page.module.css
  Error: [object Object] is not a PostCSS plugin
  

• Deploy 2:

  // postcss.config.cjs
  module.exports = {
    plugins: {
      '@unocss/postcss': {
        content: [
          './app/**/*.{ts,tsx}',
          './components/**/*.{ts,tsx}',
        ]
      }
    },
  }

ERROR:

  Build Error
Failed to compile

Next.js (14.2.0) out of date (learn more)
./app/page.module.css
TypeError: require(...) is not a function

Other configurations

• package.json

  {
    "name": "my-app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start",
      "lint": "next lint"
    },
    "dependencies": {
      "next": "14.2.0",
      "react": "^18",
      "react-dom": "^18"
    },
    "devDependencies": {
      "@types/node": "^20",
      "@types/react": "^18",
      "@types/react-dom": "^18",
      "@unocss/postcss": "^0.59.2",
      "eslint": "^8",
      "eslint-config-next": "14.2.0",
      "typescript": "^5",
      "unocss": "^0.59.2"
    }
  }

• uno.config.ts

  import {
    defineConfig,
    presetUno,
  } from 'unocss'
  
  export default defineConfig({
    shortcuts: {
      'flex-center': 'flex justify-center items-center',
    },
    presets: [
      presetUno(),
    ],
  })

How do I fix this error?