Crash between react-native-navigation and yarn-workspace - react-native

🐛 Bug Report
Hello
My project with Yarn Workspace crashes once I add RNN. I tried with and without Yarn Workspace and it seems to be the issue. I made a demo for testing purpose.
Know that I tried this several times.
To Reproduce
Step 1: install react-native
Step 2: Configure yarn workspace for RN with 2 packages (see demo: package.json files and metro.config.js).
Step 3: yarn add react-native-navigation in one repo
Step 4: npx rnn-link (each step is successful)
Step 5: change index.js to have RNN deal with the App Launch with one route
Step 6: pod install
Step 7: run project with XCode or with yarn android
Expected behavior
Working on both platform.
Actual Behavior
Android: black screen loading instead of the splashscreen for a few seconds, then crashes with those weird logs.
iOS crashes faster with (mostly) the same logs:
ERROR Invariant Violation: No callback found with cbID 0 and callID 0 for module <unknown>. Args: '[{"app_state":"active"}]'
ERROR Invariant Violation: No callback found with cbID 6 and callID 3 for module <unknown>. Args: '[{"app_state":"active"}]'
ERROR Invariant Violation: No callback found with cbID 60 and callID 30 for module <unknown>. Args: '["{\"codeFrame\":{\"content\":\"\\u001b[0m \\u001b[90m 36 |\\u001b[39m \\u001b[36mvar\\u001b[39m args \\u00...(truncated)..."]'
ERROR Invariant Violation: No callback found with cbID 62 and callID 31 for module <unknown>. Args: '["{\"codeFrame\":{\"content\":\"\\u001b[0m \\u001b[90m 20 |\\u001b[39m }\\u001b[0m\\n\\u001b[0m \\u001b[90m 21 |...(truncated)..."]'
ERROR Invariant Violation: No callback found with cbID 68 and callID 34 for module <unknown>. Args: '["{\"codeFrame\":{\"content\":\"\\u001b[0m \\u001b[90m 36 |\\u001b[39m \\u001b[36mvar\\u001b[39m args \\u00...(truncated)..."]'
ERROR Invariant Violation: No callback found with cbID 98 and callID 49 for module <unknown>. Args: '["{\"codeFrame\":{\"content\":\"\\u001b[0m \\u001b[90m 20 |\\u001b[39m }\\u001b[0m\\n\\u001b[0m \\u001b[90m 21 |...(truncated)..."]'
ERROR Invariant Violation: No callback found with cbID 102 and callID 51 for module <unknown>. Args: '["{\"codeFrame\":{\"content\":\"\\u001b[0m \\u001b[90m 36 |\\u001b[39m \\u001b[36mvar\\u001b[39m args \\u00...(truncated)..."]'
ERROR Invariant Violation: No callback found with cbID 16 and callID 8 for module <unknown>. Args: '["Stack2"]'
ERROR Invariant Violation: No callback found with cbID 138 and callID 69 for module <unknown>. Args: '["{\"codeFrame\":{\"content\":\"\\u001b[0m \\u001b[90m 36 |\\u001b[39m \\u001b[36mvar\\u001b[39m args \\u00...(truncated)..."]'
LOG Running "com.myApp.WelcomeScreen" with {"initialProps":{"componentId":"Component1"},"rootTag":1}
ERROR Invariant Violation: No callback found with cbID 160 and callID 80 for module <unknown>. Args: '["{\"codeFrame\":{\"content\":\"\\u001b[0m \\u001b[90m 20 |\\u001b[39m }\\u001b[0m\\n\\u001b[0m \\u001b[90m 21 |...(truncated)..."]'
ERROR Invariant Violation: No callback found with cbID 164 and callID 82 for module <unknown>. Args: '["{\"codeFrame\":{\"content\":\"\\u001b[0m \\u001b[90m 36 |\\u001b[39m \\u001b[36mvar\\u001b[39m args \\u00...(truncated)..."]'
and it goes on and on and on...
Your Environment
React Native Navigation version: 7.14.0
React Native version: 0.64.0
Device info: Xiaomi Redmi Note 7 or Android Emulator or Xcode Simulator
Reproducible Demo
https://gitlab.com/kanso-team/rnn-yw-repro
Any clue appreciated.
Maybe it is related to my config of yarn workspace, but my config works normally without RNN...

For those interested, I fixed it in my yarn workspace configuration. In my package.json:
"nohoist": [ "**/*/**" ]

Related

React native/ Uncaught Invariant Violation: __fbBatchedBridgeConfig is not set, cannot invoke native modules

I'm facing this issue since some days
when i compile an web version (npx expo export:web)
i got this
Compiled with warnings
./node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:66:10
Attempted import error: './_EmitterSubscription' does not contain a default export (imported as 'EmitterSubscription').
64 | return (this._subscriber.addSubscription(
65 | eventType,
> 66 | new EmitterSubscription(this, this._subscriber, listener, context),
| ^
67 | ): $FlowFixMe);
68 | }
69 |
once compiled when i'm testing it i got this error in console:
browser.js:38 Uncaught Invariant Violation: __fbBatchedBridgeConfig is not set, cannot invoke native modules
also i did npm install in the project folder

node-sass [watch] Error: Undefined operation:

I wasn't able to use scss. How can I fix this?
Node v16.15.1
npm 8.11.0
node-sass 6.0
[watch] Error: Undefined operation: "calc(375/750) times 6rem".
[watch] on line 12 of src/css/tools/_function.scss, in function `getsp375`
[watch] from line 15 of src/css/common/_title.scss, in mixin `#content`
[watch] from line 59 of src/css/tools/_mixin.scss, in mixin `sp`
[watch] from line 14 of src/css/common/_title.scss
[watch] from line 8 of src/css/main.scss
[watch] >> $result: calc(375/750) * $val;
[watch] -----------^
[watch]
[watch:ts]
[watch:ts] 3:56:12 PM - Found 0 errors. Watching for file changes.

npm - gulp-sass no longer has a default Sass compiler; please set one yourself

Keep getting this error when trying to build templates
[09:21:08] Requiring external module babel-register
[09:21:19] Using gulpfile ~/GIT/Newsletters/gulpfile.babel.js
[09:21:19] Starting 'build'...
[09:21:19] Starting 'clean'...
[09:21:19] Finished 'clean' after 5.98 ms
[09:21:19] Starting 'pages'...
[09:21:20] Finished 'pages' after 1.96 s
[09:21:20] Starting 'sass'...
Error in plugin "gulp-sass"
Message:
gulp-sass no longer has a default Sass compiler; please set one yourself.
Both the "sass" and "node-sass" packages are permitted.
For example, in your gulpfile:
const sass = require('gulp-sass')(require('sass'));
When I then add const sass = require('gulp-sass')(require('sass')); in my gulpfile.js
It gives this error
[09:41:01] Requiring external module babel-register
{ TypeError: /Users/lde4k1v/GIT/Newsletters/gulpfile.babel.js: Duplicate declaration "sass"
76 |
77 | // Compile Sass into CSS
> 78 | function sass() {
| ^
79 | return gulp.src('src/assets/scss/app.scss')
80 | .pipe($.if(!PRODUCTION, $.sourcemaps.init()))
81 | .pipe($.sass({
Here is my full gulpfile.babel.js
Can someone help me out :( already searched quite some time on it and can't find seem to fix it sadly

How to install react-native-vector-icons?

I literally tried all the resources I could find
This, This, and so many other questions on stack overflow here
but I'm not able to get it to work
I first used the
react-native init myapp
Command to start a project and install the react-native-vector-icons as instructed on its github page
I have imported the FontAwesome family like this
import Icon from 'react-native-vector-icons/FontAwesome';
But when ever i run the app I get this error on both android and ios
On Android
The development server returned response error code: 500
URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false
Body:
{"type":"InternalError","errors":[],"message":"Metro Bundler has encountered an internal error, please check your terminal error output for more details"}
processBundleResult
BundleDownloader.java:242
access$100
BundleDownloader.java:41
onResponse
BundleDownloader.java:208
execute
RealCall.java:135
run
NamedRunnable.java:32
runWorker
ThreadPoolExecutor.java:1112
run
ThreadPoolExecutor.java:587
run
Thread.java:818
On iOS
Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Metro Bundler has encountered an internal error, please check your terminal error output for more details (null))
__38-[RCTCxxBridge loadSource:onProgress:]_block_invoke.242
RCTCxxBridge.mm:419
___ZL36attemptAsynchronousLoadOfBundleAtURLP5NSURLU13block_pointerFvP18RCTLoadingProgressEU13block_pointerFvP7NSErrorP9RCTSourceE_block_invoke.118
__80-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]_block_invoke
-[RCTMultipartStreamReader emitChunk:headers:callback:done:]
-[RCTMultipartStreamReader readAllPartsWithCompletionCallback:progressCallback:]
-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]
__88-[NSURLSession delegate_streamTask:didBecomeInputStream:outputStream:completionHandler:]_block_invoke
__NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK__
-[NSBlockOperation main]
-[__NSOperationInternal _start:]
_dispatch_client_callout
_dispatch_block_invoke_direct
_dispatch_client_callout
_dispatch_block_invoke_direct
dispatch_block_perform
__NSOQSchedule_f
_dispatch_client_callout
_dispatch_continuation_pop
_dispatch_async_redirect_invoke
_dispatch_root_queue_drain
_dispatch_worker_thread3
_pthread_wqthread
start_wqthread
And on the debugging console I get this errors
deltaUrlToBlobUrl.js:31 GET http://localhost:8081/index.delta?platform=android&dev=true&minify=false 500 (Internal Server Error)
DeltaPatcher.js:58 Uncaught (in promise) Error: DeltaPatcher should receive a fresh Delta when being initialized
at DeltaPatcher.applyDelta (DeltaPatcher.js:58)
at deltaUrlToBlobUrl (deltaUrlToBlobUrl.js:34)
at <anonymous>
I'll be very glad if I could get it working. Thanks in advance.
I finally found the solution
This happens only in the react-native version 0.52.0
The file it is trying to find does in fact declare that module. Something about the order of file searching must have changed with the recent release.
Try this
rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json
Link 1, Link 2
Use npm you can install it in a easy way.Follow the below commonds in the root folder:
* npm install react-native-vector-icons
* react-native link

Runing App in Simulator(IOS) i am getting this issue

I am attaching below what error i am getting
[ERROR] : certificate has expired
2017-10-14T05:46:30.298Z | TRACE | titanium exited with exit code 100
2017-10-14T05:46:30.299Z | ERROR | Error: ti run exited with error code 100
at ChildProcess. (/Users/balakrishna/.appcelerator/install/5.1.0/package/node_modules/appc-cli-titanium/plugins/run.js:92:66)
at ChildProcess.emit (events.js:110:17)
at Process.ChildProcess._handle.onexit (child_process.js:1074:12)
2017-10-14T05:46:30.300Z | TRACE | Sending exit signal to titanium process: 2240
Update your CLI/dev environment: appc setup && appc use latest