ReferenceError: [BABEL]

前提・実現したいこと

初めまして。React勉強中です。簡単なアプリを作りたいのですが
gulp、webpack、babelを使ったReactの環境構築に躓いています。

エラーを見るとpresetsの中の書き方が悪いみたいですが。。
こちらのエラーの対処法を教えていただきたいです！！

発生している問題・エラーメッセージ

発生しているエラー↓

エラーメッセージ

ReferenceError: [BABEL] C:\Users\miii0\OneDrive\ドキュメント\React-todo\gulpfile.babel.js: Unknown option: base.Fragment. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

該当のソースコード

ソースコード

package.json

{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "type": "commonjs",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gulp": "^4.0.2",
    "jquery": "^3.2.1",
    "postcss": "^8.3.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "css-loader": "^6.2.0",
    "cssnano": "^5.0.7",
    "fibers": "^5.0.0",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-loader": "7.1.1",
    "babel-preset-env": "^1.7.0",
    "browser-sync": "^2.26.13",
    "gulp-notify": "^4.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-webpack": "^1.5.0",
    "gulp-postcss": "^9.0.0",
    "gulp-replace": "^1.1.3",
    "gulp-sass": "^5.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-uglify": "^3.0.2",
    "sass": "^1.38.0",
    "style-loader": "^3.2.1",
    "webpack": "^3.9.1",
    "webpack-stream": "^4.0.0"
  },
  "babel": {
    "presets": [
      "env"
    ]
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: path.join(__dirname, 'src/js/app.js'),
  output: {
    path: path.join(__dirname, 'dist/js'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /.+(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'env'],
        },
      },
    ],
  },
  resolve: {
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.jsx'],
  },
};

.babelrc

{
  "presets": ["env"]
}

gulpfile.babel.js

import { src, dest, watch, series } from 'gulp';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
import concat from 'gulp-concat';
import postcss from 'gulp-postcss';
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import fibers from 'fibers';
import sourcemaps from 'gulp-sourcemaps';
import uglify from 'gulp-uglify';
import webpackConfig from './webpack.config.js';
import webpack from 'webpack-stream';
import browserSync from 'browser-sync';
import notify from 'gulp-notify';
import plumber from 'gulp-plumber';

const sass = gulpSass(dartSass);

const files = {
  scssPath: 'src/scss/**/*.scss', // any file with .scss
  jsPath: 'src/js/**/*.js', // any file with .js
  jsDestPath: 'dist/js/',
  scssDestpath: 'dist/scss/',
};

function scssTask() {
  return src(files.scssPath)
    .pipe(sourcemaps.init())
    .pipe(sass({ fiber: fibers }))
    .pipe(
      plumber({
        errorHandler: notify.onError({
          title: 'Error...',
          message: '<%= error.message %>',
        }),
      })
    )
    .pipe(sass({ outputStyle: 'compressed', errLogToConsole: false }))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(sourcemaps.write('.'))
    .pipe(dest(files.scssDestpath));
}

function jsTask() {
  return src(files.jsPath)
    .pipe(
      plumber({
        errorHandler: notify.onError({
          title: 'Error...',
          message: '<%= error.message %>',
        }),
      })
    )
    .pipe(concat('bundle.js'))
    .pipe(uglify())
    .pipe(webpack(webpackConfig))
    .pipe(dest(files.jsDestPath))
    .pipe(browserSync.stream());
}

function watchTask() {
  browserSync.init({
    server: {
      baseDir: './',
      index: 'index.html',
    },
  });

  watch('./*.html').on('change', browserSync.reload);
  watch('./dist/*/*.+(js|css)').on('change', browserSync.reload);
  watch('./dist/*/*/*.+(js|css)').on('change', browserSync.reload);

  watch(files.jsPath, jsTask);
  watch(files.scssPath, scssTask);
}

exports.default = series(jsTask, watchTask, scssTask);