vue-cli のプロジェクトに外部ライブラリのクラス定数が含まれるクラスをインポートする方法について

Question

前提・実現したいこと

vue-cli で作ったプロジェクトに外部ライブラリのクラス定数が含まれるクラスをインポートして使いたいです。

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

次のようにインポートすると

import { Foo } from "my_tools/components/foo.js"

次のエラーになります。

ERROR  Failed to compile with 1 error                                                                                                                                                                                                10:59:48

 error  in ./node_modules/my_tools/components/foo.js

Module parse failed: Unexpected token (2:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export class Foo {
>   static VAR1 = 1
| }
|

 @ ./src/main.js 9:0-60
 @ multi (webpack)-dev-server/client?http://10.0.1.2:3100&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

再現する手順

セットアップ

$ vue create my_project1
# Default ([Vue 2] babel, eslint) を選択

$ cd my_project1

ここで外部のライブラリ my_tools を node_modules 以下に追加します。
my_tools は Nuxt のプロジェクトでそのライブラリの一部を利用したいという考えです。

$ yarn add ~/src/my_tools

node_modules/my_tools/components/foo.js に利用したいクラス Foo が入っています。

中身は次のようになっています。

export class Foo {
  static VAR1 = 1
}

Nuxt 側ではこの Foo クラスは正常にパースできています。

次に src/main.js で foo.js をインポートします。

import Vue from 'vue'
import App from './App.vue'

// 以下を追加
/* eslint-disable */
import { Foo } from "my_tools/components/foo.js"
/* eslint-enable */

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

ビルドします。

$ vue-cli-service serve

ここで static VAR1 = 1 の部分がパースできないという、上のエラーメッセージがでます。

試したこと

@babel/plugin-proposal-class-properties
https://runebook.dev/ja/docs/babel/babel-plugin-proposal-class-properties/index

を参照し .babelrc や babel.config.js にいろいろ追加したのですが、デフォルトで同じような機能が含まれているようで、無駄なことをやっているようにも思える一方で、問題のエラーは解決しないという状況です。

補足情報

環境

$ node -v
v12.13.0

$ vue -V
@vue/cli 4.5.13

$ yarn -v
1.22.11

babel.config.js の内容

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

package.json の内容

{
  "name": "my_project1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "my_tools": "/Users/xxx/src/my_tools",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}