8

I'm trying to use @babel/plugin-proposal-optional-chaining so I can do like {{ user?.name || 'Oops' }} in my vue templates. I have added the plugin to my babel.config.js, but it still comes up with a vue-loader error. After some searching it seems like vue uses buble instead of babel for transpiling the js inside the template tag.

Is there a way to use babel instead of buble for transpiling the js in the template?

Roy J
  • 42,522
  • 10
  • 78
  • 102
danielsvane
  • 613
  • 3
  • 8
  • 18
  • It doesn't look like there's an option to configure `vue-template-compiler`, but since the Babel plugin works in the ` – tony19 Feb 01 '19 at 23:46
  • Yeah this is my fallback solution, too bad though. – danielsvane Feb 01 '19 at 23:54

1 Answers1

0

If you are using webpack, try this on build/webpack..conf.js (replace where the test matches and adjust to your preferences)

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            js: 'babel-loader'
          }
        }
      },
      {
        test: /\.js$/,
        use: [{
          loader: "babel-loader",
          options: { presets: ['es2015'], compact: false }  // Add here your options!
        }]
      },
      ...
    ]
    ...
  }
  ...
}

Maybe you have to install and configure babel with a file .babelrc to add the proposal and babel-loader

If not webpack, please, add more info about your project structure and the way to compile/transpile it (or migrate to webpack, is a good friend to transpile).

Also if you need more help let me know.

Hope it helps at least a bit :)

Juanmabs22
  • 1,194
  • 9
  • 10
  • I used the Vue CLI to init the app, so the webpack config is auto generated. I tried your config (and added exclusion of node_modules), which results in "failed to mount template", but at least the dev server starts. Using Vues inspect tool, I can see the webpack config, which is huge, and I have no idea whats going on. If you want to look: https://pastebin.com/Jm2nTYKZ Its not THAT crucial for me to get that babel plugin to work, so maybe I should just give up. – danielsvane Feb 01 '19 at 23:18
  • 2
    And FYI, the plugins works fine when using it in .js or the – danielsvane Feb 01 '19 at 23:29