webpack 2 expected '!' error using with import

Question

I want to use this svg loader, https://github.com/jhamlet/svg-react-loader

in the instruction I followed the usage, like

import Logo from 'svg-react-loader?name=Logo!../images/logo.svg';

But I got error

Line 3:  Unexpected '!' in 'svg-react-loader?name=Logo!../images/logo.svg'. Do not use import syntax to configure webpack loaders  import/no-webpack-loader-syntax

Answer 1

That is not an error from webpack, but from ESLint, specifically from eslint-plugin-import .

Using inline loaders is generally not recommended and the ESLint rule import/no-webpack-loader-syntax exists to warn you from doing this. If you do want to use inline loaders and don't want ESLint to complain, you can disable the rule in your .eslintrc .

"rules": {
  "import/no-webpack-loader-syntax": "off"
}

Or you can disable the rule just for that specific import, if you want to be warned about inline loaders, except for this one, because you might need it in this particular case.

// eslint-disable-next-line import/no-webpack-loader-syntax
import Logo from 'svg-react-loader?name=Logo!../images/logo.svg';