Initial Vue-Doxen throws: TypeError: crypto.randomUUID is not a function

[ckefalianou]

I started implementing Vue-Doxen on a project. I implemented the code I found here: https://thejaredwilcurt.com/vue-doxen/getting-started#getting-started then changed the ComponentA and ComponentB with actual components from my app.

<template>
    <div style="min-height: 1000px">
        <DoxenSidebar
            v-model="selectedDemo"
            :demos="demos"
        />
        <VueDoxen
            v-model="selectedDemo"
            :demos="demos"
        />
        <link
            href="https://unpkg.com/highlightjs/styles/ir-black.css"
            rel="stylesheet"
            type="text/css"
        >
    </div>
</template>
<script setup>
import 'vue-doxen/vue-doxen.css';

import Button from '@UI/Buttons/Button.vue';
import PrimaryButton from '@UI/Buttons/PrimaryButton.vue';
import { computed, ref } from 'vue';
import { DoxenSidebar, VueDoxen } from 'vue-doxen';

defineOptions({
    name: 'DocumentationPage',
});

const selectedDemo = ref('PrimaryButton');

const demos = computed(() => ({
    Button,
    PrimaryButton: {
        component: PrimaryButton,
    },
}));
</script>

On the console, I get the following error:

vue-doxen.js?v=fe0c8af0:5924 Uncaught (in promise) 

TypeError: crypto.randomUUID is not a function
    at Proxy.uniqueId (vue-doxen.js?v=fe0c8af0:5924:21)
    at ReactiveEffect.fn (chunk-SZCTCOGP.js?v=fe0c8af0:1236:13)
    at ReactiveEffect.run (chunk-SZCTCOGP.js?v=fe0c8af0:435:19)
    at get value (chunk-SZCTCOGP.js?v=fe0c8af0:1248:107)
    at Object.get [as uniqueId] (chunk-SZCTCOGP.js?v=fe0c8af0:4970:22)
    at Object.get (chunk-SZCTCOGP.js?v=fe0c8af0:4530:19)
    at Proxy.idFor (vue-doxen.js?v=fe0c8af0:5929:24)
    at ReactiveEffect.fn (chunk-SZCTCOGP.js?v=fe0c8af0:1236:13)
    at ReactiveEffect.run (chunk-SZCTCOGP.js?v=fe0c8af0:435:19)
    at get value (chunk-SZCTCOGP.js?v=fe0c8af0:1248:107)

   App is Laravel/Vue. Details:
   vue: 3.4.25
   vite: 5.2.8
  inertiajs/vue3: 1.0.15

Thank you

[TheJaredWilcurt]

What version of Node.js are you using?

What browser are you using?

I didn't realize that support for crypto.randomUUID() was only added in mid 2021. So it requires Node 19+.

• https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID#browser_compatibility
• https://caniuse.com/?search=crypto.randomUUID%20

Since Node 18 is still supported until next year, I'll swap out the native random UUID generator for a custom implementation.

• https://nodejs.org/en/about/previous-releases

[ckefalianou]

Thank you for your fast response!

I was on 18.19.1 version and I did an update to 20.14.0, but the issue persists.

[TheJaredWilcurt]

All uses of crypto.randomUUID are removed from Vue-Doxen as of v0.1.5.

Update to the latest version. Let me know if you run into any other issues.

[ckefalianou]

Good morning! Works like a charm! Thank you @TheJaredWilcurt !