Error: Non-whitespace before first tag

[nicgordon]

Sorry to raise an issue with this name again, but I believe that this is not related to the BOM issue that was closed previously. I am wondering if I am doing something silly with my webpack config that is causing this:

WARNING in ./shared/components/svg-icon/icons/twitter.svg
Module build failed: Error: Non-whitespace before first tag.
Line: 0
Column: 1
Char: m
    at error (blah/node_modules/xml2js/node_modules/sax/lib/sax.js:651:10)
    at strictFail (blah/node_modules/xml2js/node_modules/sax/lib/sax.js:677:7)
    at beginWhiteSpace (blah/node_modules/xml2js/node_modules/sax/lib/sax.js:951:7)
    at Object.write (blah/node_modules/xml2js/node_modules/sax/lib/sax.js:1006:11)
    at Parser.exports.Parser.Parser.parseString (blah/node_modules/xml2js/lib/xml2js.js:508:31)
    at Parser.parseString (blah/node_modules/xml2js/lib/xml2js.js:7:59)
    at AnonymousObservable.__subscribe (blah/node_modules/svg-react-loader/lib/xml/parse.js:16:16)
    at AnonymousObservable.tryCatcher (blah/node_modules/svg-react-loader/node_modules/rx/dist/rx.js:63:31)
    at setDisposable (blah/node_modules/svg-react-loader/node_modules/rx/dist/rx.js:5845:44)
    at AnonymousObservable.Rx.AnonymousObservable.AnonymousObservable._subscribe (blah/node_modules/svg-react-loader/node_modules/rx/dist/rx.js:5862:9)

So you'll notice the char it comes across is an 'm', so I decided to see what it was seeing and logged out before this line svg-react-loader/lib/xml/parse.js:16:16 and got this:

module.exports = __webpack_public_path__ + "d9fb6acead094090c1450fa6f4b6c5b7.svg";

It seems that the loader has already done its magic by this point. So why am I getting this warning? Is it running twice? This is how my loader is configured:

{
  test: /\.svg$/,
  loader: 'svg-react-loader',
},

Any help would be appreciated. Thanks!

[nebaff]

this is raised by sax parser , the module analysing your svg.
It seems it has encountered a char it doesn't appreciate

i encourage you to open your svg with a good text editor like notepad++, and activate option to see all invisible white chars. You'll be able to see incriminated char and shoot it.
try again after this

[nicgordon]

See, I don't think that's the case. The problem is that the parser is literally coming across this string:
module.exports = __webpack_public_path__ + "d9fb6acead094090c1450fa6f4b6c5b7.svg"; which is why it sees an m as the first character. I imagine that the parser would normally expect to see something like <svg xmlns="... at that time. The problem is not in invisible chars, it is that the transformation seems to have already happened before the parser runs?

And fwiw I did save my files as UTF-8 encoding without BOM to eliminate that as the reason.

[nebaff]

ok so it pay comes from the order of your loaders for svg files. I have had this issue before.
you can see if you have any loader out of svg-react-loader in your config, and eventually exclude svg from it.

moreover do no not forget loaders are called in the inverse order of lines in your webpack.config file

[nicgordon]

@nebaff that was the solution for me, I needed to move my svg-react-loader test under my fallback svg loader. I was under the impression that my loaders applied in the opposite order. Thank you!

[hutber]

Any chance you could post your code @nicgordon :)?

[dannyk08ib]

this may be and old thread but I came across this same error, make sure you set a defined loader for the file. Especially if you have other loaders with svg definitions

import Icon from '-!svg-react-loader./icon/path/name.svg';

[chuckbergeron]

I had this same issue but am using a root import plugin, so mine ended up looking like:

import Icon from '-!svg-react-loader!src/assets/images/name.svg'

(note the 2nd bang '!' after '-svg-react-loader')