Go to Chrome Devtools &amp;rarr; in the Chrome console, go to *Component* &amp;rarr; Click on *Settings* &amp;rarr; unset *Break on Warning*. Do the same in *Profiler* &amp;rarr; *Settings* &amp;rarr; unset *Break on warning*.

@cadoman pointed check and then uncheck to make work for sure.

P.S: Image from https://github.com/facebook/react/issues/19308#issuecomment-656669792

[![Enter image description here][1]][1]

  [1]: https://i.stack.imgur.com/nelFR.png



Based on pull request *[DevTools: Make break-on-warn off by default #19309][1]* it seems it&#39;s a bug.

The Break On Warnings box was unchecked for me and it still would break. Removing and readding the extension to force an update fixed it for me.

I don&#39;t know of another way to force Chrome to update an extension outside of its regular schedule.

  [1]: https://github.com/facebook/react/pull/19309







Go to your ReactDev tools in the tab Debugging and disable &quot;Break on Warning&quot;.



I think this new behavior started today with this new PR: https://github.com/facebook/react/pull/19048

It&#39;s a known issue. A workaround is posted on GitHub: *[Bug: Unexpected debugger statement in DevTools (solved) #19308][1]*

  [1]: https://github.com/facebook/react/issues/19308#issuecomment-656669792


The issue is due to a recent release. A Workaround proposed by the React team is:

 - Go to *Chrome Developer Tools*
 - Click on the *Components* Tab (React Developer Tools Extension)
 - Click on the *Settings* icon (located next to the component search box)
 - Once modal opens select the *Debugging* tab
 - Finally, double click on the *Break on Warnings* checkbox (check and unchecked)

Make sure at last the *Break on Warnings* checkbox is unchecked.

Reference: [Issue link][1]

[![Enter image description here][2]][2]

  [1]: https://github.com/facebook/react/issues/19308#issuecomment-656669792
  [2]: https://i.stack.imgur.com/yXZun.jpg




Chrome has a &quot;BlackBox script&quot; feature which is useful in this case.

 1. Go to Chrome Developer tools -&gt; source tab
 2. Select &quot;react_developer_tools.js&quot; from the left pane
 3. Right-click file and select &quot;Blackbox script&quot;


[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/hLa2O.png

Error on terminal: `nodemon.ps1` cannot be loaded because running scripts is disabled on this system. For more 
information, see **about_Execution_Policies** at 
[https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.2][1]

I have a solution to fix the issue by this way:  

`1. Open Windows PowerShell with Run as Administrator`  
`2. Run this command: Set-ExecutionPolicy Unrestricted`


That solves the issue, but this way the system shows Security Risk Warning.  
My question: Is there any other way to solve this without security risk? Target is to use `nodemon`.


  [1]: https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.2

How to fix error- nodemon.ps1 cannot be loaded because running scripts is disabled on this system, (without security risk)?

My App use the file paths of images provided by `Environment.getExternalStorageDirectory()` to create albums of photos, but with **Android 11 I won&#39;t be able to access directly files**.

According to the Android developers documentation they recently introduced the `MANAGE_EXTERNAL_STORAGE` permission, but I didn&#39;t understand if adding this permission I&#39;m able to continue to access file by Environment or not.

I tried my application on an Android 11 Virtual device and it seems to work perfectly even without requesting the `MANAGE_EXTERNAL_STORAGE` permission!

Reading the documentation on Android Developers, it seems that the applications that uses the File API for accessing Photos and Medias only locations can continue to work, but **I&#39;am not sure**. 

Is there anyone who better understood the Android Documentation???

Android 11 Scoped storage permissions

While developing with create-react-app, my browser enters debugger mode on warnings:

[![Paused in debugger][1]][1]

It breaks on the source code of react-dev-tools:

```javascript
   // --- Welcome to debugging with React DevTools ---
   // This debugger statement means that you&#39;ve enabled the &quot;break on warnings&quot; feature.
   // Use the browser&#39;s Call Stack panel to step out of this override function-
   // to where the original warning or error was logged.
```

How can I deactivate this behavior?

  [1]: https://i.stack.imgur.com/4FuvN.png





React dev tools - Deactivate &quot;break on warnings&quot;

While developing with create-react-app, my browser enters debugger mode on warnings:
<a href="https://i.stack.imgur.com/4FuvN.png" target="_blank" rel="noopener noreferrer"><img src="https://i.stack.imgur.com/4FuvN.png" alt="Paused in debugger"></a>
It breaks on the source code of react-dev-tools:
<pre><code class="hljs language-python"> // --- Welcome to debugging with React DevTools ---
 // This debugger statement means that you've enabled the "break on warnings" feature.
 // Use the browser's Call Stack panel to step out of this override function-
 // to where the original warning or error was logged.
</code></pre>
How can I deactivate this behavior?

useHistory giving this error:

&gt; Failed to compile ./src/pages/UserForm/_UserForm.js Attempted import
&gt; error: &#39;useHistory&#39; is not exported from &#39;react-router-dom&#39;. This
&gt; error occurred during the build time and cannot be dismissed.


react-router-dom version: 

&gt; 4.3.1

Code:

    import React, { useState, Fragment } from &#39;react&#39;;
    import FormUserDetails from &#39;./FormUserDetails&#39;;
    import FormPersonalDetails from &#39;./FormPersonalDetails&#39;;
    import Confirm from &#39;./Confirm&#39;;
    import Success from &#39;./Success&#39;;
    import Button from &#39;@material-ui/core/Button&#39;;
    import { Grid, makeStyles } from &#39;@material-ui/core&#39;;
    import { useHistory } from &#39;react-router-dom&#39;;
    
    
    function UserForm() {
        const [step, setStep] = useState(1);
        const history = useHistory();
    
    
        const StepButtons = (props) =&gt; (
            &lt;React.Fragment&gt;
                &lt;Grid item xs={4}&gt;
                    {props.value !== &#39;initial&#39; ?
                        &lt;Button variant=&quot;outlined&quot; className={classes.button} onClick={(e) =&gt; previousStep(e)}&gt;Back&lt;/Button&gt; :
                        &lt;Button variant=&quot;outlined&quot; className={classes.button} onClick={(e) =&gt; reGenerate(e)}&gt;Re-generate&lt;/Button&gt;
                    }
                &lt;/Grid&gt;
                &lt;Grid item xs={4} /&gt;
                &lt;Grid item xs={4}&gt;
                    {
                        props.value === &#39;confirm&#39; ?
                            &lt;Button variant=&quot;outlined&quot; className={classes.button} style={{ float: &quot;right&quot; }} onClick={(e) =&gt; confirm(e)}&gt;Confirm&lt;/Button&gt; :
                            props.value !== &#39;final&#39; ?
                                &lt;Button variant=&quot;outlined&quot; className={classes.button} style={{ float: &quot;right&quot; }} onClick={(e) =&gt; nextStep(e)}&gt;Continue&lt;/Button&gt; :
                                null
                    }
                &lt;/Grid&gt;
            &lt;/React.Fragment&gt;
    
        );
        const nextStep = (e) =&gt; {
            e.preventDefault();
            setStep(prevState =&gt; prevState + 1)
        }
        const previousStep = (e) =&gt; {
            e.preventDefault();
            setStep(prevState =&gt; prevState - 1)
        }
        const reGenerate = (e) =&gt; {
            e.preventDefault();
        }
        const confirm = (e) =&gt; {
            history.push(&#39;/&#39;)
        }
        return (
             &lt;div&gt;
                &lt;h1&gt;Hello&lt;/h1&gt;
             &lt;/div&gt;
        )
    }
    export default UserForm



Attempted import error: &#39;useHistory&#39; is not exported from &#39;react-router-dom&#39;

I&#39;m trying to figure out the difference between [NextJs][1] and [Create React App][2]. I know both are there to make our life easier while developing our Front-end Apps using [ReactJs][3].

After exploring some articles on Google, I found that the main difference is
 
&gt; NextJs provides server side rendering (SSR) while Create React App
&gt; provides client side rendering (CSR) and SSR improves performance of 
&gt; Application Loading.
&gt;

But what about other parameters from development perspective like 

**Maintainability and Scalability of the Web App developed with NextJS or CRA?**

 **Typescript and React Hooks/Redux support**? 

Or you can even Guide me if I&#39;m doing a wrong comparison?

  [1]: https://nextjs.org/
  [2]: https://create-react-app.dev/
  [3]: https://reactjs.org/
  [4]: https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8#:~:text=Here%20is%20a%20very%20simple,with%20links%20to%20your%20javascript.

What is the difference between NextJs and Create React App


I&#39;m trying to run very simple code, but I&#39;m getting an error, I didn&#39;t use the create react app!

It looks like my babel.config.js file is being ignored!

This is the structure of my small project:
[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/XovUB.png

My html file

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
        &lt;title&gt;ReactJS&lt;/title&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
        &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
        &lt;script  src = &#39;bundle.js&#39; &gt;&lt;/script&gt;
    &lt;/body&gt; 
    
    &lt;/html&gt;

My index.js file:

    import React from &#39;react&#39;;
    import { render } from &#39;react-dom&#39;;
    
    render(&lt;h1&gt;Hello World!!&lt;/h1&gt;, document.getElementById(&#39;app&#39;)); 

My package json:

    {
      &quot;name&quot;: &quot;front&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;main&quot;: &quot;index.js&quot;,
      &quot;license&quot;: &quot;MIT&quot;,
      &quot;scripts&quot;: {
        &quot;dev&quot;: &quot;webpack-dev-server --mode development&quot;,
        &quot;build&quot;: &quot;webpack-dev-server --mode production&quot;
      },
      &quot;dependencies&quot;: {
        &quot;@babel/cli&quot;: &quot;^7.10.5&quot;,
        &quot;@babel/core&quot;: &quot;^7.10.5&quot;,
        &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.10.4&quot;,
        &quot;@babel/preset-env&quot;: &quot;^7.10.4&quot;,
        &quot;@babel/preset-react&quot;: &quot;^7.10.4&quot;,
        &quot;react&quot;: &quot;^16.13.1&quot;,
        &quot;react-dom&quot;: &quot;^16.13.1&quot;,
        &quot;webpack&quot;: &quot;^4.43.0&quot;,
        &quot;webpack-cli&quot;: &quot;^3.3.12&quot;,
        &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.9.0&quot;,
        &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
        &quot;webpack-dev-server&quot;: &quot;^3.10.3&quot;
      }
    }

My webpack.config.js

    const path = require(&#39;path&#39;);
    
    module.exports = {
        entry: path.resolve(__dirname, &#39;src&#39;, &#39;index.js&#39;),
        output: {
            path: path.resolve(__dirname, &#39;public&#39;),
            filename: &#39;bundle.js&#39;
        },
        devServer: {
            contentBase: path.resolve(__dirname, &#39;public&#39;),
        },
        module: {
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: &#39;babel-loader&#39;,
                }
            }]
        },
    };

And this is my babel.config.js

    module.exports = {
        &quot;presets&quot;: [&quot;@babel/preset-env&quot;, &quot;@babel/preset-react&quot;]
    
    };

Error when

    yarn webpack-dev-server --mode development

    ERROR in ./src/index.js
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    SyntaxError: /root/treina/front/src/index.js: Support for the experimental syntax &#39;jsx&#39; isn&#39;t currently enabled (4:8):
    
      2 | import { render } from &#39;react-dom&#39;;
      3 | 
    &gt; 4 | render(&lt;h1&gt;Hello World!!&lt;/h1&gt;, document.getElementById(&#39;app&#39;));
        |        ^
    
    Add @babel/preset-react (https://git.io/JfeDR) to the &#39;presets&#39; section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the &#39;plugins&#39; section to enable parsing.
        at Parser._raise (/root/treina/front/node_modules/@babel/parser/lib/index.js:757:17)
        at Parser.raiseWithData (/root/treina/front/node_modules/@babel/parser/lib/index.js:750:17)
        at Parser.expectOnePlugin (/root/treina/front/node_modules/@babel/parser/lib/index.js:8849:18)
        at Parser.parseExprAtom (/root/treina/front/node_modules/@babel/parser/lib/index.js:10170:22)
        at Parser.parseExprSubscripts (/root/treina/front/node_modules/@babel/parser/lib/index.js:9688:23)
        at Parser.parseMaybeUnary (/root/treina/front/node_modules/@babel/parser/lib/index.js:9668:21)
        at Parser.parseExprOps (/root/treina/front/node_modules/@babel/parser/lib/index.js:9538:23)
        at Parser.parseMaybeConditional (/root/treina/front/node_modules/@babel/parser/lib/index.js:9511:23)
        at Parser.parseMaybeAssign (/root/treina/front/node_modules/@babel/parser/lib/index.js:9466:21)
        at Parser.parseExprListItem (/root/treina/front/node_modules/@babel/parser/lib/index.js:10846:18)
    ℹ ｢wdm｣: Failed to compile.



I&#39;m using yarn and the WSL terminal

Support for the experimental syntax &#39;jsx&#39; isn&#39;t currently enabled

I don&#39;t know why I am getting this error and I can&#39;t find an answer for it anywhere. I have uninstalled the `react-router-dom` package and reinstalled it, but it continues to tell me that the switch module is not exported from react-router-dom. Here&#39;s my code.

The error I&#39;m getting:

&gt; Attempted import error: &#39;Switch&#39; is not exported from &#39;react-router-dom&#39;.

### Code

```js
import React from &#39;react&#39;;
import &#39;./App.css&#39;;
import NavBar from &#39;./components/navbar.js&#39;;
import Footer from &#39;./components/footer.js&#39;;
import Home from &#39;./components/pages/homepage/home.js&#39;;
import { BrowserRouter as Router, Switch, Route, Link } from &#39;react-router-dom&#39;;

function App() {
  return (
    &lt;Router&gt;
      &lt;div className=&quot;app-container&quot;&gt;
        &lt;NavBar /&gt;
        &lt;Switch&gt;
          &lt;Route path=&quot;/home&quot; component={Home} /&gt;
        &lt;/Switch&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  );
}

export default App;


Attempted import error: &#39;Switch&#39; is not exported from &#39;react-router-dom&#39;

I am writing code for the delete confirmation for the user, but when I run it up it shows this error
[![enter image description here][1]][1]

This is my code for that 

    	onDelete = (id) =&gt; {
		  console.log(id);
		  if (confirm(&#39;You want to delette ?&#39;)) {
           //eslint-disable-line
			this.props.onDelete(id);
		  }
	    };

Can anyone explain it to me, Please? Although I have to add `//eslint-disable-line` but it does not work, my problem in here is when I add `//eslint-disable-line` beside `if (confirm(&#39;You want to delette ?&#39;)) {` like this 

    `if (confirm(&#39;You want to delette ?&#39;)) {//eslint-disable-line`

 

but when I save it, it show like this 

    if (confirm(&#39;You want to delette ?&#39;)) {
           //eslint-disable-line

, it automatically down the line, so that the reason display error above, I do not know how to **turn of the auto down line** when I save 


  [1]: https://i.stack.imgur.com/TzLNA.png

Content Type	Original Author	Original Content on Stackoverflow
Question	Noan Cloarec	View Question on Stackoverflow
Solution 1 - Reactjs	Naresh Kumar	View Answer on Stackoverflow
Solution 2 - Reactjs	Chris Weiss	View Answer on Stackoverflow
Solution 3 - Reactjs	Adriano Costa	View Answer on Stackoverflow
Solution 4 - Reactjs	Doug G	View Answer on Stackoverflow
Solution 5 - Reactjs	Malaji Nagaraju	View Answer on Stackoverflow
Solution 6 - Reactjs	Bidyashish Kumar	View Answer on Stackoverflow

React dev tools - Deactivate "break on warnings"

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

Solution 3 - Reactjs

Solution 4 - Reactjs

Solution 5 - Reactjs

Solution 6 - Reactjs

Android 11 Scoped storage permissions

How to fix error- nodemon.ps1 cannot be loaded because running scripts is disabled on this system, (without security risk)?

Attributions