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();
CodePudding user response:
babel.config.js
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
'@babel/plugin-proposal-optional-chaining'
]
};