Reactjs 在react中加载带有Webpack的SVG（@svgr/Webpack）

网页包配置：

1-对于

.svg

我使用config:

{test://\.svg$/，使用：['@svgr/webpack']}

2-对于

.scss

是使用配置：

{
测试：/\（sc|sa）ss$/，
不包括：/\.module\（scss | sass）$/，
使用：[{
加载器：MiniCssExtractPlugin.loader，
选项：{
hmr:isEnvDevelopment
}
},
{
加载器：require.resolve（'css-loader'），
选项：{
模块：对，
localIdentName:“[name]\[local]--[hash:base64:5]”，
进口装载机：2
}
},
{
加载器：require.resolve（'postss-loader'），
选项：{
标识：“邮政编码”
}
},
{
加载程序：require.resolve（“sass加载程序”）
}
]
}

我在代码中以这种方式使用svgr：

从“../../../assets/icons/music\u ipod.svg”导入Ipad
...
信息

问题

问题是，当我开始执行项目时，我遇到了以下错误：

\client\assets\icons\music_ipod.svg:1
(function (exports, require, module, __filename, __dirname) { <svg version="1.1" id="Layer_1" x="0px" y="0px"                                                              ^

SyntaxError: Unexpected token <
    at new Script (vm.js:79:7)    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.newLoader [as .js] (D:\WebSite_Learn\ReactJs\00--Studied--\Server Side Rendering with React and Redux\Project\MicroServices\Management\node_modules\pirates\lib\index.js:104:7)    at Module.load (internal/modules/cjs/loader.js:599:32)
Side Rendering with React and Redux\Project\MicroServices\Management\client\components\layout\header/index.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Module._compile (D:\WebSite_Learn\ReactJs\00--Studied--\Server Side Rendering with React and Redux\Project\MicroServices\Management\node_moSide Rendering with React and Redux\dules\pirates\lib\index.js:99:24)                                        :3:1)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)    
    at Object.newLoader [as .js] (D:\WebSite_Learn\ReactJs\00--Studied--\e Rendering with React and Redux\ProServer Side Rendering with React and Redux\Project\MicroServices\Management\node_modules\pirates\lib\index.js:104:7) 

\client\assets\icons\music\u ipod.svg:1
（函数（exports，require，module，_filename，__dirname）{最终我发现了问题，我使用@babel/register来渲染应用程序的服务器端，但我忘记告诉它覆盖svg文件，不渲染它们，所以我用这种方法处理这个问题：

之前

// /server/index.js

require('@babel/register')
require.extensions['.scss'] = () => {};
require.extensions['.css'] = () => {};

之后

// /server/index.js

require('@babel/register')
require.extensions['.scss'] = () => {};
require.extensions['.css'] = () => {};
require.extensions['.svg'] = () => {};

最终我发现了这个问题，我使用@babel/register来渲染我的应用程序的服务器端，我忘记告诉它覆盖svg文件而不渲染它们，所以我用这种方法处理这个问题：

之前

// /server/index.js

require('@babel/register')
require.extensions['.scss'] = () => {};
require.extensions['.css'] = () => {};

之后

// /server/index.js

require('@babel/register')
require.extensions['.scss'] = () => {};
require.extensions['.css'] = () => {};
require.extensions['.svg'] = () => {};