Загрузка SVG с помощью Webpack в реакции (@ svgr / webpack) - PullRequest
Новая
       33

Загрузка SVG с помощью Webpack в реакции (@ svgr / webpack)

1 голос
/ 24 июня 2019

Конфигурация Webpack:

1-Для .svg я использую конфигурацию: { test: /\.svg$/, use: ['@svgr/webpack'] }

2-для .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)

Я не знаю, эта проблема возникла у меня.

1 Ответ

0 голосов
/ 26 июня 2019

В конце концов, я обнаружил проблему, я использую @ babel / register для рендеринга серверной части моего приложения, и я забыл сказать ей переопределить файлы svg и не рендерить их, поэтому я решил эту проблему следующим образом:

До 

// /server/index.js

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

* После 1009 *

// /server/index.js

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