How do I import uuid?

Expo Development Tools
1

Hello,
i have no idea, how I can import uuid to my snack project.
Commands like
import uuid from ‘uuid’ ;
import {uuid} from ‘uuidv4’;
import uuid from ‘uuid/v4’;
do not work for me.
What am I doing wrong?

2

This worked for me:

import { v4 as uuid } from 'uuid';

const myUuid = uuid();

Heads up that I had to keep my uuid version on 3.4.0 because, around Expo 36, Expo didn’t have the right native crypto libs to handle later versions. I’m not sure if this has been resolved yet.

3

I get this message when trying to import it like you told me to:
‘uuid’ is not defined in dependencies.

4

uuid is not built in so you first have to install it.

I did the following:

  1. create a new expo project. In your case you would skip this part, since you already have an existing one:
/tmp$ expo init test
✔ Choose a template: › blank                 a minimal app as clean as an empty canvas
✔ Downloaded and extracted project files.
🧶 Using Yarn to install packages. Pass --npm to use npm instead.
✔ Installed JavaScript dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following yarn commands.

- cd test
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios # requires an iOS device or macOS for access to an iOS simulator
- yarn web
/tmp$ cd test
  1. Install uuid:
/tmp/test$ expo install uuid
Installing 1 other package using Yarn.
> yarn add uuid
yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ uuid@8.3.2
info All dependencies
└─ uuid@8.3.2
Done in 2.15s.
/tmp/test$

Then I changed App.js to look as follows. I got the import statement from uuid’s page on npmjs.com:

import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { v4 as uuidv4 } from 'uuid';

export default function App() {
  const [state, setState] = useState(null);

  useEffect(() => {
    setState(uuidv4());
  }, []);

  return (
    <View style={styles.container}>
      <Text>{state}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

At that point I ran expo start and loaded it in the Expo Go app. I immediately got an error like this:

Error: crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported

This error is located at:
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
[...]

That URL tells you to install react-native-get-random-values and then import it before uuid. It also has a link to GitHub - LinusU/react-native-get-random-values: A small implementation of `getRandomValues` for React Native

So based on that I did this:

/tmp/test$ expo install react-native-get-random-values
Installing 1 other package using Yarn.
> yarn add react-native-get-random-values
yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ react-native-get-random-values@1.6.0
info All dependencies
├─ fast-base64-decode@1.0.0
└─ react-native-get-random-values@1.6.0
Done in 2.31s.

Then changed the import statements as follows:

import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';

Then it works.

1 Like
5

Sorry, I just realised you’re trying this on Snack.

Try adding the following imports:

import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';

Then Snack will try to load them. At the bottom it will show a red bar with an “Add Dependency” link. Click on that. It will do it for both react-native-get-random-values and uuid. After that you will be able to call uuidv4().

After adding both dependencies my package.json in Snack looks like this:

{
  "dependencies": {
    "react-native-paper": "3.6.0",
    "expo-constants": "~9.3.3",
    "react-native-get-random-values": "*",
    "uuid": "*"
  }
}

P.S. I’ve moved your question to the Snack category :slight_smile:

1 Like
6

Ahh nice it worked for me. Thank you.

1 Like
7

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.