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.

Why do you use conditional imports at all? Also keep in mind that both modules (actually you have the same module in both branches but I assume it was a typo) will be bundled if the condition is not statically computable. — Yury Tarabanko
– Yury Tarabanko, Commented Oct 17, 2018 at 9:57
Example of what? :) Of conditional import? Well your code is a perfect one. You do if(a){ require('')} else {require('')}. The question was why have you written the code this way? Why can't you just do import uuid1 from 'uuid/v1' at the top of your file? — Yury Tarabanko
– Yury Tarabanko, Commented Oct 17, 2018 at 10:03

Tu Nguyen · Accepted Answer · 2018-10-17 10:02:43Z

58

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

answered Oct 17, 2018 at 10:02

Tu Nguyen

10.2k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thiago Valentim Over a year ago

Another tip, when I was working with react + typescript the import statement that works was: import * as uuid from 'uuid';

Mojtaba Darzi Over a year ago

how can get device uniq id ? it give us a id that changes after a refresh page !!!

Ashton Engberg Over a year ago

You can useRef to hold a reference to a uuid you generate.

DevLoverUmar · Accepted Answer · 2020-10-23 02:53:41Z

20

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.

edited Oct 23, 2020 at 2:53

answered Sep 7, 2020 at 11:48

DevLoverUmar

14.3k16 gold badges79 silver badges113 bronze badges

Comments

Aravind · Accepted Answer · 2018-10-17 10:01:46Z

3

You don't have to require the package always. Just require it only once and use it wherever you want.

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

if (condition) {
    some_id = uuidv1();
    some_function(some_id);

} else {
    other_id = uuidv1();
    other_function(other_id);
}

It's as simple as that.

answered Oct 17, 2018 at 10:01

Aravind

5531 gold badge6 silver badges18 bronze badges

4 Comments

Uzair Khan Over a year ago

Modified my function as like this: functionName = () => { const uuid = require('uuid/v1'); if(){ const uid = uuid();} }} , It still gives me [eslint] Unexpected require(). (global-require). how to resolve that?

Aravind Over a year ago

Do a global import. Not inside functions. Try if that works.

Uzair Khan Over a year ago

I should have imported uuid in react, and just called the uuid.vx(); your answer helped me understand the concept. Thanks. But in react if linter is enabled, it causes troubles.

Aravind Over a year ago

Look into this stackoverflow.com/questions/9132772/lazy-loading-in-node-js if you want more details about using require inside functions.

Bassem · Accepted Answer · 2020-02-24 23:47:56Z

2

Just in case you would like to use uuid v4, this is how you can import it in react.

import uuid from 'uuid/v4'

answered Feb 24, 2020 at 23:47

Bassem

4,1804 gold badges26 silver badges56 bronze badges

Comments

Gucal · Accepted Answer · 2021-05-21 08:34:24Z

1

import React from "react";
import ReactDOM from "react-dom";
import * as uuid from "uuid";

function App() {
  return (
    <div className="App">
      <h1>{uuid.v4()}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

answered May 21, 2021 at 8:34

Gucal

9411 gold badge13 silver badges22 bronze badges

Comments

szachMati · Accepted Answer · 2021-11-28 16:16:31Z

1

Using React with typescript version 4.5.0 or higher.

Run: npm install --save @types/uuid
Create directory "@types" in root folder with file "allTypes.d.ts" and add there

declare module "uuid";
In ts.config.json under compilerOptions add:

"typeRoots": ["./node_modules/@types","./@types" ]
Rerun your app and import where necessary
import { v4 as uuidv4 } from "uuid";

answered Nov 28, 2021 at 16:16

szachMati

2263 silver badges13 bronze badges

Comments

ZF007 · Accepted Answer · 2019-10-29 09:11:48Z

0

In react use import.

In Nodejs project use 'require'.

If you want to use import in normal nodejs project "babel" is needed to setup.

edited Oct 29, 2019 at 9:11

ZF007

3,7419 gold badges33 silver badges52 bronze badges

answered Aug 10, 2019 at 19:23

Ping Woo

1,80317 silver badges23 bronze badges

Comments

Nawab Ali · Accepted Answer · 2020-05-08 07:47:28Z

0

For React JS:

import { v1 as uuidv1 } from 'uuid';
uuidv1(); // ⇨ '2c5ea4c0-4067-11e9-8bad-9b1deb4d3b7d'

answered May 8, 2020 at 7:47

Nawab Ali

7607 silver badges9 bronze badges

1 Comment

Kapil Raghuwanshi Over a year ago

Please describe the resolution in more detail with more insights like explaining the actual reason, add you working code snippet and steps to perform to eradicate the issues. For more details visit StackOverflow's guidelines.

mohammad haddad · Accepted Answer · 2020-05-20 03:58:30Z

0

you can import in different ways

1----From the command line Installing

npm i react-uuid
import uuid from 'react-uuid'

and use for key variable like below

key={uuid()}

2---- A better way I always use is

first, install

npm install uuid

then import

import { v1 as uuidv1 } from 'uuid';

and use

uuidv1();

for more details read

answered May 20, 2020 at 3:58

mohammad haddad

92 bronze badges

Comments

Saeid · Accepted Answer · 2021-08-19 15:58:56Z

0

you must go to this folder => your drive:/your projectfolder/node_modules/uuid/dist/v1 and see your uuid's folder by defult this is in top folder

import UUID From 'uuid/dist/v1'

answered Aug 19, 2021 at 15:58

Saeid

6967 silver badges12 bronze badges

Comments

Joshua · Accepted Answer · 2022-11-21 20:57:09Z

0

Generate Unique ID in JavaScript using UUID

make sure your at root run ls if your not sure look for package.json
run npm i uuid
to use it in the file you need

const {v4: uuidv4} = require('uuid')

now for the hard part if your using a route such as

controller.upload = (req, res) => {
    const id = uuidv4() // each upload will have a uuid thats random add your logic 
}

reference

edited Nov 21, 2022 at 20:57

Joshua

6511 gold badge6 silver badges19 bronze badges

answered Nov 17, 2022 at 20:16

CoderZZZZZZZ

14 bronze badges

Comments

Bello Shehu · Accepted Answer · 2022-12-27 14:10:33Z

0

If what you are trying to do is to display a list of component items, you might consider this pattern:

import React from 'react'
import {v4 as uuidv4} from 'uuid'

const Project = ({title}) =>{
    return(
        <li>{title}</li>
    )
}
const ProjectList = ({projects}) => {
  return (
    <div>
        <ul>
            {
                projects.map(project => <Project title={project.title} key={uuidv4()}/>)
            }
        </ul>
    </div>
  )
}

export default ProjectList

answered Dec 27, 2022 at 14:10

Bello Shehu

3434 silver badges8 bronze badges

1 Comment

Remco Haszing Over a year ago

Never use random values as a key. Use a property of the data you’re mapping over, or, as a last resort, use the index.

David MD · Accepted Answer · 2023-11-01 22:04:12Z

0

using in a typescript app, you must install with types init.

npm i --save-dev @types/uuid

Then Importing like below will work with ease

import { v4 as uuidv4 } from "uuid";

answered Nov 1, 2023 at 22:04

David MD

971 silver badge3 bronze badges

1 Comment

Raydot Over a year ago

This information in this answer is correct, but it doesn't apply to the OP's question.

Collectives™ on Stack Overflow

Use npm uuid in reactjs

13 Answers 13

3 Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

3 Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related