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

Question

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")
                    }
                ]
            }

I used svgr in this way in my code:

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[=13=]--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[=13=]--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[=13=]--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)

我不知道我遇到过这个问题。

Answer 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'] = () => {};

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

Loading SVGs with Webpack in react (@svgr/webpack)

svg

sass

reactjs

webpack

server-side-rendering