react-spring: [bug]: importing from mjs module is broken

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.7.1

What’s Wrong?

Importing @react-spring/web from index.mjs fails

To Reproduce

    ~/nodejs/react-spring-esm-repro  on   master ?4  cat index.mjs
import spring from "@react-spring/web";
    ~/nodejs/react-spring-esm-repro  on   master ?4  cat package.json
{
  "name": "react-spring-esm-repro",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@react-spring/web": "^9.7.1"
  }
}
    ~/nodejs/react-spring-esm-repro  on   master ?4  node index.mjs
(node:27454) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/perrin4869/nodejs/react-spring-esm-repro/node_modules/@react-spring/web/dist/esm/index.js:1
import{Globals as M}from"@react-spring/core";import{unstable_batchedUpdates as N}from"react-dom";import{createStringInterpolator as U,colors as D}from"@react-spring/shared";import{createHost as H}from"@react-spring/animated";var k=/^--/;function I(t,e){return e==null||typeof e=="boolean"||e===""?"":typeof e=="number"&&e!==0&&!k.test(t)&&!(c.hasOwnProperty(t)&&c[t])?e+"px":(""+e).trim()}var v={};function V(t,e){if(!t.nodeType||!t.setAttribute)return!1;let r=t.nodeName==="filter"||t.parentNode&&t.parentNode.nodeName==="filter",{style:i,children:s,scrollTop:u,scrollLeft:l,viewBox:a,...n}=e,d=Object.values(n),m=Object.keys(n).map(o=>r||t.hasAttribute(o)?o:v[o]||(v[o]=o.replace(/([A-Z])/g,p=>"-"+p.toLowerCase())));s!==void 0&&(t.textContent=s);for(let o in i)if(i.hasOwnProperty(o)){let p=I(o,i[o]);k.test(o)?t.style.setProperty(o,p):t.style[o]=p}m.forEach((o,p)=>{t.setAttribute(o,d[p])}),u!==void 0&&(t.scrollTop=u),l!==void 0&&(t.scrollLeft=l),a!==void 0&&t.setAttribute("viewBox",a)}var c={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},F=(t,e)=>t+e.charAt(0).toUpperCase()+e.substring(1),L=["Webkit","Ms","Moz","O"];c=Object.keys(c).reduce((t,e)=>(L.forEach(r=>t[F(r,e)]=t[e]),t),c);import{AnimatedObject as S}from"@react-spring/animated";import{is as b,each as f,toArray as E,eachProp as P,FluidValue as T,getFluidValue as w,callFluidObservers as j,hasFluidValue as A,addFluidObserver as R,removeFluidObserver as W}from"@react-spring/shared";var _=/^(matrix|translate|scale|rotate|skew)/,$=/^(translate)/,G=/^(rotate|skew)/,y=(t,e)=>b.num(t)&&t!==0?t+e:t,h=(t,e)=>b.arr(t)?t.every(r=>h(r,e)):b.num(t)?t===e:parseFloat(t)===e,g=class extends S{constructor({x:e,y:r,z:i,...s}){let u=[],l=[];(e||r||i)&&(u.push([e||0,r||0,i||0]),l.push(a=>[`translate3d(${a.map(n=>y(n,"px")).join(",")})`,h(a,0)])),P(s,(a,n)=>{if(n==="transform")u.push([a||""]),l.push(d=>[d,d===""]);else if(_.test(n)){if(delete s[n],b.und(a))return;let d=$.test(n)?"px":G.test(n)?"deg":"";u.push(E(a)),l.push(n==="rotate3d"?([m,o,p,O])=>[`rotate3d(${m},${o},${p},${y(O,d)})`,h(O,0)]:m=>[`${n}(${m.map(o=>y(o,d)).join(",")})`,h(m,n.startsWith("scale")?1:0)])}}),u.length&&(s.transform=new x(u,l)),super(s)}},x=class extends T{constructor(r,i){super();this.inputs=r;this.transforms=i}_value=null;get(){return this._value||(this._value=this._get())}_get(){let r="",i=!0;return f(this.inputs,(s,u)=>{let l=w(s[0]),[a,n]=this.transforms[u](b.arr(l)?l:s.map(w));r+=" "+a,i=i&&n}),i?"none":r}observerAdded(r){r==1&&f(this.inputs,i=>f(i,s=>A(s)&&R(s,this)))}observerRemoved(r){r==0&&f(this.inputs,i=>f(i,s=>A(s)&&W(s,this)))}eventObserved(r){r.type=="change"&&(this._value=null),j(this,r)}};var C=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"];export*from"@react-spring/core";M.assign({batchedUpdates:N,createStringInterpolator:U,colors:D});var q=H(C,{applyAnimatedValues:V,createAnimatedStyle:t=>new g(t),getComponentProps:({scrollTop:t,scrollLeft:e,...r})=>r}),it=q.animated;export{it as a,it as animated};
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1195:20)
    at Module._compile (node:internal/modules/cjs/loader:1239:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Module._load (node:internal/modules/cjs/loader:972:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

Node.js v19.7.0

Expected Behaviour

It should not throw an exception. The solution is to either replace dist/esm/index.js with dist/esm/index.mjs or to add package.json with type: module to dist/esm, or similar approaches

Link to repo

https://github.com/perrin4869/react-spring-esm-repro