Tsparticles: Importing svelte-particles breaks sapper

Created on 27 Jul 2020  路  4Comments  路  Source: matteobruni/tsparticles

Describe the bug
A clear and concise description of what the bug is.

Importing svelte particles crashes the sapper server without any clear feedback on what is wrong

To Reproduce
Steps to reproduce the behavior:
Install a new sapper starter template, install svelte-particles and import it into the index route. Server breaks with the follow feedback

__sapper__/dev/server/server.js:293
************************ */(null==e&&i.path)}},i.exports),i.exports}"function"==typeof HTMLElement&&(C=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});}connectedCallback(){for(const t in this.$$.slotted)this.appendChild(this.$$.slotted[t]);}attributeChangedCallback(t,e,i){this[t]=i;}$destroy(){!function(t,e){const i=t.$$;null!==i.fragment&&(o(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[]);}(this,1),this.$destroy=t;}$on(t,e){const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(e),()=>{const t=i.indexOf(e);-1!==t&&i.splice(t,1);}}$set(){}});var S=function(t,e){return (S=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e;}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);})(t,e)};var z=function(){return (z=Object.assign||function(t){for(var e,i=1,o=arguments.length;i=t.length&&(t=void 0),{value:t&&t[o++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function R(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var o,n,s=i.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(o=s.next()).done;)a.push(o.value);}catch(t){n={error:t};}finally{try{o&&!o.done&&(i=s.return)&&i.call(s);}finally{if(n)throw n.error}}return a}function D(t){return this instanceof D?(this.v=t,this):new D(t)}var E=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e});}:function(t,e){t.default=e;};var I=Object.freeze({__proto__:null,__extends:function(t,e){function i(){this.constructor=t;}S(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i);},get __assign(){return z},__rest:function(t,e){var i={};for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&e.indexOf(o)<0&&(i[o]=t[o]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(t);nadecorate:function(t,e,i,o){var n,s=arguments.length,a=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(a=(s<3?n(a):s>3?n(e,i,a):n(e,i))||a);return s>3&&a&&Object.defineProperty(e,i,a),a},__param:function(t,e){return function(i,o){e(i,o,t);}},__metadata:function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},__awaiter:function(t,e,i,o){return new(i||(i=Promise))((function(n,s){function a(t){try{l(o.next(t));}catch(t){s(t);}}function r(t){try{l(o.throw(t));}catch(t){s(t);}}function l(t){var e;t.done?n(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e);}))).then(a,r);}l((o=o.apply(t,e||[])).next());}))},__generator:function(t,e){var i,o,n,s,a={label:0,sent:function(){if(1&n[0])throw n[1];return n[1]},trys:[],ops:[]};return s={next:r(0),throw:r(1),return:r(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function r(s){return function(r){return function(s){if(i)throw new TypeError("Generator is already executing.");for(;a;)try{if(i=1,o&&(n=2&s[0]?o.return:s[0]?o.throw||((n=o.return)&&n.call(o),0):o.next)&&!(n=n.call(o,s[1])).done)return n;switch(o=0,n&&(s=[2&s[0],n.value]),s[0]){case 0:case 1:n=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,o=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(n=a.trys,(n=n.length>0&&n[n.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!n||s[1]>n[0]&&s[1]value:s[0]?s[1]:void 0,done:!0}}([s,r])}}},__createBinding:A,__exportStar:function(t,e){for(var i in t)"default"===i||e.hasOwnProperty(i)||A(e,t,i);},_md5-196837ebad213e6f57f9987796d14b6avalues:T,_md5-196837ebad213e6f57f9987796d14b6aread:R,_md5-196837ebad213e6f57f9987796d14b6aspread:function(){for(var t=[],e=0;eeadArrays:function(){for(var t=0,e=0,i=arguments.length;et).value instanceof D?Promise.resolve(i.value.v).then(l,c):d(s[0][2],i);}catch(t){d(s[0][3],t);}var i;}function l(t){r("next",t);}function c(t){r("throw",t);}function d(t,e){t(e),s.shift(),s.length&&r(s[0][0],s[0][1]);}},__asyncDelegator:function(t){var e,i;return e={},o("next"),o("throw",(function(t){throw t})),o("return"),e[Symbol.iterator]=function(){return this},e;function o(o,n){e[o]=t[o]?function(e){return (i=!i)?{value:D(to),done:"return"===o}:n?n(e):e}:n;}},__asyncValues:function(t){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var e,i=t[Symbol.asyncIterator];return i?i.call(t):(t=T(t),e={},o("next"),o("throw"),o("return"),e[Symbol.asyncIterator]=function(){return this},e);function o(i){e[i]=t[i]&&function(e){return new Promise((function(o,n){(function(t,e,i,o){Promise.resolve(o).then((function(e){t({value:e,done:i});}),e);})(o,n,(e=ti).done,e.value);}))};}},__makeTemplateObject:function(t,e){return Object.defineProperty?Object.defineProperty(t,"raw",{value:e}):t.raw=e,t},__importStar:function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var i in t)Object.hasOwnProperty.call(t,i)&&A(e,t,i);return E(e,t),e},__importDefault:function(t){return t&&t.__esModule?t:{default:t}},__classPrivateFieldGet:function(t,e){if(!e.has(t))throw new TypeError("attempted to get private field on non-instance");return e.get(t)},__classPrivateFieldSet:function(t,e,i){if(!e.has(t))throw new TypeError("attempted to set private field on non-instance");return e.set(t,i),i}}),U=O((function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),e.initPjs=void 0;e.initPjs=t=>{const e=(e,i)=>t.load(e,i);e.load=(e,i,o)=>{t.loadJSON(e,i).then(t=>{t&&o(t);});},e.setOnClickHandler=e=>{t.setOnClickHandler(e);};return {particlesJS:e,pJSDom:t.dom()}};})),j=O((function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),e.SquareDrawer=void 0;e.SquareDrawer=class{draw(t,e,i){t.rect(-i,-i,2i,2*i);}};})),L=O((function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),e.MoveDirection=void 0,function(t){t.bottom="bottom",t.bottomLeft="bottom-left",t.bottomRight="bottom-right",t.left="left",t.none="none",t.right="right",t.top="top",t.topLeft="top-left",t.topRight="top-right";}(e.MoveDirection||(e.MoveDirection={}));})),H=O((function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),e.RotateDirection=void 0,function(t){t.clockwise="clockwise",t.counterClockwise="counter-clockwise",t.random="random";}(e.RotateDirection||(e.RotateDirection={}));})),V=O((function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),I.__exportStar(L,e),I.__exportStar(H,e);})),B=O((function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),e.ClickMode=void 0,function(t){t.attract="attract",t.bubble="bubble",t.push="push",t.remove="remove",t.repulse="repulse",t.pause="pause",t.tra> Server crashed

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

bug

All 4 comments

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.96. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

Thanks for the report, I have solved the issue, it was the component configuration.

A new version will be released this evening (CEST timezone) to fix this issue and some others on the core library.

Awesome, thanks for the quick turnaround!

I've released the update.

I've updated the README, now it has a section for SSR, you can see it here:

https://github.com/matteobruni/tsparticles/tree/master/components/svelte

Was this page helpful?
0 / 5 - 0 ratings

Related issues

matteobruni picture matteobruni  路  5Comments

ecrookoh picture ecrookoh  路  3Comments

paul300497 picture paul300497  路  5Comments

Mayron picture Mayron  路  3Comments

natario1 picture natario1  路  4Comments