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

Question

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?

Answer 1

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'

Answer 2

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",

Answer 3

This worked for me.

Firstly, run

npm install uuid

then

import { v4 as uuidv4 } from 'uuid';

To use it just call

uuidv4();

Answer 4

This worked for me.

Firstly, run

npm install uuid

then

import { v4 as uuidv4 } from 'uuid';

To use it just call uuidv4().

Answer 5

Use react-uuid

npm i react-uuid

import uuid from 'react-uuid';

const id = uuid();

Answer 6

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.

Answer 7

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.

Answer 8

in the command line install uuid:

npm i react-uuid

in your project:

import { v4 as uuid } from "uuid";

const id = uuid();

Answer 9

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';