Quokka crashes with error in projects that use Yarn 3 Zero-installs in IntelliJ IDEA

[pahund]

Issue description or question

I'm using Yarn package manager, version 3.3.0, with the zero-installs feature enabled, as recommended in Yarn's setup guide.

In IntelliJ IDEA, when I create a JavaScript scratch file, Quokka immediately crashes with a long error message thrown by IDEA.app.plugins/quokka-intellij/dist/node_modules/esm-wallaby/esm.js

The plug-in is not usable.

Sample repository link

https://github.com/pahund/quokka-problem

Quokka.js Console Output

scratch_9.js (node: v18.11.0)
/Users/patrick.hund/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/223.7571.182/IntelliJ IDEA.app.plugins/quokka-intellij/dist/node_modules/esm-wallaby/esm.js:1
const __global__ = this;(function (require, module, __shared__) { var __shared__;const e=module,t={Array:global.Array,Buffer:global.Buffer,Error:global.Error,EvalError:global.EvalError,Function:global.Function,JSON:global.JSON,Object:global.Object,Promise:global.Promise,RangeError:global.RangeError,ReferenceError:global.ReferenceError,Reflect:global.Reflect,SyntaxError:global.SyntaxError,TypeError:global.TypeError,URIError:global.URIError,eval:global.eval},r=global.console;module.exports=(function(e){var t={};function r(i){if(t[i])return t[i].exports;var n=t[i]={i:i,l:!1,exports:{}};return e[i].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.d=function(e,t,r){Reflect.defineProperty(e,t,{configurable:!0,enumerable:!0,get:r})},r.n=function(e){return e.a=e,function(){return e}},r(r.s=47)})([(function(e,t,r){var i=r(7),n=r(6),s=n.MAX_LENGTH,a=n.MAX_SAFE_INTEGER,o=r(3),u=o.re,l=o.t,c=r(8),p=r(12),h=p.compareIdentifiers;class f{constructor(e,t){if(t=c(t),e instanceof f){if(e.loose===!!t.loose&&e.includePrerelease===!!t.includePrerelease)return e;e=e.version}else if("string"!=typeof e)throw new TypeError("Invalid Version: "+e);if(e.length>s)throw new TypeError(`version is longer than ${s} characters`);i("SemVer",e,t),this.options=t,this.loose=!!t.loose,this.includePrerelease=!!t.includePrerelease;var r=e.trim().match(t.loose?u[l.LOOSE]:u[l.FULL]);if(!r)throw new TypeError("Invalid Version: "+e);if(this.raw=e,this.major=+r[1],this.minor=+r[2],this.patch=+r[3],this.major>a||this.major<0)throw new TypeError("Invalid major version");if(this.minor>a||this.minor<0)throw new TypeError("Invalid minor version");if(this.patch>a||this.patch<0)throw new TypeError("Invalid patch version");this.prerelease=r[4]?r[4].split(".").map((function(e){if(/^[0-9]+$/.test(e)){var t=+e;if(t>=0&&t<a)return t}return e})):[],this.build=r[5]?r[5].split("."):[],this.format()}format(){return this.version=`${this.major}.${this.minor}.${this.patch}`,this.prerelease.length&&(this.version+="-"+this.prerelease.join(".")),this.version}toString(){return this.version}compare(e){if(i("SemVer.compare",this.version,this.options,e),!(e instanceof f)){if("string"==typeof e&&e===this.version)return 0;e=new f(e,this.options)}return e.version===this.version?0:this.compareMain(e)||this.comparePre(e)}compareMain(e){return e instanceof f||(e=new f(e,this.options)),h(this.major,e.major)||h(this.minor,e.minor)||h(this.patch,e.patch)}comparePre(e){if(e instanceof f||(e=new f(e,this.options)),this.prerelease.length&&!e.prerelease.length)return-1;if(!this.prerelease.length&&e.prerelease.length)return 1;if(!this.prerelease.length&&!e.prerelease.length)return 0;var t=0;do{var r=this.prerelease[t],n=e.prerelease[t];if(i("prerelease compare",t,r,n),void 0===r&&void 0===n)return 0;if(void 0===n)return 1;if(void 0===r)return-1;if(r!==n)return h(r,n)}while(++t)}compareBuild(e){e instanceof f||(e=new f(e,this.options));var t=0;do{var r=this.build[t],n=e.build[t];if(i("prerelease compare",t,r,n),void 0===r&&void 0===n)return 0;if(void 0===n)return 1;if(void 0===r)return-1;if(r!==n)return h(r,n)}while(++t)}inc(e,t){switch(e){case"premajor":this.prerelease.length=0,this.patch=0,this.minor=0,this.major++,this.inc("pre",t);break;case"preminor":this.prerelease.length=0,this.patch=0,this.minor++,this.inc("pre",t);break;case"prepatch":this.prerelease.length=0,this.inc("patch",t),this.inc("pre",t);break;case"prerelease":0===this.prerelease.length&&this.inc("patch",t),this.inc("pre",t);break;case"major":0===this.minor&&0===this.patch&&0!==this.prerelease.length||this.major++,this.minor=0,this.patch=0,this.prerelease=[];break;case"minor":0===this.patch&&0!==this.prerelease.length||this.minor++,this.patch=0,this.prerelease=[];break;case"patch":0===this.prerelease.length&&this.patch++,this.prerelease=[];break;case"pre":if(0===this.prerelease.length)this.prerelease=[0];else{for(var r=this.prerelease.length;--r>=0;)"number"==typeof this.prerelease[r]&&(this.prerelease[r]++,r=-2);-1===r&&this.prerelease.push(0)}t&&(this.prerelease[0]===t?isNaN(this.prerelease[1])&&(this.prerelease=[t,0]):this.prerelease=[t,0]);break;default:throw Error("invalid increment argument: "+e)}return this.format(),this.raw=this.version,this}}e.exports=f}),(function(e,t,r){var i=r(0);e.exports=function(e,t,r){return new i(e,r).compare(new i(t,r))}}),(function(e,t,r){class i{constructor(e,t){var r=this;if(t=a(t),e instanceof i)return e.loose===!!t.loose&&e.includePrerelease===!!t.includePrerelease?e:new i(e.raw,t);if(e instanceof o)return this.raw=e.value,this.set=[[e]],this.format(),this;if(this.options=t,this.loose=!!t.loose,this.includePrerelease=!!t.includePrerelease,this.raw=e,this.set=e.split(/\s*\|\|\s*/).map((function(e){return r.parseRange(e.trim())})).filter((function(e){return e.length})),!this.set.length)throw new TypeError("Invalid SemVer Range: "+e);if(this.set.length>1){var n=this.set[0];if(this.set=this.set.filter((function(e){return!v(e[0])})),0===this.set.length)this.set=[n];else if(this.set.length>1)for(var s=0,u=this.set,l=null==u?0:u.length;s<l;s++){var c=u[s];if(1===c.length&&g(c[0])){this.set=[c];break}}}this.format()}format(){return this.range=this.set.map((function(e){return e.join(" ").trim()})).join("||").trim(),this.range}toString(){return this.range}parseRange(e){var t=this;e=e.trim();var r=Object.keys(this.options).join(","),i=`parseRange:${r}:${e}`,n=s.get(i);if(n)return n;var a=this.options.loose,l=a?p[h.HYPHENRANGELOOSE]:p[h.HYPHENRANGE];e=e.replace(l,k(this.options.includePrerelease)),u("hyphen replace",e),e=e.replace(p[h.COMPARATORTRIM],f),u("comparator trim",e,p[h.COMPARATORTRIM]),e=e.replace(p[h.TILDETRIM],d),e=e.replace(p[h.CARETTRIM],m),e=e.split(/\s+/).join(" ");for(var c=a?p[h.COMPARATORLOOSE]:p[h.COMPARATOR],g=e.split(" ").map((function(e){return x(e,t.options)})).join(" ").split(/\s+/).map((function(e){return N(e,t.options)})).filter(this.options.loose?function(e){return!!e.match(c)}:function(){return!0}).map((function(e){return new o(e,t.options)})),y=new Map,b=0,E=null==g?0:g.length;b<E;b++){var w=g[b];if(v(w))return[w];y.set(w.value,w)}y.size>1&&y.has("")&&y.delete("");var R=[...y.values()];return s.set(i,R),R}intersects(e,t){if(!(e instanceof i))throw new TypeError("a Range is required");return this.set.some((function(r){return y(r,t)&&e.set.some((function(e){return y(e,t)&&r.every((function(r){return e.every((function(e){return r.intersects(e,t)}))}))}))}))}test(e){if(!e)return!1;if("string"==typeof e)try{e=new l(e,this.options)}catch(e){return!1}for(var t=0;t<this.set.length;t++)if(_(this.set[t],e,this.options))return!0;return!1}}e.exports=i;var n=r(34),s=new n({max:1e3}),a=r(8),o=r(10),u=r(7),l=r(0),c=r(3),p=c.re,h=c.t,f=c.comparatorTrimReplace,d=c.tildeTrimReplace,m=c.caretTrimReplace,v=function(e){return"<0.0.0-0"===e.value},g=function(e){return""===e.value},y=function(e,t){"use strict";for(var r=!0,i=e.slice(),n=i.pop();r&&i.length;)r=i.every((function(e){return n.intersects(e,t)})),n=i.pop();return r},x=function(e,t){"use strict";return u("comp",e,t),e=R(e,t),u("caret",e),e=E(e,t),u("tildes",e),e=I(e,t),u("xrange",e),e=A(e,t),u("stars",e),e},b=function(e){return!e||"x"===e.toLowerCase()||"*"===e},E=function(e,t){return e.trim().split(/\s+/).map((function(e){"use strict";return w(e,t)})).join(" ")},w=function(e,t){"use strict";var r=t.loose?p[h.TILDELOOSE]:p[h.TILDE];return e.replace(r,(function(t,r,i,n,s){var a;return u("tilde",e,t,r,i,n,s),b(r)?a="":b(i)?a=`>=${r}.0.0 <${+r+1}.0.0-0`:b(n)?a=`>=${r}.${i}.0 <${r}.${+i+1}.0-0`:s?(u("replaceTilde pr",s),a=`>=${r}.${i}.${n}-${s} <${r}.${+i+1}.0-0`):a=`>=${r}.${i}.${n} <${r}.${+i+1}.0-0`,u("tilde return",a),a}))},R=function(e,t){return e.trim().split(/\s+/).map((function(e){"use strict";return S(e,t)})).join(" ")},S=function(e,t){"use strict";u("caret",e,t);var r=t.loose?p[h.CARETLOOSE]:p[h.CARET],i=t.includePrerelease?"-0":"";return e.replace(r,(function(t,r,n,s,a){var o;return u("caret",e,t,r,n,s,a),b(r)?o="":b(n)?o=`>=${r}.0.0${i} <${+r+1}.0.0-0`:b(s)?o="0"===r?`>=$

Code editor version

IntelliJ IDEA 2022.3 (Ultimate Edition) Build #IU-223.7571.182, built on November 29, 2022

Non-Bundled Plugins: quokka.js (1.0.366)

OS name and version

macOS 13.0.1 “Ventura”

[smcenlly]

By default, Quokka uses esm module for JavaScript files, allowing ES imports and top level await to be used with zero configuration.

It looks like there is a compatibiltiy problem between the latest version of yarn .pnp.cjs file and the esm package.

You can create a .quokka file in the root of your project to fix the problem:

.quokka (configuration file)

{
  "stdEsm": false
}

In the meantime, we'll investigate whether we can fix this in Quokka product instead of requiring a configuration file.

[smcenlly]

We've updated Quokka for IntelliJ to automatically set stdEsm to false when using yarn 3 workspaces.

Please update to the latest version, v1.0.369, it should work for you.

[pahund]

✅ Confirmed, it works now! Thanks for the quick help!