eslint: Getting `error Parsing error: Unexpected token .` when using optional chaining

@dschreij Though the team couldn’t provide any clarifying explanation, I’m still pretty sure it’s caused by the upgrade to Node 14. Here is the solution to solve the problem on my project:

1. Add the following dependencies to your package.json:

	"devDependencies: {
		...
		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
		"@babel/plugin-proposal-optional-chaining": "^7.10.1",
		"babel-eslint": "^10.1.0",
		"eslint-plugin-babel": "^5.3.0",
	},

Modify your .babelrc file to look like this:

{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
  },
  "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

1. Modify your eslintrc.js:

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  env: {
    browser: true,
    node: true,
  },
  extends: [
    '@nuxtjs',
  ],
  plugins: ['babel'],
  rules: {},
}

actually node supports optional chaining since version 14.0

 $ node --version
v14.2.0
 $ echo "let foo = {a: {c: 3}, b: {}}; console.log('a: ' + foo?.a?.c + ', c: ' + foo?.b?.c)" | node -
a: 3, c: undefined

The compatibility chart at https://node.green/#ES2020-features-optional-chaining-operator----- is broken and out of date.

my .eslintrc:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
  ],
  plugins: ['babel', 'prettier'],
  // add your custom rules here
  rules: {
    'nuxt/no-cjs-in-config': 'off',
  },
}

example of file: state/resource.js

import ResourcesService from '@/services/ResourcesService'
import dayjs from 'dayjs'
import 'dayjs/locale/ro'
import { decode } from 'he'
import _ from 'lodash'

export const state = () => ({
  resources: [],
  resource: {},
})

export const mutations = {
  SET_RESOURCES(state, resources) {
    state.resources = resources
  },
  APPEND_PAGE_TO_RESOURCES(state, resources) {
    state.resources = state.resources.concat(resources)
  },
  SET_RESOURCE(state, resource) {
    state.resource.content = resource.content.rendered

    resource.video_meta
      ? (state.resource.resourceType = 'video')
      : (state.resource.resourceType = 'article')

    state.resource.author = resource._embedded.author[0].name

    state.resource.titleRaw = decode(resource.title.rendered)

    state.resource.title = _.split(state.resource.titleRaw, '|', 2)[0]

    state.resource.typeClass = 'resource-card--' + state.resourceType

    state.resource.date = dayjs(resource.date_gmt).format('D MMMM YYYY')

    state.resource.videoID = resource.video_meta?._ayvpp_video

    state.resource.slug = resource.slug
  },
}

export const actions = {
  async fetchResources({ commit }) {
    const response = await ResourcesService.getResources()
    commit('SET_RESOURCES', response.data)
  },
  async fetchNextResourcesPage({ commit }, payload) {
    const response = await ResourcesService.getResources(payload.pageNr, 12)
    commit('APPEND_PAGE_TO_RESOURCES', response.data)
  },
  async fetchResource({ commit }, slug) {
    const response = await ResourcesService.getResource(slug)
    commit('SET_RESOURCE', response.data[0])
  },
}