InvalidCharacterError: String contains an invalid character

Hi,

Running a project with Expo, I am getting an InvalidCharacterError: String contains an invalid character error on the web rendering. Android works fine and I haven’t tested iOS.

I have the following dependencies in my package.json:

{
  ...
  "dependencies": {
    "expo": "~37.0.3",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-svg": "11.0.1",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0",
    "react-native-svg-transformer": "^0.14.3"
  }
}

Here is my App.js, the Bower SVG was taken from react-native-svg-example:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Bower from './assets/bower.svg';

export default function App() {
  return (
    <View style={styles.container}>
      <Bower width={256} height={256} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Does anyone have an idea of what’s going on?

Thanks

[jtojnar]

This transformer only seems to be used for Android and iOS.

For Web, I found that I needed the following webpack.config.js:

const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const { createAllLoaders } = require("@expo/webpack-config/loaders");

// Expo CLI will await this method so you can optionally return a promise.
module.exports = async (env, argv) => {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.module.rules = [
    // Enable svgr in web build.
    {
      oneOf: [
        {
          test: /\.svg$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "@svgr/webpack",
            },
          ],
        },
      ].concat(createAllLoaders(env)),
    },
  ];

  // Finally return the new config for the CLI to use.
  return config;
};

For completeness, this is what I added to package.json:

{
  "dependencies": {
    "react-native-svg": "^12.1.0"
  },
  "devDependencies": {
    "@expo/webpack-config": "^0.12.40",
    "@svgr/webpack": "^5.4.0",
    "react-native-svg-transformer": "^0.14.3",
 }
}

and for Android into metro.config.js:

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();

  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer"),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"],
    },
  };
})();

I also have added the following to app.json but have no idea if it is necessary:

{
  "expo": {
   "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": [
        "expo.ts",
        "expo.tsx",
        "expo.js",
        "expo.jsx",
        "ts",
        "tsx",
        "js",
        "jsx",
        "json",
        "wasm",
        "svg"
      ]
    }
  }
}

[pascalhuszar]

@Beetix did you found a solution or some kind of workaround? Have the same problem