Error: Module build failed | Angular13: ck-editor postcss-loader error

Question

i'm using "@angular-builders/custom-webpack" for webpack configurations.

and the versions are:

    `"dependencies": {
      "@angular/animations": "~13.3.12",
      "@angular/cdk": "^11.2.13",
      "@angular/common": "~13.3.12",
      "@angular/compiler": "~13.3.12",
      "@angular/core": "~13.3.12",
      "@angular/forms": "~13.3.12",
      "@angular/material": "^11.2.13",
      "@angular/platform-browser": "~13.3.12",
      "@angular/platform-browser-dynamic": "~13.3.12",
      "@angular/router": "~13.3.12",`your text`
      "@ckeditor/ckeditor5-autosave": "^40.0.0",
      "@ckeditor/ckeditor5-basic-styles": "^40.0.0",
      "@ckeditor/ckeditor5-block-quote": "^40.0.0",
      "@ckeditor/ckeditor5-clipboard": "^40.0.0",
        ........
      "@ngx-translate/core": "^14.0.0",
      "bootstrap": "^5.2.3",
      "bootstrap-icons": "^1.10.5",
      "crypto-js": "^4.1.1",
      "css-loader": "^5.2.7",
      "deepmerge-ts": "^5.1.0",
      "install": "^0.13.0",
      "jquery": "^3.6.2",
      "jspdf": "^2.5.1",
      "jspdf-autotable": "^3.5.31",
      "jwt-decode": "^3.1.2",
      "ngx-logger": "^5.0.12",
      "ngx-translate-multi-http-loader": "^9.4.0",
      "npm": "^10.2.1",
      "postcss-loader": "^4.3.0",
      "raw-loader": "^4.0.2",
      "rxjs": "~7.8.0",
      "structured-log": "^0.2.0",
      "structured-log-seq-sink": "^0.4.1",
      "style-loader": "^2.0.0",
      "tslib": "^2.0.0",
      "xlsx": "^0.18.5",
      "zone.js": "~0.11.8"
    },
    "devDependencies": {
      "@angular-builders/custom-webpack": "^13.1.0",
      "@angular-devkit/build-angular": "~13.3.11",
      "@angular/cli": "~13.3.11",
      "@angular/compiler-cli": "~13.3.12",
      "@types/jasmine": "~3.6.0",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "^12.11.1",
      "codelyzer": "^6.0.0",
      "jasmine-core": "~3.6.0",
      "jasmine-spec-reporter": "~5.0.0",
        .......
      "protractor": "~7.0.0",
      "ts-node": "~8.3.0",
      "tslint": "~6.1.0",
      "typescript": "~4.6.4"
    }`

i've done the configuration right in the angular.json file

    "projects": {
      "application-surveyTool": {
        "projectType": "application",
          "schematics": { },
        "root": "",
          "sourceRoot": "src",
            "prefix": "app",
              "architect": {
          "build": {
            "builder": "@angular-builders/custom-webpack:browser",
              "options": {
              "customWebpackConfig": {
                "path": "./webpack.config.js"
              },

              ......

              "serve": {
                "builder": "@angular-builders/custom-webpack:dev-server",

Here is the webpack.config.js file:

    const webpack = require('webpack');
    const path = require('path');
    const { styles } = require('@ckeditor/ckeditor5-dev-utils');

    module.exports = {
      plugins: [
        new webpack.DefinePlugin({
          'STABLE_FEATURE': JSON.stringify(true),
          'EXPERIMENTAL_FEATURE': JSON.stringify(false)
        })
      ],
      module: {
        rules: [
          {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

            use: ['raw-loader']
          },
          {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

            use: [

              {
                loader: 'style-loader',
                options: {
                  injectType: 'singletonStyleTag',
                  attributes: {
                    'data-cke': true
                  }
                }
              },
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: styles.getPostCssConfig({
                    themeImporter: {
                      themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                    },
                    minify: true
                  })
                }
              }

            ]
          }
        ]
      }
    };

enter image description here

it seems not working, and i'm unable to find out what's going wrong. i've followed the ckeditor documentation, can anyone please help me with this?

i tried the following:

Added the configurations in webpack.config.js file:

svg loader -> raw-loader css loader -> style-loader -> css-loader -> postcss-loader

Configured the angular.json file

Added the respective packages.