importing gulpfile.babel.js into another gulpfile.babel.js throws ES6 error

[nebrekab]

I am trying to run a parent folder (global) gulpfile.babel.js within a sub folder gulpfile.babel.js and have run in to an error:

export default function(gulp, config) {
^^^^^^

SyntaxError: Unexpected token 'export'

Code is:

// parent gulpfile.babel.js
export default function(gulp, config) {
  return gulp;
}

// child gulpfile.babel.js
import {config} from './gulp.config.js';
import gulp from 'gulp';
import globalTask from '../gulpfile.babel.js';
globalTask(gulp, config);

// project-specific tasks using gulp and config goes here

export const setup = (done) => {
    console.log(`Activity tasks for ${config.name}`);
    done();
}

export default setup;

// package.json (in parent)
{
  "name": "activity-base",
  "version": "0.0.1",
  "description": "Activity base.",
  "scripts": {
    "start": "gulp",
    "prod": "gulp build --prod"
  },
  "author": "Neb",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "@babel/register": "^7.9.0",
    "babel-loader": "^8.1.0",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-if": "^3.0.0",
    "webpack": "^4.43.0",
    "webpack-stream": "^5.2.1",
    "yargs": "^15.3.1"
  },
  "dependencies": {},
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  }
}

If I change the parent gulpfile.babel.js to ES5 code it runs fine:

// parent gulpfile.babel.js
module.exports = function(gulp, config) {
  // project-independent stuff using gulp and config goes here
  console.log(`Do project-wide tasks for the ${config.name}`);
  return gulp;
};

Any ideas what's going on and how to fix?

Thanks in advance :)