リアクションアプリケーションをイジェクトすることなくレスキューローダーを作成すると失敗する

Question

create-react-appを使用してReactアプリケーションを構築しています。私はreact-svg-loaderを追加し、この方法でそれを使用してきました：

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

しかし、私はyarn buildを実行しようとしていたときに - プロセスが縮小ステップに失敗します。

最適化された生産ビルドを作成しています...に失敗しました。コンパイル。

は、このファイルからコードを縮小化に失敗しました：

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

読むよりここに：http://bit .ly/2tRViJ9

私は噴出せずに何とかそれを修正することはできますか？

Answer 1

の上部にeslintを無効にする必要があります。このライブラリで使用されているconfig-overrides.jsの内部には、webpack configにアクセスできます。それは簡単に変更することができます。

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

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

Answer 2

これは、反応スクリプト（config-powers-create-react-app）のフォークですが、新しい機能を追加するために試してみてください。https://github.com/kitze/custom-react-scripts

Answer 3

あなたは私が見つけた最善の解決策は、react-app-rewired + react-app-rewire-svg-react-loaderで、あなたのSVGをインポートファイル

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