how to solve code formatter problem in reactjs program? - reactjs

First Picture contains the program that I am trying to execute in the browser. When I press Ctrl+S to save my changes, vscode automatically changes the format style of the code.
Second Picture showing an error in vscode although it compiles and run successfully in the browser which shows the correct output.
I have tried to enable/disable the Prettier extension but nothing happened.
What is the cause for the problem: npm / react file / vs code.

change file format to javascript-react on the bottom toolbar

Related

appropriate loader to handle this file type only inside nodemodules

I am getting this error when trying to open a react native project on the web using expo. If I run expo start and use the cellphone, everything works fine. This only happens when I try to run on the web.
image
Looks like the error is on the line onValueChanged?.(low, high, false); but only happens inside node modules. If I try to use the same syntax inside a file in my project, the compiler works fine. Does someone know how I can fix it?

How do show the actual line in chrome console (Errors tab messages)?

I saw two similar questions, which are still no one answer, I would want to raise this question again.
Minified component stack trace in create-react-app (dev mode)
Create-react-app console shows chunk files
May I know how can display the actual line which causes the issue in the console? I tried to click the chunk.js file, which only redirects to the first line of its file.
Try the pretty print option to beautify the chunk.js file, which would then jump to the line causing the error (see the GIF below). You might still see the uglified variable names, if no source map is available.
More info:
https://www.canidev.tools/pretty-print-js

How to debug with breakpoints in React?

I'm using Chrome. For example I need Component.jsx and put a breakpoint somewhere. I press F12, select Sources tab, press Ctrl+P but all I get is 1.chunk.js, bundle.js and main.chunk.js. It's pretty inconvinient to search for the position in the files. Can someone help me to find a solution?
Have you setup your debugger right?
Assuming you use VSCode, you need to install chrome debugger extension and add vscode debugging configuration to make it work.
VSCode team has put up a nice tutorial here: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react

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

Why does the open source reload function not work?

I developed a new electron-angular project.
When I execute it everything is working fine.
But when I change something in the code, the executing does not updating. like I wrote a function that set x value to 3.
then I execute it and get the correct value. then I change the code to x=7 but still the executing shows x=3 until I close the electron window and execute again.
for this I find this command:
npm install electron-reload
and this code:
const electron = require('electron')
// Enable live reload for all the files inside your project directory
require('electron-reload')(__dirname);
then according to the website I found this stuff- it's supposed to be great. but it's not. can you help me with it?

Resources