Реакция: Глубокие требования устарели, начиная с uuid. Требуется модуль верхнего уровня.

Question

мое приложение React успешно отображает кнопку, однако получает эту ошибку.

index. js: 1 Глубокие требования, такие как const uuidv4 = require('uuid/v4');, устарели с uuid@7.x. При использовании модуля верхнего уровня требуется использование Node.js Общий JS модуль или использовать модули ECMAScript при связывании для браузера

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;

• Я пытался использовать 'import {v4 as uuidv4} из' uuid '; uuidv4 (); '
• однако моя кнопка не будет отображаться, и я получу ошибку:
• Uncaught ReferenceError: uuid не определен
• Возможно, я должен получить эта ошибка? и все в настоящее время работает нормально?

Answer 1

Это изменилось после недавнего обновления библиотеки, и теперь вы можете импортировать uuid согласно описанию библиотеки:

"Начиная с uuid@7 эта библиотека теперь предоставляет сборки модулей ECMAScript, которые позволяют упаковщикам, таким как Webpack и Rollup чтобы сделать "встряхивание дерева", чтобы удалить мертвый код. Вместо этого используйте импорт "

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

... или для общего JS:

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

Answer 2

Вы можете использовать act-uuid вместо

npm i react-uuid

использование

import uuid from "react-uuid";

---

Попробуйте онлайн: