SDK 35 `react-native-svg` does not exist in Haste module map

Upgraded to SDK Version: 35 and having some issues starting my project.

I was using Victory Native to build pie charts.

I am now encountering an error react-native-svg does not exist in Haste module map and I noticed in my node_modules that react-native-svg is not listed.

I can get the project to start if I comment out the pie chart imports. It would be a shame if I needed to find another compatible library with the updates.

I cleared all of my caches, removed and reinstalled node_modules, cleared my yarn cache, deleted my yarn.lock file, cleared watchman etc.

I am including my dependencies. Any help would be appreciated.

  "dependencies": {
    "@expo/vector-icons": "^10.0.5",
    "axios": "^0.19.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "color": "^2.0.0",
    "expo": "^35.0.0",
    "expo-font": "~7.0.0",
    "frisbee": "^3.0.0",
    "hoist-non-react-statics": "^2.3.0",
    "js-beautify": "^1.10.2",
    "moment": "^2.22.2",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-dropdownalert": "^3.1.2",
    "react-native-extended-stylesheet": "^0.8.0",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-indicators": "^0.13.0",
    "react-native-reanimated": "~1.2.0",
    "react-navigation": "^2.7.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-axios-middleware": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.3.0",
    "victory-native": "^33.0.0"
  }

I am also having issues with react-native-svg on sdk 35. have you found a solution yet?

Hey, no solution yet, still looking

can someone provide a minimal reproducible example please? How to create a Minimal, Reproducible Example - Help Center - Stack Overflow

@notbrent

in package.json -"victory-native": "^33.0.0"

The below component will crash my app with this error:

Unable to resolve module react-native-svg
react-native-svg does not exist in Haste module map.

import React from 'react'
import { View } from 'react-native';
import { VictoryPie } from 'victory-native';

class Test extends React.Component {
  constructor(props) {
    super(props)

  }

  render() {
    return(
      <View>
        <VictoryPie
          data={[
            { x: "Cats", y: 35 },
            { x: "Dogs", y: 40 },
            { x: "Birds", y: 55 }
          ]}
        />
      </View>
    )
  }
}

export default Test
1 Like

I can confirm. I get the following error with the above code (see below for a fix/workaround):

The development server returned response error code: 500

URL: http://192.168.1.9:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false

Body:
{"originModulePath":"/tmp/svg-not-in-haste-map/node_modules/victory-native/lib/components/victory-primitives/circle.js","targetModuleName":"react-native-svg","message":"Unable to resolve module `react-native-svg` from `/tmp/svg-not-in-haste-map/node_modules/victory-native/lib/components/victory-primitives/circle.js`: Module `react-native-svg` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.","errors":[{"description":"Unable to resolve module `react-native-svg` from `/tmp/svg-not-in-haste-map/node_modules/victory-native/lib/components/victory-primitives/circle.js`: Module `react-native-svg` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`."}],"name":"Error","stack":"Error: Unable to resolve module `react-native-svg` from `/tmp/svg-not-in-haste-map/node_modules/victory-native/lib/components/victory-primitives/circle.js`: Module `react-native-svg` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.\n    at ModuleResolver.resolveDependency (/tmp/svg-not-in-haste-map/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15)\n    at ResolutionRequest.resolveDependency (/tmp/svg-not-in-haste-map/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)\n    at DependencyGraph.resolveDependency (/tmp/svg-not-in-haste-map/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)\n    at Object.resolve (/tmp/svg-not-in-haste-map/node_modules/metro/src/lib/transformHelpers.js:261:42)\n    at /tmp/svg-not-in-haste-map/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31\n    at Array.map (<anonymous>)\n    at resolveDependencies (/tmp/svg-not-in-haste-map/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)\n    at /tmp/svg-not-in-haste-map/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33\n    at Generator.next (<anonymous>)\n    at asyncGeneratorStep (/tmp/svg-not-in-haste-map/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)"}
processBundleResult
    BundleDownloader.java:300
access$200
    BundleDownloader.java:37
onChunkComplete
    BundleDownloader.java:224
emitChunk
    MultipartStreamReader.java:76
readAllParts
    MultipartStreamReader.java:154
processMultipartResponse
    BundleDownloader.java:208
access$100
    BundleDownloader.java:37
onResponse
    BundleDownloader.java:169
execute
    RealCall.java:206
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1167
run
    ThreadPoolExecutor.java:641
run
    Thread.java:764

EDIT: The following fixes/works around the issue:

expo install react-native-svg
1 Like

indeed, expo install react-native-svg is necessary. i’m not sure what sdk version you updated from but as of sdk 34 we removed dependencies like react-native-svg, react-native-maps, etc from the expo package so you need to install them using expo install, see Expo SDK 34 is now available. Expo SDK v34.0.0 is out today and is… | by Eric Samelson | Exposition

1 Like

@wodin @notbrent

I appreciate the help, I upgraded from sdk 33 so missed the changes in 34!

I think it would be worth adding a note to that effect to the Installation section:

Installation

This API is pre-installed in managed apps. To use it in a bare React Native app, follow the react-native-svg installation instructions.

thanks for pointing that out, it’s incorrect and i’ll fix it right away!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.