Javascript 尝试缩小时，使用React svg loader创建React应用程序而不弹出失败

我正在使用

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';

但当我尝试运行

纱线构建

时，缩小步骤中的流程失败：

正在创建优化的生产构建。。。未能编译

未能缩小此文件中的代码：

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

请在此处阅读更多信息：.ly/2tRViJ9

---

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

不是直接的，而是可以的，尝试一下它是一个react脚本分支（用于创建react应用程序的配置），但扩展了它以向其添加新功能。

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

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

---

我找到的最佳解决方案是+。在这个库使用的

config overrides.js中，您可以访问webpack config。所以很容易改变

我的配置如下所示：

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

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

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

因此，对于您的代码，您必须执行以下操作：

安装
@svgr/webpack


纱线添加@svgr/webpack

对导出进行更改。

从“-”导出{默认为箭头左}@svgr/网页包/箭头左。svg'

export{默认为arrowRight}自“-@svgr/网页包/向右箭头.svg'

纱线构造

我用
材料设计图标
软件包尝试了这一点。

我的代码如下：

/* 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脚本进行任何更改，也不需要将其替换为另一个脚本，如重新布线的react应用程序。SVG支持不在内部这是正确的，但也不正确，是的，它们提供了一些内置的拖放解决方案，但它们也让配置打开，让您可以钩住东西：至少它可以指出您可以在这里看到ESLint的地方自己做什么？这和我的问题有什么关系？@oshikryu我确实遇到过这个问题。感谢您提及此解决方案。我忘了你可以用ESLint做这件事。遗憾的是，CRA仍然没有为我运行svg react loader。我必须做更多的研究。你基本上是在“弹出”，这就是你描述的你在过去不想做的事情OP@oshikryu仔细检查。我不是在弹射。我正在将“react脚本”更改为“react应用程序重新布线”感谢您分享此内容，我正要放弃并退出！项目
react app rewire svg react loader
已存档。作者说这是因为CreateReact应用程序v2引入了对SVG组件的支持