title: React: Deep requiring is deprecated as of uuid, Please require the top-level module
body: <p>my React app successfully shows the button however receiving this error.</p>
  
  <p>index.js:1 Deep requiring like <code>const uuidv4 = require('uuid/v4');</code> is deprecated as of uuid@7.x. Please require the top-level module when using the Node.js CommonJS module or use ECMAScript Modules when bundling for the browser</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Container, ListGroup, ListGroupItem, Button } from 'reactstrap';
  import { CSSTransition, TransitionGroup } from 'react-transition-group';
  import uuid from 'uuid/v4';
  
  class ShoppingList extends Component {
      state = {
          items: [
              { id: uuid(), name: 'Eggs' },
              { id: uuid(), name: 'Milk' },
              { id: uuid(), name: 'Steak' },
              { id: uuid(), name: 'Water' },
          ]
      }
  
      render() {
          const { items } = this.state;
          return (
              &lt;Container&gt;
                  &lt;Button 
                   color="dark"
                   style={{marginBottom: '2rem'}}
                   onClick={() =&gt; {
                      const name = prompt('Enter Item');
                      if (name) {
                          this.setState(state =&gt; ({
                             items: [...state.items, { id: uuid(), name }] 
                          }));
                      }
                  }}
                  &gt;Add Item&lt;/Button&gt;
              &lt;/Container&gt;
          );
      }
  }
  
  export default ShoppingList;
  </code></pre>
  
  <ul>
  <li>I tried to use 'import { v4 as uuidv4 } from 'uuid';   uuidv4();'</li>
  <li>however my button would not show up and i would get error: </li>
  <li>Uncaught ReferenceError: uuid is not defined</li>
  <li>Perhaps i am meant to be getting this error? and everything is currently working fine?</li>
  </ul>