[SOLVED] "React Native version mismatch" revisited

[jhanley]

I’ve been trying to figure this out for several hours without success.

I keep getting the infamous “React Native version mismatch” error after running “expo start”.

console error: "React Native version mismatch.

JavaScript version: 0.57.1
Native version: 0.55.4

..."

This is happening with new and existing projects.

I searched high and low for a solution. I found a bunch of references, but none of the proposed solutions work for me.

For instance I have tried deleting the node_modules directory and running npm install.

I even tried reinstalling nodejs, but alas no success.

I clearly did something to mess up my environment, but I don’t know what.

My system versioning is as follows:

$ expo --version
2.3.8

$ node -v
v10.13.0

$ npm -v
6.4.1

[jhanley]

After a good night sleep and a couple of hours later, I’m still struggling to get my environment stable.

I should mention this is on Windows 10. Admittedly, this is not ideal. I’d much rather be developing on iOS or Ubuntu, but that’s not possible at this time. That said, this issue seems unrelated to the development platform.

In any event, here’s my package.json:

{
  "name": "empty-project-template",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^31.0.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  }
}

Here’s my app.json:

{
  "expo": {
    "name": "test3",
    "description": "This project is really great.",
    "slug": "test3",
    "privacy": "public",
    "sdkVersion": "31.0.0",
    "platforms": ["ios", "android"],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    }
  }
}

[jmask]

Try matching the versioning on

    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz"

and

    "expo": "^31.0.2",

It’s a small version difference, but might solve the problem?

[jhanley]

@jmask thanks for your suggestion, but alas no luck.

  "dependencies": {
    "expo": "^31.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz"
  },

I tried reinstalling yarn:

rm -rf yarn.lock
rm -rf node_modules
yarn install

This produced the following output:

yarn install v1.12.1
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "win32" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "expo > react-native-reanimated@1.0.0-alpha.10" has incorrect peer dependency "react@16.0.0-alpha.6".
warning "expo > react-native-reanimated@1.0.0-alpha.10" has incorrect peer dependency "react-native@^0.44.1".
[4/4] Building fresh packages...

success Saved lockfile.
Done in 10.45s.

Yet the same console error persists:

console error: "React Native version mismatch.

JavaScript version: 0.57.1
Native version: 0.55.4

..."

[jhanley]

Just a quick follow-up to my previous posts.

I’ve been doing some additional digging and research, but I’m still getting the same aforementioned error.

I first installed everything on Monday, November 4, and it was working great.

I’m beginning to think my troubles started around Thursday after installing additional packages including Babel, Firebase and Redux. While these packages are well-known and established, I might have installed them incorrectly and/or from the wrong location (although the package installers are usually pretty smart in figuring out where everything is suppose to go and if any environmental configurations or additional dependencies are required.)

I got prompted a couple of times during the week to update expo. I started with version 2.3.6 with 2.3.7 and
2.3.8 following shortly thereafter. (Maybe in hindsight I should have waited to update. Or maybe I should just downgrade to version 2.3.6.)

I’m now grasping at straws trying to figure this out. I’ve tried a bunch of different things, which may or may not have made things worse.

Based on my searches, this issue appears to be a common problem in React Native development. But there doesn’t appear to be an definitive answer.

In any event, sorry for the ramblings. I would be grateful to anyone who can suggest a way to solve this.

[jhanley]

I should note an app starts without error the first time it’s executed with expo start. The aforementioned mismatch error appears after saving a change and the rebuild occurs.

[jhanley]

I’m still looking for a solution regarding this mismatch dilemma.

In the meantime I’m using an older stable build, but this issue is bound to crop up again. I would love to know how to fix it and/or avoid it from happening.

Pretty please and thank you.

[jhanley]

I added the “[SOLVED]” prefix to this issue title, but it’s really only somewhat solved.

I finally managed to get my environment running again. I ended up downgrading the versions of expo and react.

Here’s the relevant json changes:

Changed in package.json:

  "dependencies": {
    "expo": "^30.0.0",
    "react": "16.4.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz"
  }

Changed in app.json:

"sdkVersion": "30.0.0",

I also removed the following (at least temporarily) from packag.json:

  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  }

After deleting node_modules and running npm install (for the umpteenth time) I’m finally able to make changes and automatically rebuild the app without the mismatch error.

Admittedly this is not ideal, but I’m going to roll with it for now until my familiarity with all the intricate configuration nuances increases.

Alas, I’ve been down this road many times. That is, suffering the slings and arrows from working with evolving technologies. Ultimately the rewards outweigh the setbacks. Like childbirth, you forget all the pain once you’re finally holding your healthy new bundle of joy (aka. published app).

Cheers,

John

[jhanley]

I restored babel in my project by simply adding the following to package.json:

  "devDependencies": {
    "@babel/core": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0"
  }

Sorry if this seems obvious to some, but getting a handle on all the packages and dependencies takes time.

[jhanley]

Sorry about all the posts, but now new projects created with the current default values in package.json and app.json run as expected without any fuss. Perhaps it was some kind of caching weirdness (?)

I like to understand why something is OR is not working, but in the meantime I can (finally) forge ahead.

[adamjnav]

@jhanley Glad you are finally able to forge ahead once more. I’m thinking it may have been a caching issue. It isn’t a terrible idea to clear the cache every now and then when developing by running expo start -c.

Cheers,

Adam

[jhanley]

@adamjnav I just wanted to quickly update this issue.

Despite my best efforts, I was never able to obtain a stable React Native & Expo development environment on Windows 10. I kept running into dependency and permission issues. I finally gave up and pulled the trigger on a shiny new MacBook Pro. While I will still use my desktop PC for certain things (like gaming), the MacBook Pro is just better suited for most kinds of development.