错误“您可能需要一个额外的加载程序来处理这些加载程序的结果。

Question

我用的是材料模板Vuetify和Babel。

我最初使用纱线服务来服务模板。在包完成构建后，我得到了几个错误，表明我必须使用额外的加载程序。

下面是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();

Answer 1

babel.config.js

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

Answer 2

您使用的加载程序可能不支持可选链接，因此从代码中删除可选链接，如下所示，然后尝试。或者用最新的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();
}