Next.js config is not loading sass files correctly from bootstrap version 5

Question

Experiencing an issue during the migration from Bootstrap version 4 to version 5. I'm receiving a warning about an invalid object in my next.config.js file, resulting in errors while loading Sass files from Bootstrap. I'm specifically importing styles from Bootstrap into bootstrap.scss and then into styles.scss. The warning message can be viewed here. How can I address this issue and ensure a smooth transition to Bootstrap v5?

enter image description here

    const withPlugins = require("next-compose-plugins");
    const withImages = require("next-images");

    /** @type {import('next/dist/next-server/server/config-shared').NextConfig} */
    const nextConfig = {
      trailingSlash: true,
      experimental: {
        externalDir: true,
      },
      webpack: (config) => {
        const myConfig = {
          ...config,
          output: {
            ...config.output,
            environment: {
              ...config.output.environment,
              module: true,
              dynamicImport: true,
            },
          },
        };
        return myConfig;
      },
    };

    module.exports = async (phase, { defaultConfig }) => {
      delete defaultConfig['webpackDevMiddleware'];
    
      return withPlugins(
        [
          withImages
          // your other plugins here
        ],
        nextConfig
      );
    }

This is the how I am loading sass files from bootstrap. bootstrap.scss

    /*!
     *
     * This file is copied from '...node_modules/bootstrap/scss/bootstrap'
     * so to include only those modules we're using.
    
     * Bootstrap v4.5.0 (https://getbootstrap.com/)
     * Copyright 2011-2020 The Bootstrap Authors
     * Copyright 2011-2020 Twitter, Inc.
     * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
     */
    
    @import "../../node_modules/bootstrap/scss/functions";
    @import "../../node_modules/bootstrap/scss/variables";
    @import "../../node_modules/bootstrap/scss/mixins";
    @import "../../node_modules/bootstrap/scss/root";
    @import "../../node_modules/bootstrap/scss/reboot";
    @import "../../node_modules/bootstrap/scss/maps";
    @import "../../node_modules/bootstrap/scss/type";
    @import "../../node_modules/bootstrap/scss/images";
    @import "../../node_modules/bootstrap/scss/grid";
    @import "../../node_modules/bootstrap/scss/containers";
    @import "../../node_modules/bootstrap/scss/tables";
    @import "../../node_modules/bootstrap/scss/forms";
    @import "../../node_modules/bootstrap/scss/buttons";
    @import "../../node_modules/bootstrap/scss/transitions";
    @import "../../node_modules/bootstrap/scss/dropdown";
    @import "../../node_modules/bootstrap/scss/button-group";
    @import "../../node_modules/bootstrap/scss/placeholder";
    @import "../../node_modules/bootstrap/scss/nav";
    @import "../../node_modules/bootstrap/scss/navbar";
    @import "../../node_modules/bootstrap/scss/card";
    @import "../../node_modules/bootstrap/scss/breadcrumb";
    @import "../../node_modules/bootstrap/scss/pagination";
    @import "../../node_modules/bootstrap/scss/badge";
    @import "../../node_modules/bootstrap/scss/alert";
    @import "../../node_modules/bootstrap/scss/progress";
    @import "../../node_modules/bootstrap/scss/list-group";
    @import "../../node_modules/bootstrap/scss/close";
    @import "../../node_modules/bootstrap/scss/toasts";
    @import "../../node_modules/bootstrap/scss/modal";
    @import "../../node_modules/bootstrap/scss/tooltip";
    @import "../../node_modules/bootstrap/scss/popover";
    @import "../../node_modules/bootstrap/scss/carousel";
    @import "../../node_modules/bootstrap/scss/spinners";
    @import "../../node_modules/bootstrap/scss/utilities";

    @import "../config/scss/variables";
    @import "bootstrap";
    @import "fontawesome";
    @import "fontawesome/solid";
    @import "fontawesome/brands";

    @import "../scss/modules/manifest";