@frogfordog

Каким образом заставить сервер преобразовывать svg в react компонент?

Добрый день.

Пытаюсь с помощью лоадера react-svg-loader, преобразовать svg в React Component.

Вот настройки webpack:
{
        test: /\.svg$/,
        include: [/src\/components/],
        loader: 'babel!react-svg?' + JSON.stringify({
          svgo: {
            // svgo options
            floatPrecision: 2
          }
        })
      }


При сборке файл превращается вот в такую конструкцию:
file.svg
import React from "react";
export default class SVG extends React.Component {
  render() {
    return <svg xmlns="http://www.w3.org/2000/svg" width="212.27" height="410.87" viewBox="0 0 199.00001 385.19423" {...this.props}><path d="M173.74 31.86h14.17v336.62h-14.17z" fill="#fff" fillRule="evenodd" /><path fill="#6fb3d2" d="M173.74 177.14h14.17v191.34h-14.17z" /><path d="M.5 28.44v345c15 15 183 15 198 0v-345c-15-15-183-15-198 0zm180.32 3.42c3.55 0 7.09 3.54 7.09 7.09v322.44c0 3.54-3.54 7.09-7.09 7.09-3.54 0-7.08-3.55-7.08-7.1V38.96c0-3.55 3.54-7.09 7.08-7.09z" opacity=".98" fill="#ccc" stroke="#333" /><text style={{
        lineHeight: "125%"
      }} x="212.02" y="452.9" fontWeight="400" fontSize="6.25" fontFamily="sans-serif" letterSpacing="0" wordSpacing="0" transform="translate(-109.07 -445.48)"><tspan x="212.02" y="452.9" style={{
          textAlign: "center"
        }} fontSize="10" textAnchor="middle">{this.props.tag}</tspan></text></svg>;
  }

}


Когда пытаюсь добавить его с помощью import:
import React from 'react';
import SvgComp from './file.svg';

export default class MyClass extends React.Component {
    render() {
        return <SvgComp />
    };
}


При заходе на адрес сервера сначала все загружается, но после обновления странички выходит ошибка 500
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.


Вот файл server.js:
// Add ES6/ES7 support
require('babel-core/register');

// Ignore .css and other includes
['.css', '.less', '.sass', '.ttf', '.woff', '.woff2', '.svg'].forEach((ext) => require.extensions[ext] = () => {});
require('babel-polyfill');
require('server.js');


В итоге получается, что на стороне клиента файл обрабатывается, а на стороне сервера - нет.
  • Вопрос задан
  • 1098 просмотров
Решения вопроса 1
@frogfordog Автор вопроса
Все заработало.

Победил с помощью плагина для бабела: https://www.npmjs.com/package/babel-plugin-inline-...
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы