Use npm uuid in reactjs

Question

I have a place wherein I am required to use npm uuid package for generating unique Id's. After installing uuid package, the usage is as follows:

const uuid = require('uuid/v1'); uuid(); 

But I have error which says:

[eslint] Unexpected require(). (global-require) 

My function is as below:

someFunction = (i, event) => {    if(someCondition) {        //generate some unique id        const uuid1 = require('uuid/v1');        uuid1();        //call some function and pass this id        someFunction2(uuid1);     } else{        //generate some unique id        const uuid2 = require('uuid/v1');        uuid2();        //call some function and pass this id        someFunction2(uuid2);     } 

What is the best way to use require in ReactJs.

Answer 1

Try this:

import React from "react"; import ReactDOM from "react-dom"; import uuid from "uuid";  function App() {   return (     <div className="App">       <h1>{uuid.v4()}</h1>     </div>   ); }  const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

This is a working example: https://codesandbox.io/s/0pr5vz48kv

Answer 2

As of September,2020 I got this working by first, installing the types as

yarn add @types/uuid

then as

import React from "react"; import ReactDOM from "react-dom"; import { v4 as uuidv4 } from 'uuid';  function App() {   return (     <div className="App">       <h1>{uuidv4()}</h1>     </div>   ); }  const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);  

If this code don't work in future, refer to this section of official docs.