I'm using Materio Template Vuetify and Babel.

I initially serve the template using yarn serve. After the package was pleted 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();

I'm using Materio Template Vuetify and Babel.

I initially serve the template using yarn serve. After the package was pleted 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();

• javascript
• node.js
• vue.js
• webpack
• babeljs

• Hey Muhammad Can u tell what's your OS device ? – ArtixModernal Commented Jun 24, 2022 at 9:36
• I'm using windows 10 pro – Muhamad Iqbal Commented Jun 24, 2022 at 9:37

2 Answers 2

babel.config.js

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

The loader you are using may not support Optional Chaining so remove Optional chaining from the code as shown below and try. Or config your project with latest Loader.

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();
}