ignite

ignite copied to clipboard

What's going on?

I have just created a new project using the ignite-cli (due to #1776 I manually created the .gitignore file). After starting the project using npm run start and scanning the QR code with my iPhone Xs I am receiving the following error

Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider

Stack trace:
  node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
  node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
  node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
  node_modules/expo/build/environment/react-native-logs.fx.js:27:4 in error
  node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
  node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
  node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
  node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
  node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
  node_modules/regenerator-runtime/runtime.js:294:29 in invoke
  node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
  node_modules/regenerator-runtime/runtime.js:155:27 in invoke
  node_modules/regenerator-runtime/runtime.js:165:18 in PromiseImpl.resolve.then$argument_0
  node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
  node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmediates
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in __guard$argument_0
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 in flushedQueue
  [native code]:null in flushedQueue
  [native code]:null in invokeCallbackAndReturnFlushedQueue

The app works fine in the browser, however I am consistently receiving this error when using my iPhone. I have removed the node_modules and re-run npm install, but this didn't change anything.

---

Steps to reproduce

1. Create new project using npx ignite-cli new igniteHelloWorld --expo
2. Run npm run start
3. Scan QR code shown in browser using iPhone Xs

---

npx ignite-cli doctor results:

System platform darwin
arch x64
cpu 8 cores Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
directory igniteHelloWorld /Users/pgerhard/DevTools/playground/igniteHelloWorld

JavaScript (and globally-installed packages) node 14.17.5 /Users/pgerhard/.nvm/versions/node/v14.17.5/bin/node npm 6.14.14 /Users/pgerhard/.nvm/versions/node/v14.17.5/bin/npm
expo-cli 4.11.0
ignite-cli 7.4.0
npm 6.14.14
yarn - not installed

Ignite ignite-cli 7.4.0 /Users/pgerhard/.nvm/versions/node/v14.17.5/bin/ignite
ignite src build /Users/pgerhard/.nvm/versions/node/v14.17.5/lib/node_modules/ignite-cli/build

Android java 11.0.11 /usr/bin/java android home - undefined

iOS xcode 12.4
cocoapods 1.9.1 /usr/local/bin/pod

Hey @pgerhard , I spun up a new app with expo and the latest ignite and couldn't reproduce the error by scanning the expo app to a real device.

My test device doesn't have a notch so it night not be even calling the RNCSafeAreaProvider.

Have a look at this SO thread https://stackoverflow.com/questions/64931250/invariant-violation-tried-to-register-two-views-with-the-same-name-rncsafeareap

I'm wondering if there's an issue with the latest react-navigation upgrade in react-native-screens.

Hi @pgerhard, have you solved this issue? i have the same problem here.

@markrickert: Thanks for the suggestion. I will try this and get back to you here.

@ironmanl: So far I haven't had the time to return to this issue. If you try the suggestion by @markrickert and it works I'd love to hear about it.

@pgerhard I have solved this issue, hope it will help

Basically there are two "react-native-safe-area-context" installed, one in the package.json and another one from expo.

Remove the "react-native-safe-area-context" from the package.json and run "npm install or yarn" again will solve the problem.

I believe that duplicate RNCSafeAreaProviders issue is what this line of code is attempting to avoid:

https://github.com/infinitered/ignite/blob/d900ef552b87050f5df71c3f732462bb05975f4b/src/commands/new.ts#L212-L214

I'm not sure why it wouldn't work in your case, though.

@jamonholmgren: I had a look at the ignite-cli that I have installed on my system (I updated to 7.5.0 in order to verify that it isn't something to do with an old version), and I can see the line you are referencing in the JS file. However I am still receiving the error when just spinning up a new project

@ironmanl: If I just remove the mentioned dependency from the package.json I receive the following error

Unable to resolve module react-native-safe-area-context from /Users/pgerhard/DevTools/playground/igniteHelloWorld/app/app.tsx: react-native-safe-area-context could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
  13 | import "./utils/ignore-warnings"
  14 | import React, { useState, useEffect } from "react"
> 15 | import { SafeAreaProvider, initialWindowMetrics } from "react-native-safe-area-context"
     |                                                         ^
  16 | import { initFonts } from "./theme/fonts" // expo
  17 | import * as storage from "./utils/storage"
  18 | import { useBackButtonHandler, AppNavigator, canExit, useNavigationPersistence } from "./navigators"

However, I did fix the issue by running npm dedupe. @jamonholmgren is there any clean way that duplicate dependencies could be avoided? I know that this is something that NPM allows, but such errors are incredibly weird and, in my eyes, hard to figure out. Maybe running npm dedupe as a part of the ignite-cli could be a temporary fix?

@pgerhard I think running npm dedupe is a fine solution to this. It'll slow down install a bit.

Note that this is only something that seems to happen to npm users (yarn dedupe gives this error: error The dedupe command isn't necessary. yarn install will already dedupe. So we don't need to run it for yarn users.

Want to submit a PR? :-)

@jamonholmgren yeah, thats true. Yarn already does the dedupe automatically. But somehow I feel that if we compare the number of NPM users to the number of those using Yarn it wont even be close. However, that may just be my perception.

I'll have a look in the next few days and submit a PR :)

P.S. Keep up the great work on the podcast 😄

There has been a lot of changes since this issue last had activity. This is going to be closed for now, but please re-open if this still needs attention.