尝试使用raw-loader加载svg时出现捆绑错误

Question

我的目标是使用raw-loader将svg作为原始字符串读入，然后使用dangerouslySetInnerHTML将该svg字符串添加到div中，从而呈现svg。但是，我在导入svg时遇到了一个问题。我在控制台中收到了以下神秘的错误："Uncaught : Unexpected“。错误似乎来自bundle.js。当我单击它以了解更多信息时，它突出显示的行是

/* harmony default export */ __webpack_exports__["default"] = (undefined"<svg width=\"36\" height=\"36\" viewBox=\"0 0 40 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M2 1V14.0263L29.3553 16.1974L2 18.3684V31.3947L35 16.1974L2 1Z\" fill=\"#2996CC\"/>\n  <path d=\"M2 1V14.0263L29.3553 16.1974L2 18.3684V31.3947L35 16.1974L2 1Z\" stroke=\"#2996CC\" stroke-width=\"0.434211\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");

因为我使用的是webpack (4.39.2版本)，所以我不得不写一条规则来导入svg。我使用的规则是：

{ test: /\.svg$/, loader: "raw-loader" },

然后在.jsx文件(我使用的是reactjs)中，我使用

import sendIcon from "./SVGs/Plane.svg";

然后实际的div看起来像这样

<div
    className="RefreshIcon"
    dangerouslySetInnerHTML={{ __html: planeIcon }}
/>

有趣的是，如果我在编译之前运行rm -rf node_modules，那么一切都是正常的。然而，这看起来很麻烦，如果可能的话，我想避免这种解决方案。我之所以包含它，只是因为它可以让我们深入了解主要问题是什么。

我希望看到svgs正确显示，但是除了文本“正在加载”之外，整个屏幕都是清晰的，并且我在控制台中得到了前面提到的错误。

Answer 1

对我来说，这被证明是webpack本身的问题-我使用的here版本存在某种缓存问题，我回滚到4.19版本，这解决了我的问题。

Answer 2

Svg应与文件加载器一起使用

module: {
        rules: [
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }

您可以查看我的完整配置here