title: Correctly defined Javascript function sometimes causing TypeError: "X" is not a function
body: <p>I have a React (^16.12.0) application. I use Chrome but the same error occurs using Firefox and on other machines.</p>
  
  <p>Here's the link to the application: <a href="https://resume-designer.com/" rel="nofollow noreferrer">resume-designer.com</a>. After several clicks on the big blue <em>Add</em> button, you'll eventually see the below error in the console:</p>
  
  <pre><code>Uncaught TypeError: r[t] is not a function
  </code></pre>
  
  <p>Here's the code in question:</p>
  
  <pre class="lang-js prettyprint-override"><code>// src/defaults/content.js
  
  export const education = () =&gt; ({
    city: '',
    country: '',
    degree: '',
    description: emptyDesc(),
    id: shortid.generate(),
    school: '',
  });
  
  export const experiences = () =&gt; ({
    city: '',
    country: '',
    description: emptyDesc(),
    employer: '',
    id: shortid.generate(),
    position: '',
  });
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// src/actions/content.js
  
  import * as defaults from '../defaults/content';
  
  export const addItem = (event) =&gt; {
    const { section } = event.target.dataset;
  
    return {
      newItem: defaults[section](), // &lt;-- This causes the problem (sometimes)
      path: section,
      type: 'ADD_ITEM',
    };
  };
  </code></pre>
  
  <p>To see what was going on, I added <code>console.log(defaults[section]);</code> statement in <code>src/actions/content.js</code> on line 7, just before the <code>return</code> statement. Clicking four times (it's not always four) on the mentioned button eventually caused the expected error. On the below screenshot, we see that, for the first three clicks, the function is correctly defined and called, but for the fourth one, it's now undefined () and causes the error. Note that if you keep clicking, it starts working again, then crashes, then works, etc.</p>
  
  <p><a href="https://i.stack.imgur.com/k2i7O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k2i7O.png" alt="Screenshot"></a></p>
  
  <p>I tried moving the <code>education()</code> and <code>experiences()</code> functions from <code>src/defaults/content.js</code> to <code>src/actions/content.js</code> and I still get the same error.</p>
  
  <p>Any idea? Could it be a memory deficiency problem?</p>
  
  <ul>
  <li>Link to the application: <a href="https://resume-designer.com/" rel="nofollow noreferrer">https://resume-designer.com/</a>.</li>
  </ul>