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

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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'

Solution 2 - Javascript

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

Solution 3 - Javascript

This worked for me.

Firstly, run

npm install uuid

then

import { v4 as uuidv4 } from 'uuid';

To use it just call

uuidv4();

Solution 4 - Javascript

This worked for me.

Firstly, run

npm install uuid

then

import { v4 as uuidv4 } from 'uuid';

To use it just call uuidv4().

Solution 5 - Javascript

Use react-uuid

npm i react-uuid

import uuid from 'react-uuid';

const id = uuid();

Solution 6 - Javascript

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.

Solution 7 - Javascript

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.

Solution 8 - Javascript

in the command line install uuid:

npm i react-uuid

in your project:

import { v4 as uuid } from "uuid";

const id = uuid();

Solution 9 - Javascript

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

Solution 10 - Javascript

Instead of doing: import uuid from 'uuid'

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

Solution 11 - Javascript

I used this:

import v1 from 'uuid/v1.js' 

const uuid = v1;

and it worked!!

Solution 12 - Javascript

Create Version 4 (Random) UUIDs

import { v4 as uuidv4 } from 'uuid';

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

Solution 13 - Javascript

In the command line, run

npm i react-uuid

then in your project, try

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

Solution 14 - Javascript

write

const uuid = require('uuid');

instead of

import uuid from 'uuid'

Solution 15 - Javascript

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

Solution 16 - Javascript

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

Solution 17 - Javascript

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

Content Type	Original Author	Original Content on Stackoverflow
Question	PRABHAT SINGH RAJPUT	View Question on Stackoverflow
Solution 1 - Javascript	Gabriele Petrioli	View Answer on Stackoverflow
Solution 2 - Javascript	Nkoro Joseph Ahamefula	View Answer on Stackoverflow
Solution 3 - Javascript	Dgoldenone	View Answer on Stackoverflow
Solution 4 - Javascript	S T Rajan	View Answer on Stackoverflow
Solution 5 - Javascript	keikai	View Answer on Stackoverflow
Solution 6 - Javascript	Kiran Jasvanee	View Answer on Stackoverflow
Solution 7 - Javascript	Jayant Singh	View Answer on Stackoverflow
Solution 8 - Javascript	R2B	View Answer on Stackoverflow
Solution 9 - Javascript	Yazan Najjar	View Answer on Stackoverflow
Solution 10 - Javascript	Shivani Shinde	View Answer on Stackoverflow
Solution 11 - Javascript	Adarsh Verma	View Answer on Stackoverflow
Solution 12 - Javascript	Rohan Mathew Alex	View Answer on Stackoverflow
Solution 13 - Javascript	Ali Saleem	View Answer on Stackoverflow
Solution 14 - Javascript	vedant mehta	View Answer on Stackoverflow
Solution 15 - Javascript	Arash Asnaashari	View Answer on Stackoverflow
Solution 16 - Javascript	Narsing pimple	View Answer on Stackoverflow
Solution 17 - Javascript	Abubakar Shafique	View Answer on Stackoverflow