Version 2.1.2 Module parse failed: Unexpected token (2:2022)

[sirneb]

We are seeing an "Unexpected token" error with version 2.1.2 (2.1.1 works fine) while compiling its dependencies.

    ERROR in ./node_modules/@simonwep/selection-js/lib/selection.min.js 2:2022                                                                                                                                                                                        
    Module parse failed: Unexpected token (2:2022)                                                                                                                                                                                                                    
    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                                                                                                
    | /*! Selectionjs 2.1.1 MIT | https://github.com/Simonwep/selection ! Selectionjs 2.1.1 MIT | https://github.com/Simonwep/selection */                                                                                                                            
    > !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).SelectionArea=e()}(this,(function(){"use strict";const t=(t,e="px")=>"number"==typeof t?t+e:t;function e({style:e},s,i){if("object"==typeof s)for(const[i,o]of Object.entries(s))e[i]=t(o);else void 0!==i&&(e[s]=t(i))}function s(t){return(e,s,i,o={})=>{e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArr
ay(e)||(e=[e]),Array.isArray(s)||(s=[s]);for(const n of e)for(const e of s)n[t](e,i,{capture:!1,...o});return[e,s,i,o]}}const i=s("addEventListener"),o=s("removeEventListener"),n=t=>{const e=t.touches&&t.touches[0]||t;return{tap:e,x:e.clientX,y:e.clientY,target:
e.target}};function h(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let s=t.target.parentElement;for(e=[t.target,s];s=s.parentElement;)e.push(s);return e.push(document,window),e}function r(t,e,s="touch"){switch(s){case"center":{const s=e.left+e
.width/2,i=e.top+e.height/2;return s>=t.left&&s<=t.right&&i>=t.top&&i<=t.bottom}case"cover":return e.left>=t.left&&e.top>=t.top&&e.right<=t.right&&e.bottom<=t.bottom;case"touch":return t.right>=e.left&&t.left<=e.right&&t.bottom>=e.top&&t.top<=e.bottom;default:throw new Error(`Unkown intersection mode: ${s}`)}}function c(t,e){const s=t.indexOf(e);~s&&t.splice(s,1)}function l(t,e=document){const s=Array.isArray(t)?t:[t],i=[];for(let t=0,o=s.length;t<o;t++){const o=s[t];"string"==typeof o?i.push(...Array.from(e.querySelec
torAll(o))):o instanceof HTMLElement&&i.push(o)}return i}const a=window.matchMedia("(hover: none), (pointer: coarse)").matches;const{abs:d,max:u,min:p,ceil:f}=Math;class SelectionArea extends class{constructor(){this.t=new Map,this.on=this.addEventListener,this.off=this.removeEventListener,this.emit=this.dispatchEvent}addEventListener(t,e){const s=this.t.get(t)||new Set;return this.t.set(t,s),s.add(e),this}removeEventListener(t,e){return this.t.get(t)?.delete(e),this}dispatchEvent(t,...e){let s=!0;for(const i of this.t
.get(t)||[])s=!1!==i(...e)&&s;return s}unbindAllListeners(){this.t.clear()}}{constructor(t){super(),this.i={touched:[],stored:[],selected:[],changed:{added:[],removed:[]}},this.o=[],this.h=new DOMRect,this.l={y1:0,x2:0,y2:0,x1:0},this.u=!0,this.p=!0,this.m={x:0,
y:0},this.v={x:0,y:0},this.disable=this.g.bind(this,!1),this.enable=this.g,this._=Object.assign({class:"selection-area",document:window.document,intersect:"touch",startThreshold:10,singleClick:!0,allowTouch:!0,overlap:"invert",selectables:[],singleTap:{allow:!0,
intersect:"native"},scrolling:{speedDivider:10,manualSpeed:750},startareas:["html"],boundaries:["html"],container:"body"},t);for(const t of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))"function"==typeof this[t]&&(this[t]=this[t].bind(this));const{doc
ument:s}=this._;this.S=s.createElement("div"),this.T=s.createElement("div"),this.T.appendChild(this.S),this.S.classList.add(this._.class),e(this.S,{willChange:"top, left, bottom, right, width, height",top:0,left:0,position:"fixed"}),e(this.T,{overflow:"hidden",p
osition:"fixed",transform:"translate3d(0, 0, 0)",pointerEvents:"none",zIndex:"1"}),this.enable()}g(t=!0){const{document:e,allowTouch:s}=this._,n=t?i:o;n(e,"mousedown",this.A),s&&n(e,"touchstart",this.A,{passive:!1})}A(t,e=!1){const{x:s,y:o,target:c}=n(t),{_:a}=t
his,{document:d}=this._,u=c.getBoundingClientRect(),p=l(a.startareas,a.document),f=l(a.boundaries,a.document);this.L=f.find((t=>r(t.getBoundingClientRect(),u)));const m=h(t);if(!this.L||!p.find((t=>m.includes(t)))||!f.find((t=>m.includes(t))))return;if(!e&&!1===
this.k("beforestart",t))return;this.l={x1:s,y1:o,x2:0,y2:0};const v=d.scrollingElement||d.body;this.v={x:v.scrollLeft,y:v.scrollTop},this.u=!0,this.clearSelection(!1),i(d,["touchmove","mousemove"],this.j,{passive:!1}),i(d,["mouseup","touchcancel","touchend"],thi
s.M),i(d,"scroll",this.O)}R(t){const{intersect:e}=this._.singleTap,s=n(t);let i=null;if("native"===e)i=s.target;else if("touch"===e){this.resolveSelectables();const{x:t,y:e}=s;i=this.o.find((s=>{const{right:i,left:o,top:n,bottom:h}=s.getBoundingClientRect();retu
rn t<i&&t>o&&e<h&&e>n}))}if(!i)return;for(this.resolveSelectables();!this.o.includes(i);){if(!i.parentElement)return;i=i.parentElement}const{stored:o}=this.i;if(this.k("start",t),t.shiftKey&&o.length){const t=o[o.length-1],[e,s]=4&t.compareDocumentPosition(i)?[i
,t]:[t,i],n=[...this.o.filter((t=>4&t.compareDocumentPosition(e)&&2&t.compareDocumentPosition(s))),i,e,s];this.select(n)}else o.includes(i)&&(1===o.length||t.ctrlKey)?this.deselect(i):this.select(i);this.k("stop",t)}j(t){const{startThreshold:s,container:h,docume
nt:r,allowTouch:c}=this._,{x1:u,y1:p}=this.l,{x:f,y:m}=n(t),v=typeof s;("number"===v&&d(f+m-(u+p))>=s||"object"===v&&d(f-u)>=s.x||d(m-p)>=s.y)&&(o(r,["mousemove","touchmove"],this.j,{passive:!1}),i(r,["mousemove","touchmove"],this.$,{passive:!1}),e(this.S,"displ
ay","block"),l(h,r)[0].appendChild(this.T),this.resolveSelectables(),this.u=!1,this.C=this.L.getBoundingClientRect(),this.p=this.L.scrollHeight!==this.L.clientHeight||this.L.scrollWidth!==this.L.clientWidth,this.p&&(i(r,"wheel",this.D,{passive:!1}),this.o=this.o
.filter((t=>this.L.contains(t)))),this.H(),this.k("start",t),this.$(t)),c&&a&&t.preventDefault()}H(){const{T:t,L:s,S:i}=this,o=this.C=s.getBoundingClientRect();this.p?(e(t,{top:o.top,left:o.left,width:o.width,height:o.height}),e(i,{marginTop:-o.top,marginLeft:-o
.left})):(e(t,{top:0,left:0,width:"100%",height:"100%"}),e(i,{marginTop:0,marginLeft:0}))}$(t){const{x:e,y:s}=n(t),{m:i,l:o,_:h}=this,{allowTouch:r}=h,{speedDivider:c}=h.scrolling,l=this.L;if(o.x2=e,o.y2=s,this.p&&(i.y||i.x)){const e=()=>{if(!i.x&&!i.y)return;co
nst{scrollTop:s,scrollLeft:n}=l;i.y&&(l.scrollTop+=f(i.y/c),o.y1-=l.scrollTop-s),i.x&&(l.scrollLeft+=f(i.x/c),o.x1-=l.scrollLeft-n),this.q(),this.F(),this.k("move",t),this.W(),requestAnimationFrame(e)};requestAnimationFrame(e)}else this.q(),this.F(),this.k("move
",t),this.W();r&&a&&t.preventDefault()}O(){const{v:t,_:{document:e}}=this,{scrollTop:s,scrollLeft:i}=e.scrollingElement||e.body;this.l.x1+=t.x-i,this.l.y1+=t.y-s,t.x=i,t.y=s,this.H(),this.q(),this.F(),this.k("move",null),this.W()}D(t){const{manualSpeed:e}=this._
.scrolling,s=t.deltaY?t.deltaY>0?1:-1:0,i=t.deltaX?t.deltaX>0?1:-1:0;this.m.y+=s*e,this.m.x+=i*e,this.$(t),t.preventDefault()}q(){const{m:t,l:e,h:s,L:i,C:o}=this,{scrollTop:n,scrollHeight:h,clientHeight:r,scrollLeft:c,scrollWidth:l,clientWidth:a}=i,f=o;let{x1:m,
y1:v,x2:g,y2:y}=e;g<f.left?(t.x=c?-d(f.left-g):0,g=f.left):g>f.right?(t.x=l-c-a?d(f.left+f.width-g):0,g=f.right):t.x=0,y<f.top?(t.y=n?-d(f.top-y):0,y=f.top):y>f.bottom?(t.y=h-n-r?d(f.top+f.height-y):0,y=f.bottom):t.y=0;const =p(m,g),w=p(v,y),x=u(m,g),b=u(v,y);s.
x=,s.y=w,s.width=x-_,s.height=b-w}W(){const{x:t,y:e,width:s,height:i}=this.h,{style:o}=this.S;o.left=`${t}px`,o.top=`${e}px`,o.width=`${s}px`,o.height=`${i}px`}M(t,s){const{document:i,singleTap:n}=this._,{u:h}=this;o(i,["mousemove","touchmove"],this.j),o(i,["tou
chmove","mousemove"],this.$),o(i,["mouseup","touchcancel","touchend"],this.M),o(i,"scroll",this.O),t&&h&&n.allow?this.R(t):h||s||(this.F(),this.k("stop",t)),this.m.x=0,this.m.y=0,this.p&&o(i,"wheel",this.D,{passive:!0}),this.T.remove(),e(this.S,"display","none")
}F(){const{o:t,_:e,i:s,h:i}=this,{stored:o,selected:n,touched:h}=s,{intersect:c,overlap:l}=e,a=[],d=[],u=[];for(let e=0;e<t.length;e++){const s=t[e];if(r(i,s.getBoundingClientRect(),c)){if(n.includes(s))o.includes(s)&&!h.includes(s)&&h.push(s);else{if("invert"==
=l&&o.includes(s)){u.push(s);continue}d.push(s)}a.push(s)}}"invert"===l&&d.push(...o.filter((t=>!n.includes(t))));for(let t=0;t<n.length;t++){const e=n[t];a.includes(e)||"keep"===l&&o.includes(e)||u.push(e)}s.selected=a,s.changed={added:d,removed:u}}k(t,e){retur
n this.emit(t,{event:e,store:this.i})}trigger(t,e=!0){this.A(t,e)}resolveSelectables(){this.o=l(this._.selectables,this._.document)}keepSelection(){const{_:t,i:e}=this,{selected:s,changed:i,touched:o,stored:n}=e,h=s.filter((t=>!n.includes(t)));switch(t.overlap){
case"drop":e.stored=h.concat(n.filter((t=>!o.includes(t))));break;case"invert":e.stored=h.concat(n.filter((t=>!i.removed.includes(t))));break;case"keep":e.stored=n.concat(s.filter((t=>!n.includes(t))))}}clearSelection(t=!0){this.i={stored:t?[]:this.i.stored,sele
cted:[],touched:[],changed:{added:[],removed:[]}}}getSelection(){return this.i.stored}getSelectionArea(){return this.S}cancel(t=!1){this.M(null,!t)}destroy(){this.cancel(),this.disable(),this.T.remove(),super.unbindAllListeners()}select(t,e=!1){const{changed:s,s
elected:i,stored:o}=this.i,n=l(t,this._.document).filter((t=>!i.includes(t)&&!o.includes(t)));return i.push(...n),s.added.push(...n),!e&&this.k("move",null),n}deselect(t,e=!1){const{selected:s,stored:i,changed:o}=this.i;return!(!s.includes(t)&&!i.includes(t))&&(
o.removed.push(t),c(i,t),c(s,t),!e&&this.k("move",null),!0)}}return SelectionArea.version="2.1.1",SelectionArea}));                                                                                                                                                   
    | //# sourceMappingURL=selection.min.js.map

We get a slightly more detailed error this inside our test suite while SyntaxError: Unexpected token '.' .

I'm just reporting this as we are seeing it, I can dig into this more as we are reverting the version in our build for now.

[simonwep]

Please give me enough details to reproduce this, what framework are you using, what is your ES target, what tools do yo use? Typescript? Javascript? What browser? What OS / Environment? The only thing I know by your question is that you're using selection-js somewhere :D

To me this looks like that whatever you're using cannot process / parse the version I provide (ES6 / ES Modules).
Also: Stick to the issue template, it's there for a reason.

[sirneb]

I created a very simple new node project just running the code in node and can reproduce the error. This is happening on our OSX machines and our jenkins build machines on CentOS. I'm pretty sure this is pretty reproducible.

Let me know if you need more information.

https://github.com/sirneb/test-selection-js

[maxime4000]

I'm getting the something similar when updating to 2.1.2. I had to revert back to 2.1.1.
Babel-loader error: Module parse failed: Unexpected token
Error is pointing this code :

removeEventListener(t,e){
  return this.t.get(t)?.delete(e),this
}

Honestly the error is unclear, but I'm getting something similar while not using at all the same setup/loader. I try to make a Code Sandbox with a closer setup to mine, but the error didn't happen, though, making a sandbox of sirneb setup do trigger the bug : https://codesandbox.io/s/silent-dream-q7tee

[simonwep]

It's probably because of the optional-chaining. Try using babel-plugin-proposal-optional-chaining :)

[nwittwer]

I'm seeing a similar issue using Nuxt.js: #125

[simonwep]

@sirneb Make sure to use type="module" for your script tags or use the non-module variant. Also, this isn't a server-side library...

[sirneb]

@simonwep my point wasn't to show that we can run this in node but that with a somewhat latest version of node, the javascript output has an syntax error.

It sounds like the compiled javascript has optional chaining. I think this is the first time ES2020 specifications is used in selection.js. It is basically a breaking change, maybe not in most modern browsers but definitely some organization's development/build toolings (node version < 14).

[simonwep]

@sirneb Oh sorry, yeah this is intended :) I'll add a note about that in v3. It's always possible to transpile it down using the tool and target of your choice, from my side I'll provide a modern version which fits all needs 😊

[maxime4000]

It's probably because of the optional-chaining. Try using babel-plugin-proposal-optional-chaining :)

The funny part is that I don't have babel in my module, I use React-script and Typescript 4.3.2. And I do use Optional chaining directly in my typescript code and it's working so I'm not sure why I get error from babel, but that might be because react-script do some magic in the build process. Anyway, I will look into that later.

[jjeff]

I'm seeing a similar error while compiling using Webpack in Electron. We have many optional chains elsewhere in our app and they work just fine.

[simonwep]

Could one of you please create a demo repository so that I can take a look into it? It's kinda weird that that many are having problems with it :( I'm not sure of how the setup of ya'll looks like. Maybe it's even a corrupt bundle but it's working perfectly on the demo page (in the browser as ES Module)...

[simonwep]

The beta for v3 is available - you may try it with this version or I'd take into consideration providing an unofficial legacy es5 bundle.

[harrisonlo]

I'm getting the something similar when updating to 2.1.2. I had to revert back to 2.1.1.
Babel-loader error: Module parse failed: Unexpected token
Error is pointing this code :

removeEventListener(t,e){
  return this.t.get(t)?.delete(e),this
}

I'm getting this error using the latest create-react-app (react-scripts: 4.0.3), which should support optional chaining out of the box, and @viselect/react: 3.0.0-beta.5. For some reason I can't reproduce it on codesandbox, but I did initialize a new cra project to install only viselect and the same error appears.

So I guess the steps to repro is:

1. npx create-react-app my-app --template typescript
2. yarn add @viselect/react
3. Import and use the lib in App.tsx

@simonwep Could this be a bug from cra or some issue with the compiled esm/cjs file?

[simonwep]

Okay - this seems to be a problem with CRA, there are quite the amount of issues because of this:

• upgrading to react-script 3.4.3 breaks optional chaining facebook/create-react-app#9749
• upgrading to react-script 3.3.1 breaks optional chaining facebook/create-react-app#8445

The current workaround is this. Or just just a modern build tool such as vite 😄

[harrisonlo]

That issue was solved with facebook/create-react-app#8526 and you just pasted the same issues twice 😛. The other issue is stale presumably because the current version is already 4.0.3. Do you mind compiling an optional es5 bundle? I'm sure there are lots of current cra users out there who would encounter this error.

[simonwep]

Whoops - edited ^^ Yeah, guess that's the only way to use it with cra... I'll do that and ship an update later today.

[simonwep]

On second thought - I won't do this, at least not now, please bear with me. I came up with the following reasons, partially from my own experience with third-party libraries:

Loss of performance and a bigger bundle-size

You can always transpile code down, but not the other way around (or that's very difficult to do). And since a lower ES Versions leads to a bigger bundle (+60% in my case) and much slower code (more statements) you can only lose by transpiling things down.

Loss of control over how you bundle will look like

By providing the (almost most) version of this library I give those who target ESNext browsers (like I do or generally users with modern bundlers) the chance to do the same with this library.

Everybody else can explicitly specify what version they prefer by specifying the target in the bundler of their choice (as with CRA it's the package.json browserslist value). This way we all can achieve maximum efficiency when it comes to the bundle, and since I doubt that many will still have to target ES5 it wouldn't be a loss for those who target versions like ES6 or ES2017.

If there are still issues with CRA I would encourage everyone to open an issue in the corresponding repository, it's time that builders catch up with today's standards :)

But users still have the choice when you provide an ES5 version?!

Yes but that's not necessarily a good thing. I've seen many just go for the ES5 version for the "greater browser support", and while that's true it's, especially for those who are new to this, less good since you don't know what you're actually shipping to the client. When working on a piece of software you normally know what kind of browsers / environments you're targeting. And many actually don't really care / are aware of the trade-offs these "legacy" files have.

As noted above, by this I hope to encourage everyone to take a little bit more care of what they ship to the end-user (although by not doing something you normally don't help anyone but in this case, or for now, I'm going to do it - sorry for that). For example check out estimator.dev to see how much you could save (just on size) if you target a more modern browser. See also this web.dev post.

A fix for the react package is published for v3.0.0-beta.7. I'm going to close this one as I would say that this is on purpose and you'll have to configure the tool you're using.