How Can I Confiqure the Vue-Loader



  • I am having trouble configuring the vue loader in the quasar.conf.js file. I am getting an error of:

    UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was
    not handled with .catch()

    This is my code:

    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
    build: {
          scopeHoisting: true,
          extendWebpack (cfg) {
            cfg.module.rules.push({
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /node_modules/,
              options: {
                formatter: require('eslint').CLIEngine.getFormatter('stylish')
              }
            })
            cfg.module.rules.push({
              test: /\.vue$/,
              use: [
                {
                  loader: 'vue-loader',
                  options: {
                    transpileOptions: {
                      transforms: {
                        dangerousTaggedTemplateString: true
                      }
                    }
                  }
                }
              ]
            })
            cfg.plugins.push(new VueLoaderPlugin())
          }
        },
    


  • AFAIK, Quasar already has vue-loader in use. No need to add it again to webpack. That being said, I’m not sure how to get to the config of vue-loader to change it. Someone with more webpack/ Quasar experience would need to pitch in here.

    Scott



  • @s-molinari Thanks. That was the key. I was able to fix my issue.



  • extendWebpack (cfg) {
      const vueLoaderRule = cfg.module.rules
        .find(el => el.test.toString() == /\.vue$/.toString())
    
      const ruleFirstLoader = vueLoaderRule.use[0]
      const options = ruleFirstLoader.options
    
      // change options
      options.transpileOptions = {
        transforms: {
          dangerousTaggedTemplateString: true
        }
      }
    }
    

Log in to reply