How to fix Unexpected token error while compiling vuejs project?

Question

Following these steps:

1. Install fresh vuejs 2. Don't change package.json.
2. Install vue-notion package. This is a renderer for the Notion based on vuejs.
3. Inject the NotionRenderer object into any page like in an official example: import { NotionRenderer } from 'vue-notion'
4. Run npm run serve or yarn serve (I've tried both)

... I get the following error while compiling:

error  in ./node_modules/vue-notion/dist/esm.js

Module parse failed: Unexpected token (1793:175)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|       // return empty notion decorated text if row is empty
>       return (this === null || this === void 0 ? void 0 : (_this$properties = this.properties) === null || _this$properties === void 0 ? void 0 : _this$properties[columnId]) ?? [[" ", false]];
|     },
| 

 @ ./src/main.js 9:0-44
 @ multi (webpack)-dev-server/client?http://192.168.0.107:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

The problem is the nullish coalescing operator (??) at the end of the string. I've tried to add @babel/plugin-proposal-nullish-coalescing-operator into babel.config, but it still doesn't work:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    '@babel/plugin-proposal-nullish-coalescing-operator',
  ],
}

How can I fix it? What kind of a loader should I use to compile the code?

Answer 1

Thank @Jonathan. I've solved this problem by adding a transpile directive into vue.config.js:

module.exports = {
    transpileDependencies: ["vue-notion"]
}