Vuetify(Materio模板)构建提示需额外loader处理加载结果报错

使用基于Vuetify的Materio模板开发项目，技术栈搭配Babel，执行yarn serve启动模板服务后构建失败，控制台抛出多条需要额外loader处理加载器结果的报错，报错位置指向代码中的可选链操作符?.。

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';"))
    })
  },
}

babel.config.js #

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

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

当前Babel配置未开启*可选链（?.）*语法的转译支持，webpack无法识别该ES2020语法，最终抛出模块解析失败错误。如果项目依赖的第三方包（如示例中的uppy相关依赖）源码中也使用了该语法，且未被加入转译列表，也会触发同类报错。

• 安装Babel对应语法转译依赖，执行以下命令：

yarn add -D @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator

• 修改babel.config.js配置，添加插件声明，修改后完整配置如下：

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

• 检查vue.config.js中的transpileDependencies字段，如果报错来自第三方依赖（如示例中的@uppy包），将对应包名加入转译列表，示例修改：

transpileDependencies: ['vuetify', '@uppy'],

• 清除构建缓存后重启服务，可直接执行带缓存清理参数的启动命令：

yarn serve --reset-cache

如果上述命令无效，手动删除项目下node_modules/.cache目录后再重新执行yarn serve即可。

内容的提问来源于stack exchange，提问作者Muhamad Iqbal