<p dir="auto">Describe what you were doing when the bug occurred:<br>
1.<br>
2.<br>
3.</p>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.11.0-39713716aa</p>
<p dir="auto">Call stack: at store_Store.getElementAtIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:22171:35)<br>
at store_Store.getElementIDAtIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:22187:26)<br>
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29770:63<br>
at List.render (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:23893:18)<br>
at Ii (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:14002:76)<br>
at Hi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13993:10)<br>
at uk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16728:86)<br>
at tk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16245:11)<br>
at qk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16237:23)<br>
at jk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16221:5)</p>
<p dir="auto">Component stack: at List (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:23588:30)<br>
at div<br>
at AutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:3111:5)<br>
at div<br>
at div<br>
at Tree_Tree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29531:47)<br>
at div<br>
at div<br>
at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28680:3)<br>
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29121:3)<br>
at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34645:52)<br>
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30035:5)<br>
at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30157:5)<br>
at div<br>
at div<br>
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34264:3)<br>
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25356:3)<br>
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25963:3)<br>
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30300:3)<br>
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37639:3)</p>
<p dir="auto"><strong>NOT A DUPLICATE</strong></p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">package.json dependencies:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;dependencies&quot;: {
    &quot;@material-ui/core&quot;: &quot;^4.0.0-alpha.8&quot;,
    &quot;@material-ui/icons&quot;: &quot;^4.0.0-alpha.8&quot;,
    &quot;@material-ui/styles&quot;: &quot;^4.0.0-alpha.8&quot;,
    &quot;@zeit/next-typescript&quot;: &quot;^1.1.1&quot;,
    &quot;next&quot;: &quot;^8.1.0&quot;,
    &quot;react&quot;: &quot;^16.8.6&quot;,
    &quot;react-dom&quot;: &quot;^16.8.6&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@types/next&quot;: &quot;^8.0.3&quot;,
    &quot;@types/react&quot;: &quot;^16.8.13&quot;,
    &quot;@types/react-dom&quot;: &quot;^16.8.4&quot;,
    &quot;@types/styled-jsx&quot;: &quot;^2.2.8&quot;,
    &quot;typescript&quot;: &quot;^3.4.3&quot;
  }"><pre class="notranslate"><code class="notranslate">"dependencies": {
    "@material-ui/core": "^4.0.0-alpha.8",
    "@material-ui/icons": "^4.0.0-alpha.8",
    "@material-ui/styles": "^4.0.0-alpha.8",
    "@zeit/next-typescript": "^1.1.1",
    "next": "^8.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@types/next": "^8.0.3",
    "@types/react": "^16.8.13",
    "@types/react-dom": "^16.8.4",
    "@types/styled-jsx": "^2.2.8",
    "typescript": "^3.4.3"
  }
</code></pre></div>
<p dir="auto">index.tsx:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { useContext } from &quot;react&quot;;
import { Store } from &quot;../state/store&quot;;
import { initialState } from &quot;../state/reducers&quot;;
import { toggleDrawer } from &quot;../state/actions&quot;;

export default function Index() {
  // Get state contexts
  const { state, dispatch } = useContext(Store);
  const onClick = () =&gt; {
    const drawerState: boolean = state.drawers.navmenu;
    dispatch(toggleDrawer(&quot;navmenu&quot;, !drawerState));
  };
  const navmenu: string = initialState.drawers.navmenu.toString();
  return (
    &lt;div&gt;
      &lt;p&gt;Value: {navmenu}&lt;/p&gt;
      &lt;button onClick={onClick}&gt;Change&lt;/button&gt;
    &lt;/div&gt;
  );
}"><pre class="notranslate"><code class="notranslate">import React, { useContext } from "react";
import { Store } from "../state/store";
import { initialState } from "../state/reducers";
import { toggleDrawer } from "../state/actions";

export default function Index() {
  // Get state contexts
  const { state, dispatch } = useContext(Store);
  const onClick = () =&gt; {
    const drawerState: boolean = state.drawers.navmenu;
    dispatch(toggleDrawer("navmenu", !drawerState));
  };
  const navmenu: string = initialState.drawers.navmenu.toString();
  return (
    &lt;div&gt;
      &lt;p&gt;Value: {navmenu}&lt;/p&gt;
      &lt;button onClick={onClick}&gt;Change&lt;/button&gt;
    &lt;/div&gt;
  );
}
</code></pre></div>
<p dir="auto">Error output:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ error ] { Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component."><pre class="notranslate"><code class="notranslate">[ error ] { Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.
</code></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">useContext is being called within the body of a function component. There should be no error. This is literally the only component in the entire app. I am not breaking any of:</p>
<ol dir="auto">
<li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
<li>You might be breaking the Rules of Hooks</li>
<li>You might have more than one copy of React in the same app</li>
</ol>