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

easier and safer solution is to add the following line to the file where you want to use the inline loaders:

/* eslint import/no-webpack-loader-syntax: off */

this will switch this option only for the file that includes this line.

Answer 2

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';