Fix for Error when using React-Native-Web or Expo Web

[zaptrem]

trafficstars

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I was getting an error

Something went wrong:
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 `GenerateSvgComponent`.

When rendering a formula using Expo Web SDK 43. I found this issue in react-native-svg explaining the issue was related to disagreement about the implementation of SvgFromXml/SvgXml on web. Someone forked the project and made a pull request here. I switched to using their branch here.

Also, now instead of expo install react-native-svg I do npm install @cantoo/rn-svg

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-mathjax-html-to-svg/index.js b/node_modules/react-native-mathjax-html-to-svg/index.js
index 1f43e94..782fd13 100644
--- a/node_modules/react-native-mathjax-html-to-svg/index.js
+++ b/node_modules/react-native-mathjax-html-to-svg/index.js
@@ -1,6 +1,6 @@
 import React, { memo, Fragment } from 'react';
 import { Text, View } from 'react-native';
-import { SvgFromXml } from 'react-native-svg';
+import { SvgXml } from '@cantoo/rn-svg'
 import { decode } from 'html-entities';
 import { cssStringToRNStyle } from './HTMLStyles';
 
@@ -82,7 +82,7 @@ const GenerateSvgComponent = ({ item, fontSize, color }) => {
     svgText = applyColor(svgText, color);
 
     return (
-        <SvgFromXml xml={svgText}/>
+        <SvgXml xml={svgText}/>
     );
 };
 

This issue body was partially generated by patch-package.

[wtrevena]

Thanks @zaptrem , your fix worked for me as well (I am working on Expo web).