webpack + babel. Why is the es6 module paths error coming out?

Question

JavaScript

Hello, I have a misunderstanding while building modules.
I have the following project structure:

Code from root app.js file:

import card from './modules/card';
import validate from './modules/validate';

window.addEventListener('DOMContentLoaded', function () {
    const input = document.querySelectorAll('input[type=text]'),
          titleInput = document.querySelector('.form__titleInput'),
          linkInput = document.querySelector('.form__linkInput'),
          priceInput = document.querySelector('.form__priceInput'),
          descriptionGood = document.querySelector('.form__description'),
          formBtn = document.querySelector('.form__add'),
          warn = document.querySelectorAll('.form__warning'),
          innerWrapperCards = document.querySelector('.inner__wrapper'),
          form = document.querySelector('.form');

    validate(formBtn, titleInput, linkInput, priceInput);
    card(input, warn, titleInput, linkInput, priceInput, formBtn, innerWrapperCards, form, descriptionGood);
});

Dependencies from package.json:

{
  "name": "idaproject-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "git": "^0.1.5"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.8",
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "babel-loader": "^8.2.2",
    "browser-sync": "^2.26.14",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-cache": "^1.1.3",
    "gulp-clean-css": "^4.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.7.2",
    "webpack-stream": "^6.1.2"
  }
}

Setting up the gulpfile.js task scheduler with webpack:

const gulp = require('gulp');
const browserSync = require('browser-sync');
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');
const rename = require("gulp-rename");
const imagemin = require('gulp-imagemin');
const htmlmin = require('gulp-htmlmin');
const cache = require('gulp-cache');
const webpackStream = require('webpack-stream');
const path = require('path');

gulp.task('server', function () {

    browserSync({
        server: {
            baseDir: "src"
        }
    });

    gulp.watch("src/*.html").on('change', browserSync.reload);
});

gulp.task('styles', function () {
    return gulp.src("src/sass/**/*.+(scss|sass)")
        .pipe(sass({
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(rename({
            suffix: '.min',
            prefix: ''
        }))
        .pipe(autoprefixer())
        .pipe(cleanCSS({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

gulp.task('watch', function () {
    gulp.watch("src/sass/**/*.+(scss|sass|css)", gulp.parallel('styles'));
    gulp.watch("src/*.html").on('change', gulp.parallel('html'));
});

gulp.task('html', function () {
    return gulp.src("src/*.html")
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('dist/'));
});

gulp.task("scripts", () => {
    return gulp.src("./src/js/app.js")
        .pipe(webpackStream({
            mode: 'development',
            entry: './src/js/app.js',
            output: {
                filename: 'script.js',
                path: path.resolve(__dirname, 'dist')
            },
            watch: true,
            devtool: "source-map",
            module: {
                rules: [{
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                ['@babel/preset-env', {
                                    debug: true,
                                    corejs: 3,
                                    useBuiltIns: "usage"
                                }]
                            ]
                        }
                    }
                }]
            }
        }))
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.stream());
});

gulp.task('images', function () {
    return gulp.src('src/img/**/*.+(png|jpg|jpeg|gif|svg)')
        .pipe(cache(imagemin({
            interlaced: true
        })))
        .pipe(gulp.dest('dist/img'));
});

gulp.task('icons', function () {
    return gulp.src('src/icons/**/*.+(png|jpg|jpeg|gif|svg)')
        .pipe(cache(imagemin({
            interlaced: true
        })))
        .pipe(gulp.dest('dist/icons'));
});

gulp.task('default', gulp.parallel('watch', 'server', 'styles', 'scripts', 'images', 'icons', 'html'));

After running gulp, I see the following errors in the console:

Tell me, what should I do?
I scoured the internet and all I found was that babel needs to be installed as the code won't transpile.
I do not understand how babel is related to the error that is in the picture above.

Thanks in advance for your reply!