I’m working on a project where i need to convert a svg image accessed from the user’s computer to a jsx wrapped react component.The svg image is getting converted partially.I mean i can see the partially transformed react component in the console.

const error = new SvgoParserError(
              ^

SvgoParserError: :1:1: Non-whitespace before first tag.
at sax.onerror (/Users/yugdev/Documents/SVG /server/node_modules/svgo/lib/parser.js:247:19)
at emit (/Users/yugdev/Documents/SVG /server/node_modules/@trysound/sax/lib/sax.js:518:35)
at error (/Users/yugdev/Documents/SVG /server/node_modules/@trysound/sax/lib/sax.js:549:5)
at strictFail (/Users/yugdev/Documents/SVG /server/node_modules/@trysound/sax/lib/sax.js:573:7)
at beginWhiteSpace (/Users/yugdev/Documents/SVG /server/node_modules/@trysound/sax/lib/sax.js:847:7)
at SAXParser.write (/Users/yugdev/Documents/SVG /server/node_modules/@trysound/sax/lib/sax.js:902:11)
at parseSvg (/Users/yugdev/Documents/SVG /server/node_modules/svgo/lib/parser.js:259:7)
at optimize (/Users/yugdev/Documents/SVG /server/node_modules/svgo/lib/svgo.js:66:17)
at Object.optimize (/Users/yugdev/Documents/SVG /server/node_modules/svgo/lib/svgo-node.js:76:10)
at svgoPlugin (/Users/yugdev/Documents/SVG /server/node_modules/@svgr/plugin-svgo/dist/index.js:76:23)
at run (/Users/yugdev/Documents/SVG /server/node_modules/@svgr/core/dist/index.js:174:16)
at transform (/Users/yugdev/Documents/SVG /server/node_modules/@svgr/core/dist/index.js:180:10)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
reason: ‘Non-whitespace before first tag.’,
line: 1,
column: 1,
source: ‘import * as React from “react”;n’ +
‘const SvgComponent = props => <svg id=”SvgjsSvg2529″ width={878} height={300} xmlns=”http://www.w3.org/2000/svg” xmlnsXlink=”http://www.w3.org/1999/xlink” xmlns:svgjs=”http://svgjs.dev” className=”apexcharts-svg apexcharts-zoomable hovering-zoom” xmlns:data=”ApexChartsNS” transform=”translate(0, 0)” style={{n’ +
‘ background: “transparent”n’ +
‘}} {…props}><div className=”apexcharts-legend apexcharts-align-center apx-legend-position-bottom” xmlns=”http://www.w3.org/1999/xhtml” style={{n’ +
‘ inset: “auto 0px 1px”,n’ +
‘ position: “absolute”,n’ +
‘ maxHeight: 150n’ +
‘ }}><div className=”apexcharts-legend-series” rel={1} seriesname=”MainxBlockxxkWhx” data:collapsed=”false” style={{n’ +
‘ margin: “2px 5px”n’ +
‘ }}><span className=”apexcharts-legend-marker” rel={1} data:collapsed=”false” style={{n’ +
‘ background: “rgb(0, 143, 251) !important”,n’ +
‘ color: “rgb(0, 143, 251)”,n’ +
‘ height: 12,n’ +
‘ width: 12,n’ +
‘ left: 0,n’ +
‘ top: 0,n’ +
‘ borderWidth: 0,n’ +
‘ borderColor: “rgb(255, 255, 255)”,n’ +
‘ borderRadius: 12n’ +
‘ }} /><span className=”apexcharts-legend-text” rel={1} i={0} data:default-text=”Main%20Block%20(kWh)” data:collapsed=”false” style={{n’ +
‘ color: “rgb(55, 61, 63)”,n’ +
‘ fontSize: 12,n’ +
‘ fontWeight: 400,n’ +
‘ fontFamily: “Helvetica, Arial, sans-serif”n’ +
‘ }}>{“Main Block (kWh)”}<div className=”apexcharts-legend-series” rel={2} seriesname=”TotalxxkWhx” data:collapsed=”false” style={{n’ +
‘ margin: “2px 5px”n’ +
‘ }}><span className=”apexcharts-legend-marker” rel={2} data:collapsed=”false” style={{n’ +
‘ background: “rgb(0, 227, 150) !important”,n’ +
‘ color: “rgb(0, 227, 150)”,n’ +
‘ height: 12,n’ +
‘ width: 12,n’ +
‘ left: 0,n’ +
‘ top: 0,n’ +
‘ borderWidth: 0,n’ +
‘ borderColor: “rgb(255, 255, 255)”,n’ +
‘ borderRadius: 12n’ +
‘ }} /><span className=”apexcharts-legend-text” rel={2} i={1} data:default-text=”Total%20(kWh)” data:collapsed=”false” style={{n’ +
‘ color: “rgb(55, 61, 63)”,n’ +
‘ fontSize: 12,n’ +
‘ fontWeight: 400,n’ +
‘ fontFamily: “Helvetica, Arial, sans-serif”n’ +
‘ }}>{“Total (kWh)”}{“n .apexcharts-legend {n display: flex;n overflow: auto;n padding: 0 10px;n }n .apexcharts-legend.apx-legend-position-bottom, .apexcharts-legend.apx-legend-position-top {n flex-wrap: wrapn }n .apexcharts-legend.apx-legend-position-right, .apexcharts-legend.apx-legend-position-left {n flex-direction: column;n bottom: 0;n }n .apexcharts-legend.apx-legend-position-bottom.apexcharts-align-left, .apexcharts-legend.apx-legend-position-top.apexcharts-align-left, .apexcharts-legend.apx-legend-position-right, .apexcharts-legend.apx-legend-position-left {n justify-content: flex-start;n }n .apexcharts-legend.apx-legend-position-bottom.apexcharts-align-center, .apexcharts-legend.apx-legend-position-top.apexcharts-align-center {n justify-content: center;n }n .apexcharts-legend.apx-legend-position-bottom.apexcharts-align-right, .apexcharts-legend.apx-legend-position-top.apexcharts-align-right {n justify-content: flex-end;n }n .apexcharts-legend-series {n cursor: pointer;n line-height: normal;n }n .apexcharts-legend.apx-legend-position-bottom .apexcharts-legend-series, .apexcharts-legend.apx-legend-position-top .apexcharts-legend-series{n display: flex;n align-items: center;n }n .apexcharts-legend-text {n position: relative;n font-size: 14px;n }n .apexcharts-legend-text *, .apexcharts-legend-marker * {n pointer-events: none;n }n .apexcharts-legend-marker {n position: relative;n display: inline-block;n cursor: pointer;n margin-right: 3px;n border-style: solid;n }nn .apexcharts-legend.apexcharts-align-right .apexcharts-legend-series, .apexcharts-legend.apexcharts-align-left .apexcharts-legend-series{n display: inline-block;n }n .apexcharts-legend-series.apexcharts-no-click {n cursor: auto;n }n .apexcharts-legend .apexcharts-hidden-zero-series, .apexcharts-legend .apexcharts-hidden-null-series {n display: none !important;n }n .apexcharts-inactive-legend {n opacity: 0.45;n }”}<text id=”SvgjsText2610″ fontFamily=”Helvetica, Arial, sans-serif” x={20} y={31.8} textAnchor=”end” dominantBaseline=”auto” fontSize=”11px” fontWeight={400} fill=”#373d3f” className=”apexcharts-text apexcharts-yaxis-label ” style={{n’ +
‘ fontFamily: “Helvetica, Arial, sans-serif”n’ +
‘ }} svgjs:data=”{“leading”:”1.3″}”>{“8.00”}{“8.00″}<text id=”SvgjsText2613″ fontFamily=”Helvetica, Arial, sans-serif” x={20} y={58.5935} textAnchor=”end” dominantBaseline=”auto” fontSize=”11px” fontWeight={400} fill=”#373d3f” className=”apexcharts-text apexcharts-yaxis-label ” style={{n’ +
‘ fontFamily: “Helvetica, Arial, sans-serif”n’ +
‘ }} svgjs:data=”{“leading”:”1.3″}”>{“7.00”}{“7.00″}<text id=”SvgjsText2616″ fontFamily=”Helvetica, Arial, sans-serif” x={20} y={85.387} textAnchor=”end” dominantBaseline=”auto” fontSize=”11px” fontWeight={400} fill=”#373d3f” className=”apexcharts-text apexcharts-yaxis-label ” style={{n’ +
‘ fontFamily: “Helvetica, Arial, sans-serif”n’ +
‘ }} svgjs:data=”{“leading”:”1.3″}”>{“6.00”}{“6.00″}<text id=”SvgjsText2619″ fontFamily=”Helvetica, Arial, sans-serif” x={20} y={112.18050000000001} textAnchor=”end” dominantBaseline=”auto” fontSize=”11px” fontWeight={400} fill=”#373d3f” className=”apexcharts-text apexcharts-yaxis-label ” style={{n’ +
‘ fontFamily: “Helvetica, Arial, sans-serif”n’ +
‘ }} svgjs:data=”{“leading”:”1.3″}”>{“5.00”}{“5.00″}<text id=”SvgjsText2622″ fontFamily=”Helvetica, Arial, sans-serif” x={20} y={138.97400000000002} textAnchor=”end” dominantBaseline=”auto” fontSize=”11px” fontWeight={400} fill=”#373d3f” className=”apexcharts-text apexcharts-yaxis-label ” style={{n’ +
‘ fontFamily: “Helvetica, Arial, sans-serif”n’ +
‘ }} svgjs:data=”{“leading”:”1.3″}”>{“4.00”}{“4.00″}<text id=”SvgjsText2625″ fontFamily=”Helvetica, Arial, sans-serif” x={20} y={165.7675} textAnchor=”end” dominantBaseline=”auto” fontSize=”11px” fontWeight={400} fill=”#373d3f” className=”apexcharts-text apexcharts-yaxis-label ” style={{n’ +
‘ fontFamily: “Helvetica, Arial, sans-serif”n’ +
‘ }} svgjs:data=”{“leading”:”1.3″}”>{“3.00”}{“3.00″}<text id=”SvgjsText2628″ fontFamily=”Helvetica, Arial, sans-serif” x={20} y={192.561} textAnchor=”end” dominantBaseline=”auto” fontSize=”11px” fontWeight={400} fill=”#373d3f” className=”apexcharts-text apexcharts-yaxis-label ” style={{n’ +
‘ fontFamily: “Helvetica, Arial, sans-serif”n’ +
‘ }} svgjs:data=”{“leading”:”1.3″}”>{“2.00”}{“2.00″}<text id=”SvgjsText2631″ fontFamily=”Helvetica, Arial, sans-serif” x={20} y={219.3545} textAnchor=”end” dominantBaseline=”auto” fontSize=”11px” fontWeight={400} fill=”#373d3f” className=”apexcharts-text apexcharts-yaxis-label ” style={{n’ +
‘ fontFamily: “Helvetica, Arial, sans-serif”n’ +
‘ }} svgjs:data=”{“leading”:”1.3″}”>{“1.00”}{“1.00″}<text id=”SvgjsText2634″ fontFamily=”Helvetica, Arial, sans-serif” x={20} y={246.148} textAnchor=”end” dominantBaseline=”auto” fontSize=”11px” fontWeight={400} fill=”#373d3f” className=”apexcharts-text apexcharts-yaxis-label ” style={{n’ +
‘ fontFamily: “Helvetica, Arial, sans-serif”n’ +
‘ }} svgjs:data=”{“leading”:”1.3″}”>{“0.00”}{“0.00″}<line id=”SvgjsLine2572″ x1={129.224951171875} y1={215.348} x2={129.224951171875} y2={221.348} stroke=”#e0e0e0″ strokeDasharray={0} strokeLinecap=”butt” className=”apexcharts-xaxis-tick”‘… 28440 more characters
}

Node.js v22.2.0

i checked for any non-whitespace before first tag in the svg file im trying to convert,but found nothing.

I tried using many libraries and ended up using the @svgr/core in node.js.But its not working.I need the converted react component to make edits to the svg image.Do any of you know how to do this?