What does the [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] and [DEP_WEBPACK_COMPILATION_ASSETS] warning relate to?

I want to run the build for my Next.js app but after upgrading to Next 11, I get the following warnings:

(node:32539) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] DeprecationWarning: SingleEntryPlugin was renamed to EntryPlugin (Use node --trace-deprecation ... to show where the warning was created) Defining routes from exportPathMap (node:32539) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated. BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation. Do changes to assets earlier, e. g. in Compilation.hooks.processAssets. Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

1. Some forums suggested to have only one allocation of CSS assets from normal CSS files to styled components and vice-versa but after trying everything it didn't work.
2. After following the node --trace-deprecation node_modules/webpack/bin/webpack.js suggested the console says

The 'mode' option has not been set, webpack will fallback to 'production'

From my next.config.js I assume I have a mode for dev but not for production:

webpack(config, { webpack, dev, isServer }) {
    config.plugins.push(
        new webpack.ProvidePlugin({
            React: 'react',
        }),
    );
    // use esbuild in dev for faster HMR
    if (dev) {
         esbuildLoader(config, {
             loader: 'jsx',
             target: 'es2017',
         });
         // config.optimization.minimizer.shift()
    }

    // audio support
    config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g)$/i,
        exclude: config.exclude,
        use: [
            {
                loader: require.resolve('url-loader'),
                options: {
                    limit: config.inlineImageLimit,
                    fallback: require.resolve('file-loader'),
                    publicPath: `${config.assetPrefix}/_next/static/images/`,
                    outputPath: `${isServer ? '../' : ''}static/images/`,
                    name: '[name]-[hash].[ext]',
                    esModule: config.esModule || false,
                },
            },
        ],
    });

    config.module.rules.push({
        test: /\.(glsl|vs|fs|vert|frag|svg)$/,
        exclude: /node_modules/,
        use: ['raw-loader', 'glslify-loader'],
    });

    return config;
}

What am I missing? Any help will be much appreciated :)