Добрый день.
Пытаюсь с помощью лоадера 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');
В итоге получается, что на стороне клиента файл обрабатывается, а на стороне сервера - нет.
Средний