title: React.js app works fine in development mode but has errors after building (production mode)
body: <h2>The error</h2>
  <p>Well, it's have been hours I'm trying to find out why I got this error (only in when running build) :</p>
  <p><a href="https://i.stack.imgur.com/gZfPY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gZfPY.png" alt="error" /></a></p>
  <h3>The architecture</h3>
  <pre><code>Current directory is MySuperProject/src/Components/
  Other non usefull files and directories are omitted.
  .
  ├── Rentals                             
  │   ├── modals
  │   │   └── AddRentalModal.js            Not usefull here
  │   ├── RentalListItem.js                https://pastebin.com/QSBncsHw
  │   └── RentalsList.js                   https://pastebin.com/QufkCm85
  ├── Table
  │   ├── Table.js                         https://pastebin.com/sq1jBPg1
  └── Utils
      └── axios.util.js                    Not usefull here, axios setting
  </code></pre>
  <h2>Environment</h2>
  <ul>
  <li>NodeJS  : 15.2.0</li>
  <li>ReactJS : 16.13.1</li>
  <li>Yarn    : 1.22.5</li>
  </ul>
  <h2>What I do</h2>
  <p>In my main file, RentalsList.js, I :</p>
  <ol>
  <li>Get some data on componentDidMount() from /rentals on my API</li>
  <li>Update state with the API's answer</li>
  <li>Display a  component (../Table/Table.js) using RentalListItem (./RentalListItem.js) as item for this table. To achieve that, I pass RentalListItem as prop in  named TableItem.</li>
  </ol>
  <p>Table component is called like that :</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Table
    columns={columns}            // Columns of my table
    datas={this.state.rentals}   // Data I got from my API
    TableItem={RentalListItem}   // TableItem which is imported from ./RentalListItem.js
  /&gt;
  </code></pre>
  <p>Here is an example of datas returned by API :</p>
  <pre class="lang-json prettyprint-override"><code>[
     {
        &quot;name&quot;:&quot;Some name&quot;,
        &quot;ref&quot;:&quot;AB01234&quot;,
        &quot;availability_date&quot;: 1605237860,
        &quot;cost&quot;: 123.45,
        &quot;type&quot;: 0,
        &quot;status&quot;: &quot;Available&quot;,
        &quot;_id&quot;:&quot;5f667cb47919fda09795ccad&quot;,
        &quot;address&quot;:{
           &quot;number&quot;: 1,
           &quot;way_type&quot;: &quot;street&quot;,
           &quot;way_name&quot;: &quot;name&quot;,
           &quot;postal_code&quot;: 12345,
           &quot;city&quot;: &quot;StackyCity&quot;,
           &quot;_id&quot;:&quot;5fadfc0e2add5eb934c497bb&quot;
        },
        &quot;added_by&quot;:{
           &quot;firstname&quot;:&quot;Me&quot;,
           &quot;lastname&quot;:&quot;Andmyself&quot;,
           &quot;_id&quot;:&quot;5fac8ca0b86ee219381252eb&quot;,
           &quot;agency&quot;:{
              &quot;ref&quot;: &quot;CD56789&quot;,
              &quot;name&quot;: &quot;agency name&quot;,
              &quot;email&quot;: &quot;an@email.com&quot;,
              &quot;_id&quot;:&quot;5fac8f3db86ee219381252ec&quot;
           }
        }
     }
  ]
  </code></pre>
  <h2>My question</h2>
  <p><strong>I don't have any error while running it under development mode. Indeed, I only have this error after building my code</strong> (for production environment)</p>
  <p>Why do I get this error in production mode ?</p>
  <h2>Research tracks</h2>
  <ul>
  <li><p>I noticed that after <code>yarn build</code>, my componenent RentalListItem is rendered as a function t(e) but when I try to call it as a function it tells me that's a class. Well :)</p>
  </li>
  <li><p>When calling directly RentalListItem as a component on RentalsList I have no error</p>
  </li>
  <li><p>In Table.js, this.props.TableItem seems to be well defined when it's called</p>
  </li>
  </ul>