CODEWITHSUNDEEP
javascriptreactjsuuid
Prabhat Singh
Prabhat Singh

Reputation: 1555

Attempted import error: 'uuid' does not contain a default export (imported as 'uuid') In React

Error is :Attempted import error: 'uuid' does not contain a default export (imported as 'uuid')

This is the Code Sample 

import uuid from "uuid";
//import * as uuid from "uuid";
import TodoInput from "./components/TodoInput";
import TodoList from "./components/TodoList";

export default class App extends Component {
state = {
  items: [
    { id: 1, title: "wake up" },
    { id: 2, title: "make breakfast" }
  ],
  id: uuid(),
  item: "",
  editItem: false
};
....
....

What Could be the Reason Behind This?

Upvotes: 57

Views: 60641

Answers (19)

dancun chiriga
dancun chiriga

Reputation: 77

Sometimes and often times (due to some incomplete/interrupted dependency installations) all you need to do is delete the node_modules folder and run npm install once more.
Voila (in most cases).

Upvotes: 0

Stephen Brickner
Stephen Brickner

Reputation: 2602

As others have already stated, destructure the variable:

const { v4 as uuid } from 'uuid';

For use in your code:

const id = uuid();

If you are coming across this error in your Jest tests add the following to your moduleNameMapper:

moduleNameMapper: {
    '^uuid$': 'uuid'
}

Upvotes: 2

Abubakar Shafique
Abubakar Shafique

Reputation: 81

  1. yarn add uuid
  2. import {v4 as uuid} from 'uuid'
  3. console.log(uuid());

Upvotes: -2

Narsing pimple
Narsing pimple

Reputation: 1

It worked for me after removed the node_modules and package-lock.json and reinstalled the npm install and npm install react-scripts.

Upvotes: -1

S T Rajan
S T Rajan

Reputation: 101

This worked for me.

Firstly, run

npm install uuid

then

import { v4 as uuidv4 } from 'uuid';

To use it just call uuidv4().

Upvotes: 10

Adarsh Verma
Adarsh Verma

Reputation: 31

I used this:

import v1 from 'uuid/v1.js' 

const uuid = v1;

and it worked!!

Upvotes: 1

R2B
R2B

Reputation: 21

in the command line install uuid:

npm i react-uuid

in your project:

import { v4 as uuid } from "uuid";

const id = uuid();

Upvotes: 2

Arash Asnaashari
Arash Asnaashari

Reputation: 1

import uuid from 'uuid/dist/v4'
this will work

Upvotes: 0

Shivani Shinde
Shivani Shinde

Reputation: 43

Instead of doing: import uuid from 'uuid'

This worked for me(For creating random string): import uuid from 'uuid/v4'

Upvotes: 1

Kiran Jasvanee
Kiran Jasvanee

Reputation: 6564

Earlier it was possible to access the default state, which is not available in new release.
Kindly go through the updates: https://www.npmjs.com/package/uuid.

import { v4 as uuidv4 } from 'uuid';

There are other possible access ways provided in package in npm documentation.

Upvotes: 3

vedant mehta
vedant mehta

Reputation: 21

write

const uuid = require('uuid');

instead of

import uuid from 'uuid'

Upvotes: -1

Jayant Singh
Jayant Singh

Reputation: 86

Default exports have been removed as stated on the npm page of UUID.

From nmpjs.com

Default Export Removed

uuid@3 was exporting the Version 4 UUID method as a default export:

const uuid = require('uuid'); // <== REMOVED!

This usage pattern was already discouraged in uuid@3 and has been removed in uuid@7.

Upvotes: 2

Dgoldenone
Dgoldenone

Reputation: 181

This worked for me.

Firstly, run 

npm install uuid

then

import { v4 as uuidv4 } from 'uuid';

To use it just call

uuidv4();

Upvotes: 16

Nkoro Joseph Ahamefula
Nkoro Joseph Ahamefula

Reputation: 530

Once you do yarn add uuid, the uuid folder in node_modules contains v1,v2,v3,v4 modules. import any of them according to your choice as uuid. 

import {v4 as uuid} from 'uuid'
const id = uuid()

This solved my problem. versions "uuid": "^7.0.3" and "react": "^16.13.1",

Upvotes: 23

Yazan Najjar
Yazan Najjar

Reputation: 2206

I think if you add to uuid when you import it v4 I think it will work

What I mean is like this 

import uuid from 'uuid/v4';

Upvotes: 1

Ali Saleem
Ali Saleem

Reputation: 1

In the command line, run

npm i react-uuid

then in your project, try

import uuid from 'react-uuid';
const id = uuid();

Upvotes: 0

Rohan Mathew Alex
Rohan Mathew Alex

Reputation: 123

Create Version 4 (Random) UUIDs

import { v4 as uuidv4 } from 'uuid';

id:uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d' https://www.npmjs.com/package/uuid

Upvotes: -1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196197

Because the uuid package has not default export, as the error clearly states.

(it used to exist, but has been removed)

Once installed, decide which type of UUID you need. RFC4122 provides for four versions, all of which are supported here.

(documentation at https://www.npmjs.com/package/uuid)

so you need to choose one of the following

import {v1 as uuid} from "uuid"; 
// import {v3 as uuid} from "uuid"; 
// import {v4 as uuid} from "uuid"; 
// import {v5 as uuid} from "uuid";

depending on the implementation you want.

If you are using an older version of the package you could use one of

import uuid from 'uuid/v1'
// import uuid from 'uuid/v3'
// import uuid from 'uuid/v4'
// import uuid from 'uuid/v5'

Upvotes: 124

keikai
keikai

Reputation: 15166

Use react-uuid

npm i react-uuid

import uuid from 'react-uuid';

const id = uuid();

Upvotes: 4

Related Questions