在 React (@svgr/webpack) 中使用 Webpack 加载 SVG答案

【问题标题】：Loading SVGs with Webpack in react (@svgr/webpack)在 React (@svgr/webpack) 中使用 Webpack 加载 SVG
【发布时间】：2019-11-06 02:21:45
【问题描述】：

Webpack 配置：

1-对于.svg，我使用配置：{ test: /\.svg$/, use: ['@svgr/webpack'] }

2-for .scss 是使用配置：

 {
                test: /\.(sc|sa)ss$/,
                exclude: /\.module\.(scss|sass)$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: isEnvDevelopment
                        }
                    },
                    {
                        loader: require.resolve('css-loader'),
                        options: {
                            modules: true,
                            localIdentName: '[name]__[local]--[hash:base64:5]',
                            importLoaders: 2
                        }
                    },
                    {
                        loader: require.resolve('postcss-loader'),
                        options: {
                            ident: 'postcss'
                        }
                    },
                    {
                        loader: require.resolve("sass-loader")
                    }
                ]
            }

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

import Ipad from '../../../assets/icons/music_ipod.svg'
...
<div>messages
 <Ipad />
</div>

问题

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

\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)

我不知道这个问题发生在我身上。

【问题讨论】：

标签： reactjs svg webpack sass server-side-rendering

【解决方案1】：

最终我发现了问题，我使用 @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'] = () => {};

【讨论】：