Vue.js Parsing error: 'from' expectedエラー

Question

前提

Ruby on Rails とVue.jsでカレンダーを作っています。
2つのコンポーネント間でデータを共有を実装中に以下のエラーメッセージが発生しました。

実現したいこと

• Vuexを使ってコンポーネント間でデータを共有する
• CalenderのデータをCalendarDetailsで共有

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

Module parse failed: Unexpected token (3:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| 
| import {}
> import { mapGetters, mapActions } from 'vuex';
| import CalendarDetails from './CalendarDetails.vue';
| 


ERROR


/Users/xxxxxxxxxxx/Desktop/Calendar/frontend/src/components/Calendar.vue
  16:0  error  Parsing error: 'from' expected```

### 該当のソースコード

<template>
  ---
</template>
<script>
import {}
import { mapGetters, mapActions } from 'vuex';
import CalendarDetails from './CalendarDetails.vue';

export default { mapGetters, mapActions } from 'vuex';
  name: 'Calendar',
  components: {
    CalendarDetails,
  },
  computed: {
    ...mapGetters('events', ['events']),
  },
  methods: {
    ...mapActions('events', ['fetchEvents']),
  },
};
</script>

import axios from 'axios';

const apiUrl = 'http://localhost:3000';

const state = {
  event: [],
};

const getters = {
  events: (state) => state.events,
};

const mutations = {
  setEvents: (state, events) => (state.events = events),
};

const actions = {
  async fetchEvents({ commit }) {
    const response = await axios.get(`${apiUrl}/events`);
    commit('setEvents', response.data);
  },
};

export default {
  namespace: true,
  state,
  getters,
  mutations,
  actions,
};

import { createStore } from 'vuex';
import events from './modules/events';

export default createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    events,
  },
});

module.exports = {
  plugins: ['@typescript-eslint'],
  parser: 'vue-eslint-parser',
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/base',
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended',
    'plugin:vue/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
  ],
  parserOptions: {
    ecmaVersion: 7,
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    ecmaFeatures: {
      jsx: true,
      modules: true
    },
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 0,
    'no-undef': 'off',
    'no-unused-vars': 'off',
    strict: 'off',
    'vue/no-unused-components': 'off',
  },
};

試したこと

tslintを使わずにtypescript系のlintエラー対応する方法の記事を参考にし依存パッケージをインストールしました。

{
  "root": true,
  "extends": ["plugin:vue/recommended"],
  "parserOptions": {
    "parser": "@typescript-eslint/parser"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "no-undef": "off",
    "no-unused-vars": "off",
    "strict": "off"
  }
}

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue

エラーは解決せず、ほのかの記事も同じような記述方だったので解決方法がわかりません。

Answer 1

エラー発生行の直上にある「import {}」は不要ではないでしょうか

import {} // <-- 
import { mapGetters, mapActions } from 'vuex';