Nuxt：使用“可选链接运算符”运算符 (.?)

Question

Nuxt 2.12.2 throw error on build when trying to use object?.key .

Module parse failed: Unexpected token (311:25)                                                                                                                                                 friendly-errors 10:36:40
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

So it because babel in Nuxt configured to support older browsers like IE9 that I did not need in my project.

In another project, I just put .bablelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

but in Nuxt .bablelrc are disabled. so how can I make optional chaining operator work?

by telling Nuxt to support just modern browsers. or added the @babel/plugin-proposal-optional-chaining

Answer 1

As Nuxtjs Doc describe, .babelrc is ignored by default.

I solved this question by the below config.

// in nuxt.config.js
{
  // ...
  build: {
    // ....
    babel: {
      plugins: [
        '@babel/plugin-proposal-optional-chaining'
      ]
    }
  }
}

Of course, before that, you should install @babel/plugin-proposal-optional-chaining

npm i -D @babel/plugin-proposal-optional-chaining

I hope it helps you.

Answer 2

Try vue-template-babel-compiler

It uses Babel to enable Optional Chaining(?.) , Nullish Coalescing(??) and many new ES syntax for Vue.js SFC .

Github Repo: vue-template-babel-compiler

DEMO

Usage

1. Install

npm install vue-template-babel-compiler --save-dev

2. Config

1. Vue-CLI

DEMO project for Vue-CLI

2. Nuxt.js

DEMO project for Nuxt.js

// nuxt.config.js
export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: {
      vue: {
        compiler: require('vue-template-babel-compiler')
      }
    },
  },
  // ...
}

Please refer to REAMDE for detail usage

Support for Vue-CLI, Nuxt.js, Webpack , any environment use vue-loader v15+ .