Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

import { SvgXml } from 'react-native-svg'; //SvgXml is undefined

See original GitHub issue

Bug

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of _default.

Environment info

React native info output:

...
      react: 16.8.3 => 16.8.3 
      react-native: https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz => 0.59.8
...

Library version: “react-native-svg”: “~9.4.0”,

Steps To Reproduce

1.Teste something importing the SvgXml from ‘react-native-svg’ like in the doc ‘https://github.com/react-native-community/react-native-svg#use-with-xml-strings’

Describe what you expected to happen:

  1. Import the SvgXml component from react-native-svg 2.Rendering a xml svg

Reproducible sample code

import * as React from "react";
import { SvgXml } from "react-native-svg";
const xml = `<svg width="132px" height="82px" viewBox="0 0 132 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
    <title>photo profil</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M55.3862483,13.2166721 C56.6100176,13.5467569 57.8308451,13.8677844 59.0497115,14.188812 L59.5125473,10.9503586 C46.6247271,7.43918274 33.7378874,3.92599418 20.8373196,0.460104347 C19.6380649,0.137064093 17.6308087,-0.186982517 17.122866,0.444002653 C12.6219838,6.04236071 6.87183713,9.64410859 -9.80584359e-05,12.4729751 C2.53177076,14.8067145 5.00480451,17.1454857 7.91812064,18.1991404 C10.932437,19.2880175 14.3752687,19.131026 17.7778964,19.5365874 C15.0793282,21.2675196 12.3189832,23.0346806 9.47921094,24.8531658 C16.9179239,29.1895535 25.6412024,26.1815556 32.9220412,17.3648713 C31.5031357,20.9384412 30.0832495,24.5120111 28.4986252,28.5012061 C35.7608329,28.2938967 39.6714034,24.2362696 42.1983693,18.1649243 C42.5494185,18.2846806 42.9004677,18.4054433 43.2515169,18.5251997 C42.869089,21.0823501 42.4846999,23.6395005 42.0434369,26.5931552 C47.0787376,25.8927315 48.9457702,22.2265768 50.8422204,18.5785366 C51.5099983,19.7811319 52.0110769,20.6818205 53.0455934,22.5506234 C53.9791098,18.8261001 54.6586547,16.1190027 55.3862483,13.2166721" id="path-1"></path>
        <filter x="-10.1%" y="-21.1%" width="120.2%" height="142.2%" filterUnits="objectBoundingBox" id="filter-2">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.25 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
        <path d="M55.3862483,13.2166721 C56.6100176,13.5467569 57.8308451,13.8677844 59.0497115,14.188812 L59.5125473,10.9503586 C46.6247271,7.43918274 33.7378874,3.92599418 20.8373196,0.460104347 C19.6380649,0.137064093 17.6308087,-0.186982517 17.122866,0.444002653 C12.6219838,6.04236071 6.87183713,9.64410859 -9.80584359e-05,12.4729751 C2.53177076,14.8067145 5.00480451,17.1454857 7.91812064,18.1991404 C10.932437,19.2880175 14.3752687,19.131026 17.7778964,19.5365874 C15.0793282,21.2675196 12.3189832,23.0346806 9.47921094,24.8531658 C16.9179239,29.1895535 25.6412024,26.1815556 32.9220412,17.3648713 C31.5031357,20.9384412 30.0832495,24.5120111 28.4986252,28.5012061 C35.7608329,28.2938967 39.6714034,24.2362696 42.1983693,18.1649243 C42.5494185,18.2846806 42.9004677,18.4054433 43.2515169,18.5251997 C42.869089,21.0823501 42.4846999,23.6395005 42.0434369,26.5931552 C47.0787376,25.8927315 48.9457702,22.2265768 50.8422204,18.5785366 C51.5099983,19.7811319 52.0110769,20.6818205 53.0455934,22.5506234 C53.9791098,18.8261001 54.6586547,16.1190027 55.3862483,13.2166721" id="path-3"></path>
        <filter x="-10.1%" y="-21.1%" width="120.2%" height="142.2%" filterUnits="objectBoundingBox" id="filter-4">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.25 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
        <circle id="path-5" cx="33.5" cy="33.5" r="33.5"></circle>
        <circle id="path-7" cx="33.5" cy="33.5" r="33.5"></circle>
        <filter x="-4.9%" y="-4.9%" width="109.7%" height="109.7%" filterUnits="objectBoundingBox" id="filter-9">
            <feGaussianBlur stdDeviation="3" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
            <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
        </filter>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="photo-profil" transform="translate(-6.000000, -6.000000)">
            <g id="aile-gauche" transform="translate(31.960763, 32.765253) scale(-1, 1) rotate(-227.000000) translate(-31.960763, -32.765253) translate(1.960763, 17.765253)">
                <g id="image" transform="translate(30.000000, 15.072345) scale(1, -1) translate(-30.000000, -15.072345) translate(0.000000, 0.572345)">
                    <g id="Fill-1">
                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
                    </g>
                </g>
            </g>
            <g id="aile-droite" transform="translate(112.039237, 32.765253) rotate(-227.000000) translate(-112.039237, -32.765253) translate(82.039237, 17.765253)">
                <g id="image" transform="translate(30.000000, 15.072345) scale(1, -1) translate(-30.000000, -15.072345) translate(0.000000, 0.572345)">
                    <g id="Fill-1">
                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-3"></use>
                    </g>
                </g>
            </g>
            <g id="fond" transform="translate(39.000000, 20.000000)">
                <mask id="mask-6" fill="white">
                    <use xlink:href="#path-5"></use>
                </mask>
                <use id="oval" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-5"></use>
            </g>
            <g id="cadre" transform="translate(39.000000, 20.000000)">
                <mask id="mask-8" fill="white">
                    <use xlink:href="#path-7"></use>
                </mask>
                <g id="oval" fill-rule="nonzero">
                    <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-7"></use>
                    <use stroke="#F0F0F0" stroke-width="0.5" xlink:href="#path-7"></use>
                </g>
            </g>
        </g>
    </g>
</svg>`;
export default () => <SvgXml width="100%" height="100%" xml={xml} />;

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7

github_iconTop GitHub Comments

10reactions
wintercountercommented, Oct 3, 2020

Now I have the same problem on 12.1.0.

0reactions
Littleorcommented, Oct 8, 2022

This issue occuring again in 12.1.1

Same with me, is there any solution?

Read more comments on GitHub >

github_iconTop Results From Across the Web

import { SvgXml } from 'react-native-svg'; //SvgXml is undefined ...
Bug. Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got:  ...
Read more >
SvgXml inside react native storybook for web - Stack Overflow
In my case i use this package https://github.com/shamilovtim/react-native-svgxml-web and importing like this: import {SvgXml} from ...
Read more >
react-native-svg - npm
Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...). Easy to convert SVG code to react-native-svg.
Read more >
import { svgXml } from "react-native-svg"; Code Example
Answers related to “import { svgXml } from "react-native-svg";” ... properties of undefined (reading 'length') selectionlist react native ...
Read more >
Svg - Expo Documentation
react-native-svg allows you to use SVGs in your app, with support for ... npx expo install react-native-svg ... import * as Svg from...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

How can I render QR Code on a PDF?

Next page

Importing Different Images into the Image Component by path, url or base64.