Trouble with Unexpected token in esm.js

[andymitrich]

Hello, guys! I try to use the vue-notion on a fresh installation of Vuejs 3.

So, my first step is vue create <project>. I choose vuejs3, babel, router, vuex, SCSS (based on dart-sass). Then, I install vue-notion:

% yarn add vue-notion

yarn add v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > sass-loader@8.0.2" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
warning "vue-notion > vue-fragment@1.5.2" has incorrect peer dependency "vue@^2.5.16".
warning " > vue-notion@1.4.3" has unmet peer dependency "prismjs@^1.22.0".
warning " > vue-notion@1.4.3" has incorrect peer dependency "vue@^2.6.14".
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 9 new dependencies.
info Direct dependencies
└─ vue-notion@1.4.3
info All dependencies
├─ cross-fetch@3.1.5
├─ defu@5.0.1
├─ node-fetch@2.6.7
├─ tr46@0.0.3
├─ vue-fragment@1.5.2
├─ vue-notion@1.4.3
├─ vue-prism-component@1.2.0
├─ webidl-conversions@3.0.1
└─ whatwg-url@5.0.0
✨  Done in 5.35s.

All is fine. My package.json looks fresh and clear:

{
  "name": "vue-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-notion": "^1.4.3",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.14",
    "@vue/cli-plugin-router": "~4.5.14",
    "@vue/cli-plugin-vuex": "~4.5.14",
    "@vue/cli-service": "~4.5.14",
    "@vue/compiler-sfc": "^3.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
  }
}

It looks like I'm ready to use NotionRenderer. So, I'm getting your the Basic Example and adding the following line into Home.vue file: import { NotionRenderer } from 'vue-notion' and what the heck - my build is broken:

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]];
|     },
| 

 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/App.vue?vue&type=script&lang=js 1:0-44
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.107:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

It looks like the problem is the nullish coalescing operator (??) on the 1793 line (when I commented the line - the build was successful). But why? How can I fix it? What loader should I use?

[andymitrich]

Well, I've tried to compile vue-notion from sources and it works. So, I suppose that I haven't any necessary package in my fresh vuejs installation.

I've added @babel/plugin-proposal-nullish-coalescing-operator into babel.config, but still doesn't work:

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

[andymitrich]

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

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