@arcgis/core: symbolUtils cannot be imported into a Vite app

[stdavis]

Describe the bug When I attempt to import the symbolUtils module, I get the following error message in the browser:

SyntaxError
/node_modules/@arcgis/core/symbols/support/symbolUtils.js: Unexpected token (5:1846)

  3 | See https://js.arcgis.com/4.24/esri/copyright.txt for details.
  4 | */
> 5 | import"../../core/has.js";import{isSome as e,isNone as t,unwrap as l}from"../../core/maybe.js";import{loadArcade as r}from"../../support/arcadeOnDemand.js";import{getStroke as i}from"./gfxUtils.js";import{SymbolSizeDefaults as s}from"./previewUtils.js";import{renderSymbol as o}from"./renderUtils.js";import{getCSSFilterFromEffectList as a,applyColorToSymbol as n,applySizesToSymbol as c,applyRotationToSymbol as u,getColorFromSymbol as f,applyOpacityToColor as h}from"./utils.js";let y=null;const p=[255,255,255];function d(e,t){return Math.floor(Math.random()*(t-e+1)+e)}function m(e,t,l){const{backgroundColor:r,outline:i,dotSize:o}=e,a=l&&l.swatchSize||s.size,n=.8,c=Math.round(a*a/o**2*n),u=window.devicePixelRatio,f=document.createElement("canvas"),h=a*u;f.width=h,f.height=h,f.style.width=f.width/u+"px",f.style.height=f.height/u+"px";const p=f.getContext("2d");if(r&&(p.fillStyle=r.toCss(!0),p.fillRect(0,0,h,h),p.fill()),p.fillStyle=t.toCss(!0),y&&y.length/2===c)for(let s=0;s<2*c;s+=2){const e=y[s],t=y[s+1];p.fillRect(e,t,o*u,o*u),p.fill()}else{y=[];for(let e=0;e<2*c;e+=2){const e=d(0,h),t=d(0,h);y.push(e,t),p.fillRect(e,t,o*u,o*u),p.fill()}}i&&(i.color&&(p.strokeStyle=i.color.toCss(!0)),p.lineWidth=i.width,p.strokeRect(0,0,h,h));const m=new Image(a,a);return m.src=f.toDataURL(),m}function b(e,t={}){const l=t.radius||40,r=2*Math.PI*l,s=e.length,a=r/s,n=[],c=i(t.outline);c&&(c.width*=2),(c||t.backgroundColor)&&n.push({shape:{type:"circle",cx:l,cy:l,r:l},fill:t.backgroundColor,stroke:c,offset:[0,0]});const u=t.values,f=u&&u.length===s&&100===u.reduce(((e,t)=>e+t),0),h=[0];for(let i=0;i<s;i++){const t=f?u[i]*r/100:null;f&&h.push(t+h[i]),n.push({shape:{type:"circle",cx:l,cy:l,r:l/2},fill:[0,0,0,0],stroke:{width:l,dashArray:`${t||a} ${r}`,dashoffset:"-"+(f?h[i]/2:i*(a/2)),color:e[i]},offset:[0,0]})}let y=null;const d=2*l+(c?.width||0),m=t.holePercentage;if(m){c&&n.push({shape:{type:"circle",cx:l,cy:l,r:l*m},fill:null,stroke:c,offset:[0,0]});const e=d/2;y=[[{shape:{type:"circle",cx:e,cy:e,r:e},fill:p,stroke:c?{...c,color:p}:null,offset:[0,0]},{shape:{type:"circle",cx:e,cy:e,r:l*m},fill:[0,0,0],stroke:null,offset:[0,0]}]]}return o([n],[d,d],{effectView:t.effectList,ignoreStrokeWidth:!0,masking:y,rotation:-90})}function g(e,t={}){const l=24,r=75,i="horizontal"===t.align,s=i?r:l,o=i?l:r,{width:a=s,height:n=o,gradient:c=!0}=t,u=window.devicePixelRatio,f=a*u,h=n*u,y=document.createElement("canvas");y.width=f,y.height=h,y.style.width=`${a}px`,y.style.height=`${n}px`;const p=y.getContext("2d"),d=i?f:0,m=i?0:h;if(c){const t=p.createLinearGradient(0,0,d,m),l=e.length,r=1===l?0:1/(l-1);e.forEach(((e,l)=>t.addColorStop(l*r,e.toString()))),p.fillStyle=t,p.fillRect(0,0,f,h)}else{const t=i?f/e.length:f,l=i?h:h/e.length;let r=0,s=0;for(const o of e)p.fillStyle=o.toString(),p.fillRect(r,s,t,l),r=i?r+t:0,s=i?0:s+l}const b=document.createElement("div");return b.style.width=`${a}px`,b.style.height=`${n}px`,w(b,t?.effectList),b.appendChild(y),b}function w(e,t){if(!t)return;e.style.filter=a(t);const l=t.effects;if(l)for(const r of l)if("drop-shadow"===r?.type){r.offsetX<0?e.style.marginLeft=`${Math.abs(r.offsetX)}px`:e.style.marginRight=`${r.offsetX}px`;break}}async function S(e,t){switch(e.type){case"web-style":{const{previewWebStyleSymbol:l}=await import("./previewWebStyleSymbol.js");return l(e,S,t)}case"label-3d":case"line-3d":case"mesh-3d":case"point-3d":case"polygon-3d":{const{previewSymbol3D:l}=await import("./previewSymbol3D.js");return l(e,t)}case"simple-marker":case"simple-line":case"simple-fill":case"picture-marker":case"picture-fill":case"text":{const{previewSymbol2D:l}=await import("./previewSymbol2D.js");return l(e,t)}case"cim":{const{previewCIMSymbol:l}=await import("./previewCIMSymbol.js");return l(e,t)}default:return}}function v(e){return e&&"opacity"in e?e.opacity*v(e.parent):1}async function x(i,s){if(!i)return;const o=i.sourceLayer,a=(e(s)&&s.useSourceLayer?o:i.layer)??o,f=v(a);if(e(i.symbol)&&(!e(s)||!0!==s.ignoreGraphicSymbol)){const t="web-style"===i.symbol.type?await i.symbol.fetchSymbol({...s,cache:e(s)?s.webStyleCache:null}):i.symbol.clone();return n(t,null,f),t}const h=e(s)&&s.renderer||a&&"renderer"in a&&a.renderer;let y=h&&"getSymbolAsync"in h?await h.getSymbolAsync(i,s):null;if(!y)return;if(y="web-style"===y.type?await y.fetchSymbol({...s,cache:e(s)?s.webStyleCache:null}):y.clone(),!("visualVariables"in h)||!h.visualVariables||!h.visualVariables.length)return n(y,null,f),y;if("arcadeRequiredForVisualVariables"in h&&h.arcadeRequiredForVisualVariables&&(t(s)||t(s.arcade))){const e={...l(s)};e.arcade=await r(),s=e}const p=await import("../../renderers/visualVariables/support/visualVariableUtils.js"),d=[],m=[],b=[],g=[];for(const e of h.visualVariables)switch(e.type){case"color":d.push(e);break;case"opacity":m.push(e);break;case"rotation":g.push(e);break;case"size":e.target||b.push(e)}const w=!!d.length&&d[d.length-1],S=w?p.getColor(w,i,s):null,x=!!m.length&&m[m.length-1];let V=x?p.getOpacity(x,i,s):null;if(null!=f&&(V=null!=V?V*f:f),n(y,S,V),b.length){const e=p.getAllSizes(b,i,s);await c(y,e)}for(const e of g)u(y,p.getRotationAngle(e,i,s),e.axis);return y}async function V(i,s){if(!i)return;const o=v(i.layer||i.sourceLayer);if(e(i.symbol)&&(!e(s)||!0!==s.ignoreGraphicSymbol)){const e="web-style"===i.symbol.type?await i.symbol.fetchSymbol(s):i.symbol.clone();return f(e,o)}const a=e(s)&&s.renderer||i.get("layer.renderer")||i.get("sourceLayer.renderer");let n=await a.getSymbolAsync(i,s);if(!n)return;n="web-style"===n.type?await n.fetchSymbol(s):n.clone();const c=f(n,o);if(!("visualVariables"in a)||"visualVariables"in a&&!a.visualVariables||"visualVariables"in a&&!a.visualVariables?.length)return c;if(a.arcadeRequiredForVisualVariables&&(t(s)||t(s.arcade))){const e={...l(s)};e.arcade=await r(),s=e}const u=await import("../../renderers/visualVariables/support/visualVariableUtils.js"),y=[],p=[];for(const e of a.visualVariables)switch(e.type){case"color":y.push(e);break;case"opacity":p.push(e)}const d=y.length>0?y[y.length-1]:null,m=d?u.getColor(d,i,s):c,b=p.length>0?p[p.length-1]:null;let g=b?u.getOpacity(b,i,s):null;return null!=o&&(g=null!=g?g*o:o),m?h(m,g):null}export{V as getDisplayedColor,x as getDisplayedSymbol,g as renderColorRampPreviewHTML,m as renderDotDensityPreviewHTML,b as renderPieChartPreviewHTML,S as renderPreviewHTML};
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      ^
  6 | 

Framework and build tools

• Vite@latest
• React@latest

To Reproduce https://codesandbox.io/s/symbol-utils-import-error-hlx3u7?file=/src/App.jsx

Set the @arcgis/core package version to 4.23.7 to see the problem go away. This seems to only affect 4.24.x.

Expected behavior I expected to be able to successfully import and use the module without error messages.

Screenshots

Browser (check https://whatismybrowser.com/)

• Browser: Chrome 103 on macOS (Monterey)

What's your OS? (check https://whatsmyos.com):

• OS: Your OS is Mac OS X (macOS)
• Device: MacBook Pro (2019)

API version (check your console)

• Version: 4.24.4 (I've also tried next)

Additional context None that I can think of. Thanks for the great library! I'm hoping that my old friend @odoe may be able to help me out.

[andygup]

Hey @stdavis are you only seeing that error in codesandbox? I believe it's a codesandbox issue. I'm not able to repro your error with 4.24.4 or 4.24.5 on a local build with Vite or React.

[odoe]

This has to do with the codesandbox environment. The default uses parcel, even though you have a vite project. I'm guessing imported from a repo maybe? Or used the default and added vite.

Parcel doesn't work with our API yet, they have a branch that does, but it's not released yet.

Here's a vite sandbox with 4.24.4 that's working as expected. https://codesandbox.io/s/arcgis-vite-testing-qpz1xv?file=/src/main.tsx It uses Solid instead of React, but has a node environment for the sandbox.

[stdavis]

Ah. OK. I was getting a different error locally. I ran into this issue when trying to build a repro. I'll try to get a code sandbox with the same error that I'm getting locally...

[andygup]

Scott, if you are able to repro locally, pls let us know.