CODEWITHSUNDEEP
javascriptreactjscreate-react-appuuid
J Moss
J Moss

Reputation: 205

React: Deep requiring is deprecated as of uuid, Please require the top-level module

my React app successfully shows the button however receiving this error.

index.js:1 Deep requiring like const uuidv4 = require('uuid/v4'); is deprecated as of [email protected]. Please require the top-level module when using the Node.js CommonJS module or use ECMAScript Modules when bundling for the browser

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 (
            <Container>
                <Button 
                 color="dark"
                 style={{marginBottom: '2rem'}}
                 onClick={() => {
                    const name = prompt('Enter Item');
                    if (name) {
                        this.setState(state => ({
                           items: [...state.items, { id: uuid(), name }] 
                        }));
                    }
                }}
                >Add Item</Button>
            </Container>
        );
    }
}

export default ShoppingList;

Upvotes: 14

Views: 18540

Answers (2)

Gopherine
Gopherine

Reputation: 1101

This has changed after recent update to library and now you may import uuid, as per library description :

"As of uuid@7 this library now provides ECMAScript modules builds, which allow packagers like Webpack and Rollup to do "tree-shaking" to remove dead code. Instead, use the import"

import { v4 as uuid_v4 } from "uuid";
uuid_v4()

... or for CommonJS:

const { v4: uuid_v4 } = require('uuid');
uuid_v4();

Upvotes: 24

keikai
keikai

Reputation: 15166

You can use react-uuid instead

npm i react-uuid

usage

import uuid from "react-uuid";

Try it online:

Edit polished-silence-u7ut6

Upvotes: 3

Related Questions