ReferenceError: self is not defined

[Nextdrive-NeilChen]

Hello mrin9,

I am playing with vitepress and trying to have rapidoc v9.3.3 embedded. It worked out great when running in dev mode with hot reloads, but when I tried to do a build, it gave:

build error:
 ReferenceError: self is not defined
    at /home/vitepress_test/node_modules/.pnpm/[email protected]/node_modules/rapidoc/dist/rapidoc-min.js:3788:57478
    at /home/vitepress_test/node_modules/.pnpm/[email protected]/node_modules/rapidoc/dist/rapidoc-min.js:3788:58207
    at Object.<anonymous> (/home/vitepress_test/node_modules/.pnpm/[email protected]/node_modules/rapidoc/dist/rapidoc-min.js:3788:58218)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
 ELIFECYCLE  Command failed with exit code 1.

I tried to search (and I am actually new to every aspects) on the net and nothing actually worked. I was wondering if there is any tips you can give? Thanks so much in advance.

Best regards,

[mrin9]

pick up the beta (v9.3.4-beta) which you can get from dist folder of this repo rapidoc-min.js there was a similar issue #794 with 9.3.3 not sure its related to that

[Nextdrive-NeilChen]

Thanks, I will give it a try.

[bertrandk]

@neildchen The error occurs because the library seems to require Web APIs to work, which are not available when vitepress pre-renders the page on the server-side. You can get guidance on client-side only rendering here:

In short, make sure to only access Browser / DOM APIs in beforeMount or mounted hooks.

[mrin9]

thanks @neildchen for the pointer.

seems like not a RapiDoc issue. Closing it

[Nextdrive-NeilChen]

@bertrandk thank you very much, I will study more on ClientOnly.

[Nextdrive-NeilChen]

To whom it may concern, I just want to leave some notes if there is anyone when may have found helpful. Thanks to @bertrandk and @mrin9 tips, below are what I have done and using vitepress it now builds and works properly:

api_service.vue

<template>
    <!-- For render-style=read you should try to provide height of rapi-doc element as it needs to calculate scroll positions-->
    <rapi-doc
        ref="rapidoc"
        theme="light"
        allow-spec-url-load="false"
        allow-spec-file-load="true"
        show-header="false"
        show-info="true"
        font-size="largest"
        render-style="focused"
        allow-try="true"
        regular-font="Arial"
        mono-font="monospace"
        bg-color="#ffffff"
        nav-bg-color="#fafafa"
        nav-text-color="#a9b7d0"
        nav-hover-bg-color="#ffebea"
        nav-hover-text-color="#9b0700"
        nav-accent-color="#f87070"
        primary-color="#F63C41"
        show-method-in-nav-bar="as-colored-block"
        nav-item-spacing="relaxed"
        style="height:88vh; width:100%"
    ></rapi-doc>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-facing-decorator";
// import "rapidoc";  // comment this line out

@Component({
    name: "rapidoc",
})

export default class ApiService extends Vue {
    mounted() {
        // do the import here
        import('rapidoc').then(() => {
            this.$nextTick(() => {
                // have the spec in json ready somewhere
                // in my case, it's under docs/.vitepress/dist/swagger_source
                this.$refs.rapidoc.loadSpec(`./swagger_source/api_service.json`);   
            })
        })
    }
}
</script>

<style scoped>
/* Overwrite CSS global vars to style web component */
rapi-doc {
    overflow-y: visible;
    overflow-x: hidden;
}
</style>

api_service.md

---
{
    title: "API Service",
    layout: page,
}
---

<script setup>
    import ApiService from "./api_service.vue";
</script>

<ClientOnly>
    <ApiService></ApiService>
</ClientOnly>

index.md

---
    layout: doc
---

# Documentations

## [API Service](./api_service.md)

if any one needs more detailed information, leave me a message and I will try to help as I can. Thanks.