使用 react-svg-loader 创建 React App 而不会在尝试缩小时弹出失败

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 - 缩小步骤过程失败：

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

我可以在不弹出的情况下修复它吗？

Answer 1

不是直接的，但是是的，试一试 https://github.com/kitze/custom-react-scripts 它是 react-scripts 的一个分支（为 create-react-app 提供支持的配置），但为您进行了扩展以向其添加新功能。

Answer 2

您需要在导入 svg 的文件顶部禁用 eslint

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

Answer 3

我找到的最佳解决方案是 react-app-rewired + react-app-rewire-svg-react-loader。在这个库使用的 config-overrides.js 中，你可以访问 webpack 配置。所以它可以很容易地改变。

我的配置如下所示：

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

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

Answer 4

我刚切换到 @svgr/webpack，它对我来说非常好用。

因此对于您的代码，您必须这样做：

安装@svgr/webpack.
yarn add @svgr/webpack
更改您的导出。
export { default as arrowLeft } from '-!@svgr/webpack!./arrow-left.svg';
export { default as arrowRight } from '-!@svgr/webpack!./arrow-right.svg';
yarn build

我用 material-design-icons 包试过了。
我的代码如下：

/* eslint-disable import/no-webpack-loader-syntax */

export { default as PlusButton } from '-!@svgr/webpack!material-design-icons/content/svg/production/ic_add_24px.svg';
export { default as MoreButton } from '-!@svgr/webpack!material-design-icons/navigation/svg/production/ic_more_horiz_24px.svg';
export { default as CloseButton } from '-!@svgr/webpack!material-design-icons/navigation/svg/production/ic_close_24px.svg';

对我来说，这需要最少的更改。我仍在 CRA 中，既不需要对反应脚本进行任何更改，也不必将其换成 react-app-rewired 之类的替代方案。

Answer 5

对于现在搜索此内容的任何人，他们在 2.0.0 中添加了对此的支持，请参阅 https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

使用 react-svg-loader 创建 React App 而不会在尝试缩小时弹出失败

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

javascript

reactjs

webpack

create-react-app