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

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.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 4
  • Comments: 17 (9 by maintainers)

Most upvoted comments

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

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.

@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 😊