How to add Babel support for nullishCoalescingOperator to vue project?

Question

In my Vue-CLI project, when I tried using the ?? operator, I got this error:

Syntax Error: SyntaxError: /Users/stevebennett/odev/freelancing/v-map/src/components/Map.vue: >Support for the experimental syntax 'nullishCoalescingOperator' isn't currently enabled (30:29):

...

Add @babel/plugin-proposal-nullish-coalescing-operator (https://git.io/vb4Se) to the 'plugins' section of your Babel config to enable transformation.

I installed @babel/plugin-syntax-nullish-coalescing-operator (its name seems to have changed), added it to my babel.config.js:

module.exports = {
    presets: ['@vue/app'],
    plugins: ['@babel/plugin-syntax-nullish-coalescing-operator'],
};

Now the error message seems to have gone backwards, no reference to the operator name at all:

Module parse failed: Unexpected token (39:35)
You may need an appropriate loader to handle this file type.
|             case 8:
|               points = _context.sent;
               console.log(sheetID ?? 37);

What am I doing wrong?

Answer 1

For me, the @babel/plugin-syntax-nullish-coalescing-operator plugin would not work, which is the one you are using.

I had to use the @babel/plugin-proposal-nullish-coalescing-operator plugin which is the one that the error message suggests you use.

Additionally, I noticed this on the page for the @babel/plugin-syntax-nullish-coalescing-operator plugin:

I can't say for sure if this will fix your problem, but it certainly fixed mine