Error "Non-whitespace before first tag"

[krutoo]

Hi i use small config for svgr with SVGO and JSX plugins by Node.js API

SVG source code is from official docs: https://react-svgr.com/docs/node-api/

And it fails with error:

SvgoParserError: <input>:1:1: Non-whitespace before first tag.

Here an simple example repo: https://github.com/krutoo/svgr-tests/blob/main/index.js

Just run node index.js for see fail

How can i fix that? Maybe i using wrong config?

[await-ovo]

It looks like we should make sure that the svgo plugin is at the begin of the plugins array.

Hi @gregberge Could we sort the plugins internally to ensure that the svgo plugin are executed first, or put this detail in the documentation. I'd happy to send a PR if it is possible to do, thanks ~

[florianheller]

Hi, I just ran into a similar problem with the SVGo config: the default setting for 'datauri' seems to be 'base64', which means the string that the other plugins get handed over is not what they expect. Maybe you could override this setting to 'unenc' to avoid people running in this issue. (The example svgo.config.js on the page that is linked in the documentation also sets an encoded version).

Cheers

[fbarbare]

I am getting the same issue. Is there something we can do to fix this or work around it?

[florianheller]

@fbarbare have you tried passing an svgoConfig to the transform-call that sets datauri: 'unenc'?

For example: const svgoConfiguration = { multipass: true, // boolean. false by default datauri: 'unenc', // 'base64' (default), 'enc' or 'unenc'. plugins: [ { 'preset-default' : {} }, { 'moveElemsAttrsToGroup': {} }, { 'removeDimensions' : {} }, // Conflicts with icon:true in svgr setting. { 'removeAttrs': { attrs: 'fill' } }, { 'sortAttrs': {} }, { 'addAttributesToSVGElement' : { attributes: [{ 'fill': 'currentColor' }, {'aria-hidden': 'true'}] } } ], };