Module parse failed: Unexpected token (11:42)

[Eblancho]

Hello,

I'm not sure if this is the right place to ask the question so don't hesitate.

I've been using your lib for a while without any problems in a view application but recently I updated your lib and I can't build anymore because of this:

ERROR  Failed to compile with 1 error                                                                                                             11:00:40

 error  in ./node_modules/rxjs-interop/dist/esm/to-observer.js

Module parse failed: Unexpected token (11:42)
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 {
>             complete: (observer.complete ?? noop).bind(observer),
|             error: (observer.error ?? rethrow).bind(observer),
|             next: (observer.next ?? noop).bind(observer),

 @ ./node_modules/rxjs-interop/dist/esm/index.js 3:0-30 3:0-30
 @ ./node_modules/subscribable-things/build/es2019/module.js
 @ ./node_modules/recorder-audio-worklet/build/es2019/module.js
 @ ./node_modules/extendable-media-recorder/build/es2019/factories/web-audio-media-recorder.js
 @ ./node_modules/extendable-media-recorder/build/es2019/module.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Voicemail/components/Recorder.vue?vue&type=script&lang=js&
 @ ./src/views/Voicemail/components/Recorder.vue?vue&type=script&lang=js&
 @ ./src/views/Voicemail/components/Recorder.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Voicemail/components/GreetingsList.vue?vue&type=script&lang=js&
 @ ./src/views/Voicemail/components/GreetingsList.vue?vue&type=script&lang=js&
 @ ./src/views/Voicemail/components/GreetingsList.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Voicemail/Voicemail.vue?vue&type=script&lang=js&
 @ ./src/views/Voicemail/Voicemail.vue?vue&type=script&lang=js&
 @ ./src/views/Voicemail/Voicemail.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.

I deduce that my project does not support the "??" null coalescing operator.

So I tried to configure babel but without success.
Do you think it's a problem related to your lib or only to my code configuration?

P.S : Already try plugins: "@babel/plugin-proposal-nullish-coalescing-operator" and/or "@babel/plugin-syntax-nullish-coalescing-operator"

[chrisguttandin]

Hi @Eblancho,

I recently updated rxjs-interop which is a dependency of a dependency. It looks like the code which uses the ?? operator was introduced here: cartant/rxjs-interop@0e8cee0#diff-f39eca13cd594ec3ee2066dcd7c03c1e82c9f4d27608c3a538a7a2bbde4651ee.

Can you try configuring babel to transpile the files from within the node_modules folder (or the node_modules/rxjs-interopfolder), too? As far as I know it will skip 3rd party code by default.

[Eblancho]

Hi @chrisguttandin,

Thanks for your help, that's exactly the problem.

Indeed it does not transpile the thirds party and I had to add this in my vue.config.js :

  "transpileDependencies": [
    "rxjs-interop"
  ],

It works perfectly again.

Thanks again for your help and for your work on this project.

[chrisguttandin]

🥳 I'm happy to hear that it works again.

Thanks for reporting your solution. I didn't know about the transpileDependencies configuration option yet.

[dnsking]

Hey am still getting this error in React

./node_modules/rxjs-interop/dist/esm/to-observer.js 14:36
Module parse failed: Unexpected token (14:36)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|     return {
>       complete: (observer.complete ?? noop).bind(observer),
|       error: (observer.error ?? rethrow).bind(observer),
|       next: (observer.next ?? noop).bind(observer)

[chrisguttandin]

@dnsking Since your error message looks like it's coming from babel-loader I would assume Babel itself is not configured to transpile the nullish coalescing operator.