svg-react-loader with create-react-app - how to setup?

[pauldcollins]

I am getting the non-whitespace error when importing my SVG file with create-react-app

Module build failed: Error: Non-whitespace before first tag.

I've ejected my app and am trying to modify the webpack.dev.config file to ignore running the standard file-loader on my svg files and run the svg-react-loader instead.

I found some code from this post and changed my filename to end in inline.svg, but trying to configure my webpack config doesn't seem to be working.

Here's my webpack config code:

// webpack.dev.config
oneOf: [
  {
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    loader: require.resolve('url-loader'),
    options: {
      limit: 10000,
      name: 'static/media/[name].[hash:8].[ext]'
    }
  },
  {
    test: /\.inline\.svg$/,
    loader: require.resolve('svg-react-loader');
  },

  ....
  
  {
    exclude: [/\.js$/, /\.html$/, /\.json$/, /\.inline.svg$/],
    loader: require.resolve('file-loader'),
    options: {
      name: 'static/media/[name].[hash:8].[ext]'
    }
  }
]

I'm still getting the same whitespace error though. Thanks for any help.

[pauldcollins]

I managed to solve this, using a simple fix in this post

Basically, just add a -! at the start of the import path.

For example this:

import Logo from 'svg-react-loader!./logo.svg';

Would become this:

import Logo from '-!svg-react-loader!./logo.svg';

Works for me now - no more whitespace issue. I should mention I didn't need to eject either, with this approach.

[MarcoMedrano]

I should mention I didn't need to eject either

Thank u so much for that little text ↑, it worked for me either without of ejecting ttg.
I just did:
npm install svg-react-loader -D
then
import Logo from '-!svg-react-loader!./logo.svg';

Worked as charm.

[davilima6]

The !- solution works until you run tests, which fail with:

Cannot find module '-!svg-react-loader!../../images/my-icon.svg' from 'MyComponent.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (src/components/MyComponent/MyComponent.js:9:184)

Any known workaround?

[callmejm]

@pauldcollins you are the svg life saver !