utf-8 bom issue

[ccorcos]

ERROR in ./~/babel-loader!./~/svg-react-loader!./ui/images/affirm-logo.svg
Module build failed: Error: Non-whitespace before first tag.
Line: 0
Column: 1
Char: m
    at error (/Users/chetcorcos/code/styleguide/node_modules/svg-react-loader/node_modules/xml2js/node_modules/sax/lib/sax.js:652:8)
    at strictFail (/Users/chetcorcos/code/styleguide/node_modules/svg-react-loader/node_modules/xml2js/node_modules/sax/lib/sax.js:675:22)
    at Object.write (/Users/chetcorcos/code/styleguide/node_modules/svg-react-loader/node_modules/xml2js/node_modules/sax/lib/sax.js:955:11)
    at Parser.exports.Parser.Parser.parseString (/Users/chetcorcos/code/styleguide/node_modules/svg-react-loader/node_modules/xml2js/lib/xml2js.js:481:31)
    at Parser.parseString (/Users/chetcorcos/code/styleguide/node_modules/svg-react-loader/node_modules/xml2js/lib/xml2js.js:7:59)
    at Object.module.exports (/Users/chetcorcos/code/styleguide/node_modules/svg-react-loader/index.js:45:15)
 @ ./checkout/main.js 50:17-65

[jhamlet]

@ccorcos Can you supply that SVG for me to test against?

[ccorcos]

crap. I meant to close this. It was a problem with the way I was loading it. you need to prefix require("-!... when you're overriding other loaders...

[jhamlet]

Ahh.. Ok. cool.

[mauron85]

@ccorcos I have same problem on OSX. How exactly did you override loader? I'm using it as in example:

const Icon = require('babel!svg-react!./settings.svg?name=Settings');

EDIT: The problem is in webpack ^2.1.0-beta.4 Version ^1.12.14 seems to be fine.

[ccorcos]

const Icon = require('-!babel!svg-react!./settings.svg?name=Settings');

[mauron85]

Ok thanks. My problem at the end was that svg-reat-loader seems not to work with webpack 2.1.0-beta.4. Downgrade to 1.12.14 solved my problem.

[hunthunthunt]

The -! prefix worked for me also, for anyone looking for ES6/2015 syntax, try:

import MyIcom from '-!babel!svg-react!assets/images/fooIcon.svg?name=MyIcon';

[gwagener]

Nice. This allowed it to work for me in create-react-app-ts as I can't change the existing loaders.

[zeeshanjan82]

@hunthunthunt I am getting the error: : The node API for babel has been moved to babel-core. when using the import command you have provided.

[vikasrohit]

Sorry to post on closed thread, posting my exp so that others can take help.

Not sure why(I am not expert webpack and its loaders), but for me prefixing with simple ! worked, -! was not working.

[william-abboud]

@vikasrohit Yeah totally right man. Just prefixing it with ! worked for me too.

I used the following path import import Icon from '!svg-react-loader!../assets/icons/menu.svg';

with the following config in webpack

{
    test: /\.svg$/,
    loader: 'svg-react-loader',
    query: {
        classIdPrefix: '[name]-[hash:8]__'
    }
}