How would you console log in Gatsby js? - reactjs

In any other environment console.log('hello world') should print in the terminal when the line of code is executed but in Gatsby Js no matter what I try or where I look to understand what's going on I'm still left confused. Could someone explain what's going on with Gatsby not allowing me to console log?

Solution: Needed to use the browser's console opposed to the terminal in which the app is running on. Came from React-Native where console logging would print in the terminal window running the app.

Related

I am new in reactjs and when i was trying to run my first react js project it showing error, it's showing error just after the setup

[these error are showing when i was try to run my first react project. I don't know how to fix please help.][1]
[1]: https://i.stack.imgur.com/Acb0i.pngstrong text
For me, the problem was another instance was running. Search for other react instance running and kill it. It should resume properly after.
Or this is happening because nothing is listening on your adresse:port

How can I debug a newly cloned React Native app

I am starting to help someone with a new project. This project is React (React Native as is a mobile app).
The project is working fine on her laptop (in her browser), and when I scan the Expo QR code, the app works fine on my Android device.
However, trying to run it in my browser is throwing all these errors:
The 'Can't resolve' error doesn't make sense, because the correct react native files are there. Is this a cache problem? I have tried deleting the .expo/web/cache folder and starting over.
Also, why are there multiple errors in my console, but only one being shown in the information on the actual web page? Does this mean that the single error being shown is causing all the other errors, or it is the only one which needs fixing, or will it show the next error when I fix the one that is being shown?
Thanks
Seems to have been a known problem re babel. See the links below:
https://github.com/babel/babel-loader/issues/173
how to solve this error You may need an appropriate loader to handle this file type

React expo error log is splitted by letters

I'm new in react, sorry for noob question ...
Something happens with error log. It was normal, readable and usefull. But in one moment it's getting like on screenshots. Someone knows what's affects on log output? Thanks.
Screen 1
Screen 2
It's react expo app on iPhone.
The reason is your expo is running in production mode (buildling release bundle). To get rid of that just switch to development (debug) mode.

Error logging in React ES6

I am running a react app (ES6). I am trying to find modules that will allow me to print error messages to my terminal console. All the modules I found simply printed the messages to the browser console.
Ah I see. Well when you want to do this and log them in a file you are better of using something like sentry (https://github.com/getsentry). Pretty sure that you can also stream the logs to you back-end!

Sencha touch app remains on blue loading screen when viewing on Android device or emulator

I just created a basic sencha app by
sencha generate app --name AndroidDemo --path ../demo
and I viewed it in browser and everything is perfect.
I then followed the instructions here: http://www.sencha.com/blog/android-setup-for-sencha-touch/
and compiled the app with Sencha Cmd and when the emulator opens I only get a blue loading screen.
I also tried compiling/building the app with phonegap on phonegap build site and the build finishes successfully and after loading the app in my andoid device, again I only see the loading page and it stays on this page and the app does not launch.
I'm completely clueless. Need your help friends.
Thanks,
In your app code may be miner syntax error or other error so while app run in emulator check log cat or other option run or app in chrome and check console log. Because loading screen display in case of error as my expression with this.
i'm having the exact same problem..
(currently on windows, btw)
while it's not exactly a solution,
a workaround that i did (out of desperation to see the rest of my app on the emulator):
is to just install it directly to the emulator using the "adb" command.
haven't tried this on a mac, but i'm guessing it's almost the same thing?
after building the app using "sencha" cmd, open cmd/terminal to the build directory.
-assuming you did not change the output location, the apk will be created in your
project root folder under this folder:
"build\native-package-mobile\MYAPPNAME\packager.json\"
make sure the emulator is already running
run the following in command/terminal at the folder where the apk is located:
adb install -r MYAPPNAME.apk
wait for awhile and it should say successfully installed.
run the app in the emulator and hopefully it will go beyond the loading screen.
I don't know why this issue is happening though.
(only started tinkering with android dev/sencha yesterday and it seems to be doing all in it's power to prevent me from running my app. haha)
please share if you find the correct fix for this :)
This usually happens when you build your version and you did not imbed all needed components.
For example, when you use ...
Ext.Image
... in your code.
While running without ...
Sencha app build xxx
... Sencha will grab the component from the touch/src components folder.
But at the time you build the app, it cannot reference to that folder any longer and Sencha will stall.
Please open the console and look out for a warning like this:
[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.MessageBox';
consider adding 'Ext.MessageBox' explicitly as a require of the
corresponding class
You need to add these to the requires section of either App.js or a class where you use the item (here Ext.Messagebox).
Another way to find out what is happening is to run the build code inside the browser and look into the console (so instead of localhost/myapp/index.html you run localhost/myapp/build/{package}/{myapp}/index.html).
There is one other thing that might happen. It’s the scope of async operations.
Like this:
Ext.defer(function() {this.log(‘all good’);}, 500);
this is not the scope of your class.
You need to use:
Ext.defer(function() {this.log(‘all good’);}, 500, this);
Or you might even use ...
Ext.bind()
...to bind the scope to the function.

Resources