반출을 시도 할 때 반출하지 않고 react-svg-loader를 사용하여 반 응 앱을 실행하십시오.

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

내가 찾은 가장 좋은 해결책은 react-app-rewired + react-app-rewire-svg-react-loader입니다 가져올 경우

Answer 2

직접 대답은 아니지만 그렇습니다. 반응 스크립트 (config-powers-create-react-app)를 포크로 사용해 보시고 새로운 기능을 추가해보십시오. 당신이 당신의 SVG

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

Answer 3

당신은 파일의 상단에 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); 
};