I'm using Materio Template Vuetify and Babel.

I initially serve the template using yarn serve. After the package was completed building, I got several errors indicating that I have to use an additional loader.

Here is the vue.config.js :

const path = require('path')
const { mergeSassVariables } = require('@vuetify/cli-plugin-utils')

module.exports = {
  publicPath: '/',
  transpileDependencies: ['vuetify'],
  configureWebpack: {
    resolve: {
      alias: {
        '@themeConfig': path.resolve(__dirname, 'themeConfig.js'),
        '@core': path.resolve(__dirname, 'src/@core'),
        '@axios': path.resolve(__dirname, 'src/plugins/axios.js'),
        '@user-variables': path.resolve(__dirname, 'src/styles/variables.scss'),
      },
    },
  },
  chainWebpack: config => {
    const modules = ['vue-modules', 'vue', 'normal-modules', 'normal']
    modules.forEach(match => {
      config.module
        .rule('sass')
        .oneOf(match)
        .use('sass-loader')
        .tap(opt => mergeSassVariables(opt, "'@/styles/variables.scss'"))
      config.module
        .rule('scss')
        .oneOf(match)
        .use('sass-loader')
        .tap(opt => mergeSassVariables(opt, "'@/styles/variables.scss';"))
    })
  },
}

And here is the babel.config.js :

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

As you can see below, I got this error

Module parse failed: Unexpected token (806:65)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     // add message template
|     async saveMessageTemplate() {
>       this.formAddTemplate.attachments = this.$refs['uppy-data']?.uppy?.getFiles();
|       this.on_reply_message.attachments = this.$refs['uppy-data-onreply']?.uppy?.getFiles();
|       this.formAddTemplate.id = uuidv4();