using gulp with webpack-stream and babel loader to convert jsx

Question

I'm building a website in Wordpress and I am trying to use gulp, webpack-stream, and babel-loader to convert JSX to JS (I was successful at using gulp to sass my CSS, so I removed that code).

Whenever I run the gulp command in terminal to convert the JSX, I get this incorrect output in the generated Javascript file:

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);n(1);console.log("ugh")},function(e,t){console.log("test running")}]);

I can't figure out if I'm getting this error because I'm missing vital packages or if something else is wrong with my gulp commands.

Here is my package.json's dependencies

{
  "devDependencies": {
    "@babel/core": "^7.11.4",
    "@babel/preset-env": "^7.11.0",
    "@babel/register": "^7.10.5",
    "@wordpress/browserslist-config": "^2.7.0",
    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.1.0",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0",
    "browserslist": "^4.14.0",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-terser": "^1.4.0",
    "webpack-stream": "^6.1.0"
  },
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ]
}

Here is my gulpfile.babel.js file:

// load gulp
  import gulp from 'gulp';

// utility
  import sourcemaps from 'gulp-sourcemaps';

// css-related
  import sass from 'gulp-sass';
  import postcss from 'gulp-postcss';
  import autoprefixer from 'autoprefixer';

// js-related
  import webpack from 'webpack-stream';


// project
  const paths = {
    scripts: {
      src: 'src/scripts/bundle.js',
      dest: './build/js/'
    }
  }


// enable javasript
export const scripts = (done) => {
  return gulp.src( paths.scripts.src )
    .pipe( webpack({
      // module: {
      //   rules: [
      //     {
      //       test: /\.js$/,
      //       use: {
      //         loader: 'babel-loader',
      //         options: {
      //           presets: ['@babel/preset-env']
      //         }
      //       }
      //     }
      //   ]
      // },
      output: {
        filename: 'bundle.js'
      }
    }) )
    .pipe( gulp.dest( paths.scripts.dest ) );
    done();
}

I commented out the webpack module items because I was eliminating the possible reasons for why it wasn't working. When I commented out webpack, the code "worked" in that it copied the file over to the build folder.

Here is the bundle.js file that contains JSX

console.log('ugh');

import './components/test';

let x = 0;

and here is what test.js contains

console.log("test running");

I also received the following message inside terminal:

(node:13196) [DEP0097] DeprecationWarning: Using a domain property in MakeCallback is deprecated. Use the async_context variant of MakeCallback or the AsyncResource class instead.
[22:53:54] Version: webpack 4.44.2
Built at: 10/20/2020 10:53:54 PM
    Asset        Size  Chunks             Chunk Names
bundle.js  1020 bytes       0  [emitted]  main
Entrypoint main = bundle.js

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
[22:53:54] Finished 'scripts' after 1.69 s

I'm totally new to using node, npm, and gulp, and have been following tutorials as best I can to try to get this to work, but every tutorial is either old, or I end up with garbage code in the destination file. I'm also the lone developer and designer, and I desperately need some feedback/assistance. I would be forever grateful to whoever can help me get this to work properly, and am happy to provide any additional information in order to figure this out.