search

gregberge / svgr

Transform SVGs into React components 🦁
https://react-svgr.com
MIT License
10.59k stars 422 forks source link

SVGR CLI breaks with Prettier 3.0.0 #893

Open johanbook opened 1 year ago

johanbook commented 1 year ago

🐛 Bug Report

When running svgr with Prettier 3.0.0 I get this error message

> svgr --no-svgo --ext jsx  --jsx-runtime automatic -d src/components src/svgs

Failed to handle file:  src/svgs/example.svg
/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/plugins/flow.js:4
`),x.js_error)throw x.js_error}}else throw x}function tZ(){var x=l0.process;x&&x.on?x.on("uncaughtException",function(r,e){DK(r),x.exit(2)}):l0.addEventListener&&l0.addEventListener("error",function(r){r.error&&DK(r.error)})}tZ();function l(x,r){return(x.l>=0?x.l:x.l=x.length)==1?x(r):Ds(x,[r])}function p(x,r,e){return(x.l>=0?x.l:x.l=x.length)==2?x(r,e):Ds(x,[r,e])}function G0(x,r,e,t){return(x.l>=0?x.l:x.l=x.length)==3?x(r,e,t):Ds(x,[r,e,t])}function oe(x,r,e,t,u){return(x.l>=0?x.l:x.l=x.length)==4?x(r,e,t,u):Ds(x,[r,e,t,u])}function Je(x,r,e,t,u,i){return(x.l>=0?x.l:x.l=x.length)==5?x(r,e,t,u,i):Ds(x,[r,e,t,u,i])}function nZ(x,r,e,t,u,i,f,o){return(x.l>=0?x.l:x.l=x.length)==7?x(r,e,t,u,i,f,o):Ds(x,[r,e,t,u,i,f,o])}var qC=[Qr,jz,-1],jK=[Qr,az,-2],mn=[Qr,q_,-3],GC=[Qr,rz,-4],w2=[Qr,dD,-7],zK=[Qr,Ij,-8],KK=[Qr,aj,-9],Tr=[Qr,YU,-11],Il=[Qr,Dj,-12],uZ=[4,0,0,0,[12,45,[4,0,0,0,0]]],bC=[0,[11,'File "',[2,0,[11,'", line ',[4,0,0,0,[11,ij,[4,0,0,0,[12,45,[4,0,0,0,[11,": ",[2,0,0]]]]]]]]]],'File "%s", line %d, characters %d-%d: %s'],Ja=[0,0,[0,0,0],[0,0,0]],Pl=[0,0,0,0,1,0,0,0],JK=[0,"first_leading","last_trailing"],YK=[0,hf,gf,ni,l7,Af,Ii,yu,uc,O7,zi,Nf,un,Ku,sc,Le,E7,Q7,rf,Bf,T7,ci,Xc,hc,Gn,uf,j7,ku,ji,Qi,Jc,B7,Tu,yi,bi,_i,fi,Ff,Xi,nu,s7,Bc,K7,Wu,mc,vi,tf,Wf,Wn,ic,oc,Fi,Ce,Re,Mu,lf,dc,Mi,y7,Pf,ju,Gf,sf,ec,Tf,_c,Ai,ce,Ri,qn,ff,Hi,_u,e7,Iu,Li,xf,kc,cc,gu,Uu,ef,p7,$n,_f,v7,zf,z7,Q1,pi,Zu,Zn,J7,o7,Cf,df,V7,xu,Ci,Ru,wu,iu,Vu,xc,F7,jn,nc,d7,Yn,R7,Qu,Fu,If,Gu,af,zn,ki,jc,Yi,lu,mi,ou,Su,It,k7,t7,_7,R2,di,eu,Du,c7,of,cu,jf,A7,F2,Hu,Qn,Mf,Di,uu,Wc,G7,au,F1,Ui,Ju,Sc,tc,x7,yf,du,xi,Mc,ui,C7,n7,q7,Vn,Zf,Vf,$i,qf,L7,Ou,Bn,Ni,P7,Kn,tu,qi,xr,u7,ii,Cu,yc,$u,i7,Cc,Nc,zu,Ac,Y7,mf,g7,Pi,Of,Yf,ru,Wi,Dc,nf,Oc,r7,ti,kf,ei,bf,si,H7,Qf,bn,Yu,Sf,pn,Pc,Au,D7,vc,wc,S7,X7,Lu,f7,a7,Oi,Nu,fc,$f,b7,Df,zc,mu,Uf,ac,su,je,pc,fu,Pu,pu,Zi,I7,Me,lc,Xu,N7,Tc,Ji,Bi,m7,Gi,Ke,Eu,Z7,Rf,pf,gc,Si,wf,ze,Kc,cf,Ki,hu,rc,Xn,Fn,hi,Kf,li,Rc,h7,Lc,ai,Jn,M7,Ti,Xf,Jf,$7,w7,U7,oi,Bu,Ec,Hn,W7,qu,Yc,Ei,L2,Lf,vf,ri,U2],kn=[0,0,0];Dt(11,Il,Dj),Dt(10,Tr,YU),Dt(9,[Qr,TD,PM],TD),Dt(8,KK,aj),Dt(7,zK,Ij),Dt(6,w2,dD),Dt(5,[Qr,qM,-6],qM),Dt(4,[Qr,tM,-5],tM),Dt(3,GC,rz),Dt(2,mn,q_),Dt(1,jK,az),Dt(0,qC,jz);var iZ="output_substring",fZ=Hf,cZ=Ts,sZ=As,oZ="CamlinternalLazy.Undefined",vZ=mz,aZ="\\'",lZ="\\b",pZ="\\t",yZ="\\n",dZ="\\r",mZ="List.iter2",kZ="tl",hZ="hd",_Z="String.blit / Bytes.blit_string",wZ="Bytes.blit",TZ="String.sub / Bytes.sub",SZ="Array.blit",EZ="Array.sub",AZ="Map.remove_min_elt",gZ=[0,0,0,0],NZ=[0,"map.ml",400,10],IZ=[0,0,0],PZ=K4,CZ=K4,RZ=K4,OZ=K4,LZ="Stdlib.Queue.Empty",UZ="Buffer.add_substring/add_subbytes",MZ="Buffer.add: cannot grow buffer",DZ=[0,GU,93,2],jZ=[0,GU,94,2],zZ="Buffer.sub",KZ="%c",JZ="%s",YZ=DU,BZ=dz,XZ=vD,WZ=Uz,VZ="%f",ZZ="%B",$Z="%{",FZ="%}",QZ="%(",HZ="%)",qZ=CD,GZ="%t",bZ="%?",x$="%r",r$="%_r",e$=[0,i2,850,23],t$=[0,i2,814,21],n$=[0,i2,815,21],u$=[0,i2,818,21],i$=[0,i2,819,21],f$=[0,i2,822,19],c$=[0,i2,823,19],s$=[0,i2,826,22],o$=[0,i2,827,22],v$=[0,i2,831,30],a$=[0,i2,832,30],l$=[0,i2,836,26],p$=[0,i2,837,26],y$=[0,i2,846,28],d$=[0,i2,847,28],m$=[0,i2,851,23],k$=[0,i2,1558,4],h$="Printf: bad conversion %[",_$=[0,i2,1626,39],w$=[0,i2,1649,31],T$=[0,i2,1650,31],S$="Printf: bad conversion %_",E$=Oj,A$=aD,g$=Oj,N$=aD,I$=[0,[11,"invalid box description ",[3,0,0]],"invalid box description %S"],P$=[0,0,4],C$=jk,R$="neg_infinity",O$=_D,L$=Hf,U$=[0,tt],M$="%+nd",D$="% nd",j$="%+ni",z$="% ni",K$="%nx",J$="%#nx",Y$="%nX",B$="%#nX",X$="%no",W$="%#no",V$="%nd",Z$=vD,$$="%nu",F$="%+ld",Q$="% ld",H$="%+li",q$="% li",G$="%lx",b$="%#lx",xF="%lX",rF="%#lX",eF="%lo",tF="%#lo",nF="%ld",uF=dz,iF="%lu",fF="%+Ld",cF="% Ld",sF="%+Li",oF="% Li",vF="%Lx",aF="%#Lx",lF="%LX",pF="%#LX",yF="%Lo",dF="%#Lo",mF="%Ld",kF=Uz,hF="%Lu",_F="%+d",wF="% d",TF="%+i",SF="% i",EF="%x",AF="%#x",gF="%X",NF="%#X",IF="%o",PF="%#o",CF=hl,RF=DU,OF=qD,LF=oa,UF="@}",MF="@?",DF=`@
                                     ^

TypeError: Cannot read properties of undefined (reading 'startsWith')
    at printAngular (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:24775:22)
    at printPathNoParens (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:29687:25)
    at Object.genericPrint [as print] (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:29629:23)
    at callPluginPrintFunction (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:8601:26)
    at mainPrintInternal (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:8550:22)
    at mainPrint (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:8537:18)
    at printAstToDoc (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:8529:18)
    at coreFormat (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:8837:20)
    at formatWithCursor2 (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:9021:18)
    at /Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:38183:12
    at Object.format (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:38197:12)
    at prettierPlugin (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/@svgr+plugin-prettier@8.0.1_@svgr+core@8.0.0/node_modules/@svgr/plugin-prettier/dist/index.js:11:19)
    at run (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/@svgr+core@8.0.0/node_modules/@svgr/core/dist/index.js:174:16)
    at transform.sync (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/@svgr+core@8.0.0/node_modules/@svgr/core/dist/index.js:184:10)
    at convert (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/@svgr+cli@8.0.1/node_modules/@svgr/cli/dist/index.js:70:25)
    at convertFile (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/@svgr+cli@8.0.1/node_modules/@svgr/cli/dist/index.js:79:10)
    at async write (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/@svgr+cli@8.0.1/node_modules/@svgr/cli/dist/index.js:199:18)
    at async /Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/@svgr+cli@8.0.1/node_modules/@svgr/cli/dist/index.js:235:28
    at async Promise.all (index 0)
    at async handle (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/@svgr+cli@8.0.1/node_modules/@svgr/cli/dist/index.js:232:23)
    at async /Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/@svgr+cli@8.0.1/node_modules/@svgr/cli/dist/index.js:268:7
    at async Promise.all (index 0)
    at async dirCommand (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/@svgr+cli@8.0.1/node_modules/@svgr/cli/dist/index.js:264:3)
    at async run (/Users/book/dreamdata/bug-reproductions/svgr-prettier-3.0.0/node_modules/.pnpm/@svgr+cli@8.0.1/node_modules/@svgr/cli/dist/index.js:425:3)

Node.js v18.16.0

To Reproduce

Install the following with pnpm

    "@svgr/cli": "8.0.1",
    "@trivago/prettier-plugin-sort-imports": "4.2.0",
    "@vitejs/plugin-react-swc": "3.3.2",
    "prettier": "3.0.0",

And run svgr.

Expected behavior

The React components should be generated without the CLI fialing.

Link to repl or repo (highly encouraged)

https://github.com/johanbook/bug-reproduction-svgr-prettier-v3.0.0

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

> npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard
Need to install the following packages:
  envinfo@7.10.0
Ok to proceed? (y) y

*** Clipboard option removed - use clipboardy or clipboard-cli directly ***

## System:
 - OS: macOS 13.5
 - CPU: (10) arm64 Apple M2 Pro
 - Memory: 49.69 MB / 16.00 GB
 - Shell: 5.9 - /bin/zsh
## Binaries:
 - Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
 - npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
 - pnpm: 8.6.3 - ~/.nvm/versions/node/v18.16.0/bin/pnpm
## npmPackages:
 - @svgr/cli: 8.0.1 => 8.0.1
agjs commented 1 year ago

Wow, we are dealing with the exact same issue... Thanks for reporting...

gregberge commented 1 year ago

Hello, version is fixed, you should not have this problem. I tried to upgrade prettier to v3 in svgr but it breaks because of ESM. The whole toolchain have to move to ESM, it is a big work.

EvHaus commented 1 year ago

I'm having a different failure as a result of the prettier 3 upgrade:

/project/node_modules/@svgr/cli/dist/index.js:435
    throw error;
    ^

TypeError: prettier.resolveConfig.sync is not a function
    at prettierPlugin (/project/node_modules/@svgr/cli/node_modules/@svgr/plugin-prettier/dist/index.js:10:74)
    at run (/project/node_modules/@svgr/core/dist/index.js:174:16)
    at transform.sync (/project/node_modules/@svgr/core/dist/index.js:184:10)
    at convert (/project/node_modules/@svgr/cli/dist/index.js:70:25)
    at convertFile (/project/node_modules/@svgr/cli/dist/index.js:79:10)
    at async write (/project/node_modules/@svgr/cli/dist/index.js:199:18)
    at async /project/node_modules/@svgr/cli/dist/index.js:235:28
    at async Promise.all (index 3)
    at async handle (/project/node_modules/@svgr/cli/dist/index.js:232:23)
    at async /project/node_modules/@svgr/cli/dist/index.js:268:7
    at async Promise.all (index 0)
    at async dirCommand (/project/node_modules/@svgr/cli/dist/index.js:264:3)
    at async run (/project/node_modules/@svgr/cli/dist/index.js:431:3)

I figured I would add it to this issue instead of creating a new one.

kubijo commented 1 year ago

Any chance of addressing the prettier 3 breakage mentioned above? Or is there any known workaround (@EvHaus)?

I've tried disabling prettier in SVGR config, but that does not help. My issue was that I was forcing all prettier versions in my dependency graph to the latest, but I believe that it holds that this is an issue that should be addressed anyway

JanRuettinger commented 1 year ago

What workarounds are you guys using atm?

jmagrippis commented 1 year ago

What workarounds are you guys using atm?

I turn the SVGR prettier option off (for example with “prettier”: false in .svgrrc.json) and run prettier after the svgr command.

For example, with a script in package.json like:

"generate:svgr": "svgr --no-index --out-dir src src && prettier --write ./src"

broofa commented 8 months ago

fwiw, you can pass the --no-prettier option to the CLI to disable prettier.