Vue単一ファイルコンポーネントbuild時にError: Parsing file 'import' and 'export' may only appear at the top levelが出る

前提・実現したいこと

困っていること
Vueの単一コンポーネントファイルをbuildしようとするとParsing fileエラーが出ます。
Error:Parsing file /Users/username/VSProject/travelplan/components/message.vue: 'import' and 'export' may only appear at the top level (7:0)

Babelがexportをうまく処理できていないように思うのですが、解決方法がわかりません。

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

エラーメッセージ

$ ./node_modules/.bin/gulp build
[11:33:57] Using gulpfile ~/VSProject/travelplan/gulpfile.js
[11:33:57] Starting 'build'...
[11:33:57] Finished 'build' after 10 ms
events.js:287
      throw er; // Unhandled 'error' event
      ^

Error: Parsing file /Users/username/VSProject/travelplan/components/message.vue: 'import' and 'export' may only appear at the top level (7:0)
    at Deps.parseDeps (/Users/username/VSProject/travelplan/node_modules/module-deps/index.js:510:15)
    at getDeps (/Users/username/VSProject/travelplan/node_modules/module-deps/index.js:438:44)
    at /Users/username/VSProject/travelplan/node_modules/module-deps/index.js:421:38
    at ConcatStream.<anonymous> (/Users/username/VSProject/travelplan/node_modules/concat-stream/index.js:37:43)
    at ConcatStream.emit (events.js:322:22)
    at ConcatStream.EventEmitter.emit (domain.js:505:15)
    at finishMaybe (/Users/username/VSProject/travelplan/node_modules/readable-stream/lib/_stream_writable.js:630:14)
    at endWritable (/Users/username/VSProject/travelplan/node_modules/readable-stream/lib/_stream_writable.js:638:3)
    at ConcatStream.Writable.end (/Users/username/VSProject/travelplan/node_modules/readable-stream/lib/_stream_writable.js:594:41)
    at DuplexWrapper.onend (/Users/username/VSProject/travelplan/node_modules/readable-stream/lib/_stream_readable.js:577:10)

該当のソースコード

message.vue

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello!",
    };
  },
};
</script>

main.js

var Vue = require("vue");
new Vue({
  el: "#app",
  components: {
    MyMessage: require("./components/message.vue"),
  },
});

main.html

<html>
  <head>
    <title>test</title>
  </head>

  <body>
    <div id="app">
      <my-message></my-message>
    </div>
  </body>
</html>

package.json

{
  "name": "travelplan",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "gulp build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "***",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "babelify": "^10.0.0",
    "browserify": "^16.5.1",
    "gulp": "^4.0.2",
    "vinyl-source-stream": "^2.0.0",
    "vueify": "^9.4.1"
  },
  "browser": {
    "vue": "vue/dist/vue.common.js"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "@babel/preset-env"
          ]
        }
      ],
      "vueify"
    ]
  }
}

試したこと

https://stackoverflow.com/questions/37902849/import-and-export-may-only-appear-at-the-top-level/45626246

こちらの質問が近いかと思ったのですが、Webpackでなくbrowserifyを用いている時の解決策がわかりませんでした。。
（babel-loaderの設定で治るとあったのでbabel-loader@8をインストールしてみましたがbabel-loaderにはwebpackが要ると言われてしまいました）