[This is the PR][1] where they added that feat. They didn&#39;t provide a better UI due to some performance constraints. But you can find what hooks those indexes correspond to if you go to the components tab in dev tools and inspect said component; in the hooks section, you&#39;ll have a tree of the called hooks, and for each hook, a small number at the left which is the index. You&#39;ll probably need to unfold the tree of hooks to find them.

Here&#39;s a screenshot from the linked PR

[![enter image description here][2]][2]


  [1]: https://github.com/facebook/react/pull/20998
  [2]: https://i.stack.imgur.com/TRsa1.png

I tried to run it and it said an error like the title. and 
this is my code: 
 ```
const URI = process.env.MONGODB_URL;

mongoose.connect(URI, {
    useCreateIndex: true, 
    useFindAndModify: false, 
    useNewUrlParser: true, 
    useUnifiedTopology: true 
}, err =&gt; {
    if(err) throw err;
    console.log(&#39;Connected to MongoDB!!!&#39;)
})
```

I set the MONGODB_URL in .env :
```
MONGODB_URL = mongodb+srv://username:&lt;password&gt;@cluster0.accdl.mongodb.net/website?retryWrites=true&amp;w=majority
```
How to fix it?

MongoParseError: options useCreateIndex, useFindAndModify are not supported

I&#39;m facing a weird issue. Before I updated my Android Studio, everything went fine in flutter doctor. Once I&#39;ve updated Android Studio, when I run the doctor, it&#39;s showing &quot;Unable to find bundled Java version&quot;. I&#39;ve already downloaded Java installer and installed it on my M1 Mac, but after I restarted, running flutter doctor still shows the same error. The weird thing is, when I uninstall the Arctic Fox version and re-install the older Android Studio version, everything goes fine again when running the doctor. How can I resolve this?

Unable to find bundled Java version with flutter doctor, after updating Android studio Arctic Fox(2020.3.1) on M1 Apple Silicon

I have a react.js app that I want to profile for performance issues.

I&#39;m using the react dev tool profiler in firefox.

I profile a specific interaction and get the flamegraph and the ranked time graph in the dev tool.

Then this message shows up in the dev tool:

[![enter image description here][1]][1]

This part of the dev tool is not interactive, and I can&#39;t find anything on how the hooks are numbered.

How do I interpret these numbers? What do they correspond to? Where can I find the information on what hooks they refer to?


  [1]: https://i.stack.imgur.com/0uu0V.png

What does the hook numbers in the Reactjs Dev tool correspond to?

I have a react.js app that I want to profile for performance issues.
I'm using the react dev tool profiler in firefox.
I profile a specific interaction and get the flamegraph and the ranked time graph in the dev tool.
Then this message shows up in the dev tool:
<a href="https://i.stack.imgur.com/0uu0V.png" target="_blank" rel="noopener noreferrer"><img src="https://i.stack.imgur.com/0uu0V.png" alt="enter image description here"></a>
This part of the dev tool is not interactive, and I can't find anything on how the hooks are numbered.
How do I interpret these numbers? What do they correspond to? Where can I find the information on what hooks they refer to?

When I `console.log()`, the Chrome console gives the log but instead of showing the file and line number it just says `react_devtools_backend.js:4049`. How do I get the console to show the file and line number when I `console.log()`?

![screenshot of console output showing &quot;react_devtools_backend.js:4049&quot; in place of a correct file and line number][1]

  [1]: https://i.stack.imgur.com/ChxIZ.png

Why is console.log() showing react_devtools_backend.js:4049 instead of the file and line number?

I am currently setting up a boilerplate with React, Typescript, styled components, webpack etc. and I am getting an error when trying to run eslint:

&gt; Error: Must use import to load ES Module

Here is a more verbose version of the error:

    /Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts
      0:0  error  Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js
    require() of ES modules is not supported.
    require() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains &quot;type&quot;: &quot;module&quot; which defines all .js files in that package scope as ES modules.
    Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove &quot;type&quot;: &quot;module&quot; from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json

The error occurs in every single one of my .js and .ts/ .tsx files where I only use `import` or the file doesn&#39;t even have an import at all. I understand what the error is saying but I have no idea why it is being thrown when in fact I only use imports or even no imports at all in some files.

Here is my package.json where I trigger the linter from using `npm run lint:eslint:quiet`:

    {
      &quot;name&quot;: &quot;my-react-boilerplate&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;description&quot;: &quot;&quot;,
      &quot;main&quot;: &quot;index.tsx&quot;,
      &quot;directories&quot;: {
        &quot;test&quot;: &quot;test&quot;
      },
      &quot;engines&quot;: {
        &quot;node&quot;: &quot;&gt;=14.0.0&quot;
      },
      &quot;type&quot;: &quot;module&quot;,
      &quot;scripts&quot;: {
        &quot;build&quot;: &quot;webpack --config webpack.prod.js&quot;,
        &quot;dev&quot;: &quot;webpack serve --config webpack.dev.js&quot;,
        &quot;lint&quot;: &quot;npm run typecheck &amp;&amp; npm run lint:css &amp;&amp; npm run lint:eslint:quiet&quot;,
        &quot;lint:css&quot;: &quot;stylelint &#39;./src/**/*.{js,ts,tsx}&#39;&quot;,
        &quot;lint:eslint:quiet&quot;: &quot;eslint --ext .ts,.tsx,.js,.jsx  ./src --no-error-on-unmatched-pattern --quiet&quot;,
        &quot;lint:eslint&quot;: &quot;eslint --ext .ts,.tsx,.js,.jsx  ./src --no-error-on-unmatched-pattern&quot;,
        &quot;lint:eslint:fix&quot;: &quot;eslint --ext .ts,.tsx,.js,.jsx  ./src --no-error-on-unmatched-pattern --quiet --fix&quot;,
        &quot;test&quot;: &quot;cross-env NODE_ENV=test jest --coverage&quot;,
        &quot;test:watch&quot;: &quot;cross-env NODE_ENV=test jest --watchAll&quot;,
        &quot;typecheck&quot;: &quot;tsc --noEmit&quot;,
        &quot;precommit&quot;: &quot;npm run lint&quot;
      },
      &quot;lint-staged&quot;: {
        &quot;*.{ts,tsx,js,jsx}&quot;: [
          &quot;npm run lint:eslint:fix&quot;,
          &quot;git add --force&quot;
        ],
        &quot;*.{md,json}&quot;: [
          &quot;prettier --write&quot;,
          &quot;git add --force&quot;
        ]
      },
      &quot;husky&quot;: {
        &quot;hooks&quot;: {
          &quot;pre-commit&quot;: &quot;npx lint-staged &amp;&amp; npm run typecheck&quot;
        }
      },
      &quot;resolutions&quot;: {
        &quot;styled-components&quot;: &quot;^5&quot;
      },
      &quot;author&quot;: &quot;&quot;,
      &quot;license&quot;: &quot;ISC&quot;,
      &quot;devDependencies&quot;: {
        &quot;@babel/core&quot;: &quot;^7.5.4&quot;,
        &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.5.0&quot;,
        &quot;@babel/preset-env&quot;: &quot;^7.5.4&quot;,
        &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;,
        &quot;@types/history&quot;: &quot;^4.7.6&quot;,
        &quot;@types/react&quot;: &quot;^17.0.29&quot;,
        &quot;@types/react-dom&quot;: &quot;^17.0.9&quot;,
        &quot;@types/react-router&quot;: &quot;^5.1.17&quot;,
        &quot;@types/react-router-dom&quot;: &quot;^5.1.5&quot;,
        &quot;@types/styled-components&quot;: &quot;^5.1.15&quot;,
        &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^5.0.0&quot;,
        &quot;babel-cli&quot;: &quot;^6.26.0&quot;,
        &quot;babel-eslint&quot;: &quot;^10.0.2&quot;,
        &quot;babel-loader&quot;: &quot;^8.0.0-beta.6&quot;,
        &quot;babel-polyfill&quot;: &quot;^6.26.0&quot;,
        &quot;babel-preset-env&quot;: &quot;^1.7.0&quot;,
        &quot;babel-preset-react&quot;: &quot;^6.24.1&quot;,
        &quot;babel-preset-stage-2&quot;: &quot;^6.24.1&quot;,
        &quot;clean-webpack-plugin&quot;: &quot;^4.0.0&quot;,
        &quot;dotenv-webpack&quot;: &quot;^7.0.3&quot;,
        &quot;error-overlay-webpack-plugin&quot;: &quot;^1.0.0&quot;,
        &quot;eslint&quot;: &quot;^8.0.0&quot;,
        &quot;eslint-config-airbnb&quot;: &quot;^18.2.0&quot;,
        &quot;eslint-config-prettier&quot;: &quot;^8.3.0&quot;,
        &quot;eslint-config-with-prettier&quot;: &quot;^6.0.0&quot;,
        &quot;eslint-plugin-compat&quot;: &quot;^3.3.0&quot;,
        &quot;eslint-plugin-import&quot;: &quot;^2.25.2&quot;,
        &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.2.3&quot;,
        &quot;eslint-plugin-prettier&quot;: &quot;^4.0.0&quot;,
        &quot;eslint-plugin-react&quot;: &quot;^7.14.2&quot;,
        &quot;eslint-plugin-react-hooks&quot;: &quot;^4.2.0&quot;,
        &quot;extract-text-webpack-plugin&quot;: &quot;^3.0.2&quot;,
        &quot;file-loader&quot;: &quot;^6.2.0&quot;,
        &quot;html-webpack-plugin&quot;: &quot;^5.3.2&quot;,
        &quot;husky&quot;: &quot;^7.0.2&quot;,
        &quot;prettier&quot;: &quot;^2.4.1&quot;,
        &quot;raw-loader&quot;: &quot;^4.0.2&quot;,
        &quot;style-loader&quot;: &quot;^3.3.0&quot;,
        &quot;stylelint&quot;: &quot;^13.13.1&quot;,
        &quot;stylelint-config-recommended&quot;: &quot;^5.0.0&quot;,
        &quot;stylelint-config-styled-components&quot;: &quot;^0.1.1&quot;,
        &quot;stylelint-processor-styled-components&quot;: &quot;^1.10.0&quot;,
        &quot;ts-loader&quot;: &quot;^9.2.6&quot;,
        &quot;tslint&quot;: &quot;^6.1.3&quot;,
        &quot;typescript&quot;: &quot;^4.4.4&quot;,
        &quot;url-loader&quot;: &quot;^4.1.1&quot;,
        &quot;webpack&quot;: &quot;^5.58.2&quot;,
        &quot;webpack-cli&quot;: &quot;^4.2.0&quot;,
        &quot;webpack-dev-server&quot;: &quot;^4.3.1&quot;,
        &quot;webpack-merge&quot;: &quot;^5.3.0&quot;
      },
      &quot;dependencies&quot;: {
        &quot;history&quot;: &quot;^4.10.0&quot;,
        &quot;process&quot;: &quot;^0.11.10&quot;,
        &quot;react&quot;: &quot;^17.0.1&quot;,
        &quot;react-dom&quot;: &quot;^17.0.1&quot;,
        &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
        &quot;styled-components&quot;: &quot;^5.2.1&quot;
      }
    }

Here is my .eslintrc file:

    {
      &quot;extends&quot;: [&quot;airbnb&quot;, &quot;prettier&quot;],
      &quot;parser&quot;: &quot;babel-eslint&quot;,
      &quot;plugins&quot;: [&quot;prettier&quot;, &quot;@typescript-eslint&quot;],
      &quot;parserOptions&quot;: {
        &quot;ecmaVersion&quot;: 8,
        &quot;ecmaFeatures&quot;: {
          &quot;experimentalObjectRestSpread&quot;: true,
          &quot;impliedStrict&quot;: true,
          &quot;classes&quot;: true
        }
      },
      &quot;env&quot;: {
        &quot;browser&quot;: true,
        &quot;node&quot;: true,
        &quot;jest&quot;: true
      },
      &quot;rules&quot;: {
        &quot;arrow-body-style&quot;: [&quot;error&quot;, &quot;as-needed&quot;],
        &quot;class-methods-use-this&quot;: 0,
        &quot;react/jsx-filename-extension&quot;: 0,
        &quot;global-require&quot;: 0,
        &quot;react/destructuring-assignment&quot;: 0,
        &quot;import/named&quot;: 2,
        &quot;linebreak-style&quot;: 0,
        &quot;import/no-dynamic-require&quot;: 0,
        &quot;import/no-named-as-default&quot;: 0,
        &quot;import/no-unresolved&quot;: 2,
        &quot;import/prefer-default-export&quot;: 0,
        &quot;semi&quot;: [2, &quot;always&quot;],
        &quot;max-len&quot;: [
          &quot;error&quot;,
          {
            &quot;code&quot;: 80,
            &quot;ignoreUrls&quot;: true,
            &quot;ignoreComments&quot;: true,
            &quot;ignoreStrings&quot;: true,
            &quot;ignoreTemplateLiterals&quot;: true
          }
        ],
        &quot;new-cap&quot;: [
          2,
          {
            &quot;capIsNew&quot;: false,
            &quot;newIsCap&quot;: true
          }
        ],
        &quot;no-param-reassign&quot;: 0,
        &quot;no-shadow&quot;: 0,
        &quot;no-tabs&quot;: 2,
        &quot;no-underscore-dangle&quot;: 0,
        &quot;react/forbid-prop-types&quot;: [
          &quot;error&quot;,
          {
            &quot;forbid&quot;: [&quot;any&quot;]
          }
        ],
        &quot;import/no-extraneous-dependencies&quot;: [&quot;error&quot;, { &quot;devDependencies&quot;: true }],
        &quot;react/jsx-no-bind&quot;: [
          &quot;error&quot;,
          {
            &quot;ignoreRefs&quot;: true,
            &quot;allowArrowFunctions&quot;: true,
            &quot;allowBind&quot;: false
          }
        ],
        &quot;react/no-unknown-property&quot;: [
          2,
          {
            &quot;ignore&quot;: [&quot;itemscope&quot;, &quot;itemtype&quot;, &quot;itemprop&quot;]
          }
        ]
      }
    }

And i&#39;m not sure if relevant but also my tsconfig.eslint.json file:

    {
      &quot;extends&quot;: &quot;./tsconfig.json&quot;,
      &quot;include&quot;: [&quot;./src/**/*.ts&quot;, &quot;./src/**/*.tsx&quot;, &quot;./src/**/*.js&quot;],
      &quot;exclude&quot;: [&quot;node_modules/**&quot;, &quot;build/**&quot;, &quot;coverage/**&quot;]
    }

Not sure if anyone has come across this before? Googling the error does not present any useful forums or raised bugs, most of them just state not to use `require` in your files which I am not.
 

ESlint - Error: Must use import to load ES Module

I created the default IntelliJ IDEA React project and got this:

```lang-none
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/user/Programming Documents/WebServer/untitled/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^
```

It seems to be a recent issue - *[webpack ran into this 4 days ago and is still working on it][1]*.

  [1]: https://github.com/webpack/webpack/issues/14532
  [2]: https://stackoverflow.com/q/69934942/14994086



Error message &quot;error:0308010C:digital envelope routines::unsupported&quot;

This is a React web app. When I run 

    npm start

This error occurred

    &gt; dataflow@0.1.0 start
    &gt; react-scripts start
    
    node:internal/modules/cjs/loader:488
          throw e;
      ^
    
    Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath &#39;./lib/tokenize&#39; is not defined by &quot;exports&quot; in /Users/juliantc/Desktop/ai-studio/development/frontend/node_modules/postcss-safe-parser/node_modules/postcss/package.json
        at new NodeError (node:internal/errors:371:5)
        at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
        at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
        at resolveExports (node:internal/modules/cjs/loader:482:36)
        at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
        at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
        at Function.Module._load (node:internal/modules/cjs/loader:778:27)
        at Module.require (node:internal/modules/cjs/loader:999:19)
        at require (node:internal/modules/cjs/helpers:102:18)
        at Object.&lt;anonymous&gt; (/Users/juliantc/Desktop/ai-    studio/development/frontend/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
      code: &#39;ERR_PACKAGE_PATH_NOT_EXPORTED&#39;
    }
    
    Node.js v17.0.1

This error only occurs when I run this on this specific computer, which I do not have superuser access to. It works on other computers. 

For reference, this is ./node_modules/postcss-safe-parser/node_modules/postcss/package.json

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    {
      &quot;name&quot;: &quot;postcss&quot;,
      &quot;version&quot;: &quot;8.2.6&quot;,
      &quot;description&quot;: &quot;Tool for transforming styles with JS plugins&quot;,
      &quot;engines&quot;: {
        &quot;node&quot;: &quot;^10 || ^12 || &gt;=14&quot;
      },
      &quot;exports&quot;: {
        &quot;.&quot;: {
          &quot;require&quot;: &quot;./lib/postcss.js&quot;,
          &quot;import&quot;: &quot;./lib/postcss.mjs&quot;,
          &quot;types&quot;: &quot;./lib/postcss.d.ts&quot;
        },
        &quot;./&quot;: &quot;./&quot;
      },
      &quot;main&quot;: &quot;./lib/postcss.js&quot;,
      &quot;types&quot;: &quot;./lib/postcss.d.ts&quot;,
      &quot;keywords&quot;: [
        &quot;css&quot;,
        &quot;postcss&quot;,
        &quot;rework&quot;,
        &quot;preprocessor&quot;,
        &quot;parser&quot;,
        &quot;source map&quot;,
        &quot;transform&quot;,
        &quot;manipulation&quot;,
        &quot;transpiler&quot;
      ],
      &quot;funding&quot;: {
        &quot;type&quot;: &quot;opencollective&quot;,
        &quot;url&quot;: &quot;https://opencollective.com/postcss/&quot;
      },
      &quot;author&quot;: &quot;Andrey Sitnik &lt;andrey@sitnik.ru&gt;&quot;,
      &quot;license&quot;: &quot;MIT&quot;,
      &quot;homepage&quot;: &quot;https://postcss.org/&quot;,
      &quot;repository&quot;: &quot;postcss/postcss&quot;,
      &quot;dependencies&quot;: {
        &quot;colorette&quot;: &quot;^1.2.1&quot;,
        &quot;nanoid&quot;: &quot;^3.1.20&quot;,
        &quot;source-map&quot;: &quot;^0.6.1&quot;
      },
      &quot;browser&quot;: {
        &quot;./lib/terminal-highlight&quot;: false,
        &quot;colorette&quot;: false,
        &quot;fs&quot;: false
      }
    }

&lt;!-- end snippet --&gt;


And this is what I get when I list the files in ./node_modules/postcss-safe-parser/node_modules/postcss/lib/

lgtd-lt-119-mbmt:frontend juliantc$ ls ./node_modules/postcss-safe-parser/node_modules/postcss/lib/

    at-rule.d.ts		css-syntax-error.d.ts	input.d.ts		map-generator.js	postcss.d.ts		processor.js		rule.js			tokenize.js
    at-rule.js		css-syntax-error.js	input.js		node.d.ts		postcss.js		result.d.ts		stringifier.js		warn-once.js
    comment.d.ts		declaration.d.ts	lazy-result.d.ts	node.js			postcss.mjs		result.js		stringify.d.ts		warning.d.ts
    comment.js		declaration.js		lazy-result.js		parse.d.ts		previous-map.d.ts	root.d.ts		stringify.js		warning.js
    container.d.ts		fromJSON.d.ts		list.d.ts		parse.js		previous-map.js		root.js			symbols.js
    container.js		fromJSON.js		list.js			parser.js		processor.d.ts		rule.d.ts		terminal-highlight.js



Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath &#39;./lib/tokenize&#39; is not defined by &quot;exports&quot; in the package.json of a module in node_modules

I am trying to use routing for the first time and followed the exact instructions from [Udemy][1]:

### File *App.js*:

    import { Route } from &quot;react-router-dom&quot;;
    import Welcome from &quot;./Pages/Welcome&quot;;
    import Game from &quot;./Pages/Game&quot;;
    import Leaderboard from &quot;./Pages/Leaderboard&quot;;

    function App() {
        return (
            &lt;div&gt;
                &lt;Route path = &quot;/welcome&quot;&gt;
                    &lt;Welcome /&gt;
                &lt;/Route&gt;
                &lt;Route path = &quot;/game&quot;&gt;
                    &lt;Game /&gt;
                &lt;/Route&gt;
                &lt;Route path = &quot;/leaderboard&quot;&gt;
                    &lt;Leaderboard /&gt;
                &lt;/Route&gt;
            &lt;/div&gt;
        );
    }

    export default App;

### File *index.js*

    import ReactDOM from &#39;react-dom&#39;;
    import { BrowserRouter } from &#39;react-router-dom&#39;;
    import App from &quot;./App&quot;;

    ReactDOM.render(
        &lt;BrowserRouter&gt;
            &lt;App /&gt;
        &lt;/BrowserRouter&gt;,
        document.getElementById(&#39;root&#39;)
    );

I get the following error:

&gt; Error: A Route is only ever to be used as the child of &lt;Routes&gt;
&gt; element, never rendered directly. Please wrap your Route in a Routes.

Where have I gone wrong?

  [1]: https://en.wikipedia.org/wiki/Udemy





Content Type	Original Author	Original Content on Stackoverflow
Question	cervyvin	View Question on Stackoverflow
Solution 1 - Reactjs	diedu	View Answer on Stackoverflow

What does the hook numbers in the Reactjs Dev tool correspond to?

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Unable to find bundled Java version with flutter doctor, after updating Android studio Arctic Fox(2020.3.1) on M1 Apple Silicon

MongoParseError: options useCreateIndex, useFindAndModify are not supported

Attributions