Create React App with react-svg-loader without ejecting fails when trying to minify

Question

I am using create-react-app to build my React application. I've added react-svg-loader and using it in this way:

export { default as arrowLeft } from '-!react-svg-loader!./arrow-left.svg';
export { default as arrowRight } from '-!react-svg-loader!./arrow-right.svg';

But when I am trying to run yarn build - process fails on minification step:

Creating an optimized production build... Failed to compile.

Failed to minify the code from this file:

    ./node_modules/react-svg-loader/lib/loader.js!./src/icons/arrow-left.svg:6

Read more here: http://bit .ly/2tRViJ9

Can I fix it somehow without ejecting?

Answer 1

The best solution I found is react-app-rewired + react-app-rewire-svg-react-loader. Inside config-overrides.js, which is used by this library you will have an access to webpack config. So it can be easy changed.

My config looks like this:

const rewireSvgReactLoader = require('react-app-rewire-svg-react-loader');

module.exports = function override(config, env) {
  return rewireSvgReactLoader(config, env);
};