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

【问题标题】：getting bundle error when trying to load svg with raw-loader尝试使用 raw-loader 加载 svg 时出现捆绑错误
【发布时间】：2019-08-15 23:19:18
【问题描述】：

我的目标是使用 raw-loader 将 svg 作为原始字符串读取，然后使用 dangerouslySetInnerHTML 将此 svg 字符串添加到 div 并渲染 svg。但是，我在导入 svgs 时遇到了问题。我在控制台中收到以下神秘错误：“Uncaught SyntaxError: Unexpected string”。该错误似乎来自 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），所以我不得不写一个规则来导入svgs。我使用的规则是：


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

然后在 .jsx 文件中（我使用的是 reactjs），我使用


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

实际的 div 然后看起来像

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

有趣的是，如果我在编译之前运行rm -rf node_modules，那么一切都很好。但是，这似乎很hacky，如果可能的话，我想避免这种解决方案。我之所以包含它，只是因为它可以帮助我们深入了解主要问题是什么。

我希望看到 svg 正确显示，但整个屏幕都清晰，除了文本“正在加载”，我在控制台中收到上述错误。

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

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

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

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

【讨论】：

谢谢，但是我如何将 svg 加载到我的代码中（即，用什么代替了 dangerouslyLoadHTML 部分）？

【解决方案2】：

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

【讨论】：