Error: Plugin/Preset files are not allowed to export objects, only functions in vueify-build

Question

I have an application made with cordova and vue2-google-maps.

I have an application made with cordova and vue2-google-maps, retrieved from here: https://github.com/davidverriere/cordova-vuejs2-googlemaps

I currently have a file at scripts/vueify-build.js which contains the following:

var fs = require("fs");
var browserify = require("browserify");
var vueify = require("vueify");
var aliasify = require("aliasify");
var babelify = require("babelify");
aliasifyConfig = {
  aliases: {
    vue: "vue/dist/vue.js",
  },
  verbose: false,
};

browserify("www/js/main.js", { debug: true })
  .transform(aliasify, aliasifyConfig)
  .transform(vueify)
  .transform(babelify.configure({ presets: ["es2015", "react", "stage-0"] }))
  .bundle()
  .pipe(fs.createWriteStream("www/js/bundle.js"));

The error is generated when I do:

cordova build browser

Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\test\cordova-vuejs2-googlemaps\node_modules\babel-preset-es2015\lib\index.js while parsing file: C:\test\cordova-vuejs2-googlemaps\www\js\main.js

I really don't know what could be happening, basically what I'm trying to do is import a file to my component like this: happens on import: DirectionsRenderer

<template>
  <div>
    <button @click="agregarRutas">Agregar Rutas</button>
    <button @click="trazarRuta">Trazar las rutas</button>
    <gmap-auto-complete ref="gautocomplete" @place_changed="setPlace" />
    <gmap-map ref="gmap" :center="center" :zoom="16" style="height: 600px">
      <gmap-marker
        ref="gmarker"
        v-for="(m, index) in markers"
        :key="index"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center = m.position"
      ></gmap-marker>
      <!--  <DirectionsRenderer travelMode="DRIVING" :origin="origin" :destination="destionation" /> -->
    </gmap-map>
  </div>
</template>
<script>
import { load, Map, Marker, Autocomplete } from "vue2-google-maps";
import DirectionsRenderer from "./DirectionsRenderer";
load("", "", ["places"]);

export default {
  components: {
    gmapMap: Map,
    gmapMarker: Marker,
    gmapAutoComplete: Autocomplete,
    /*  DirectionsRenderer: DirectionsRenderer, */
  },
  data() {
    return {
      center: { lat: 14.5338661, lng: -91.5041804 },
      markers: [
        {
          position: { lat: 14.534162, lng: -91.505157 },
        },
        {
          position: { lat: 14.531586, lng: -91.503226 },
        },
      ],
      currentPlace: null,
      places: [],
    };
  },
  created() {
    console.log("Created SET");
  },
  methods: {
    setPlace(place) {
      console.log(place);
      this.currentPlace = place;
    },
    agregarRutas() {
      if (this.currentPlace) {
        const marker = {
          lat: this.currentPlace.geometry.location.lat(),
          lng: this.currentPlace.geometry.location.lng(),
        };
        this.markers.push({ position: marker });
        this.places.push(this.currentPlace);
        this.center = marker;
        this.currentPlace = null;
      }
    },
    eliminarRutas() {
      console.log("eliminarRutas");
    },
    trazarRuta() {
      console.log("trazarRuta");
    },
  },
};
</script>

DirectionsRenderer.js

import { MapElementFactory } from "vue2-google-maps";

export default MapElementFactory({
  name: "directionsRenderer",
  ctr() {
    return window.google.maps.DirectionsRenderer;
  },

  events: [],

  mappedProps: {},

  props: {
    origin: { type: [Object, Array] },
    destination: { type: [Object, Array] },
    waypoints: { type: Array },
    travelMode: { type: String },
    optimizeWaypoints: { type: Boolean },
  },

  afterCreate(directionsRenderer) {
    let directionsService = new window.google.maps.DirectionsService();

    this.$watch(
      () => [this.origin, this.destination, this.travelMode, this.waypoints, this.optimizeWaypoints],
      () => {
        let { origin, destination, travelMode, waypoints, optimizeWaypoints } = this;
        if (!origin || !destination || !travelMode || !waypoints) return;
        directionsService.route(
          {
            origin,
            destination,
            travelMode,
            waypoints,
            optimizeWaypoints,
          },
          (response, status) => {
            if (status !== "OK") return;
            directionsRenderer.setDirections(response);
          }
        );
      }
    );
  },
});

my package.json

{
  "name": "cordova-vue-map",
  "version": "1.0.0",
  "description": "A mobile app for displaying map from cordova",
  "main": "index.js",
  "dependencies": {
    "aliasify": "2.1.0",
    "babel-runtime": "6.20.0",
    "css-loader": "0.26.1",
    "marker-clusterer-plus": "2.1.4",
    "vue": "^2.6.14",
    "vue-hot-reload-api": "2.0.6",
    "vue-resource": "~1.0.3",
    "vue-template-compiler": "^2.6.14",
    "vue2-google-maps": "^0.4.7",
    "vueify": "~9.4.0"
  },
  "author": "David Verrière",
  "license": "Apache version 2.0",
  "devDependencies": {
    "@babel/preset-env": "^7.18.2",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0",
    "cordova-android": "^10.1.2",
    "cordova-browser": "^6.0.0",
    "cordova-plugin-whitelist": "^1.3.5"
  },
  "cordova": {
    "platforms": [
      "android",
      "browser"
    ],
    "plugins": {
      "cordova-plugin-whitelist": {}
    }
  }
}