Redoc using CDN in Vue Template raises `require is not defined` error
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 25.9k
- Forks
- 2.4k
- Avg merge
- 13h 10m
- Merged PRs (30d)
- 4
Description
Describe the bug
Hello guys, Awesome work on this. Really cool tool to use....
As there is no support for VueJS, I tried adding the CDN to the index.html of my project but I was not able to make use of the redoc object in my Vue Components.
In order to resolve this, I used a workaround by injecting the CDN url into my component directly which works but I got this error when using the 2.0 CDN
Uncaught ReferenceError: require is not defined
Here is my Code
<template>
<div id="redoc-container">
<redoc spec-url="../src/assets/docs/spec.yaml"></redoc>
</div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
onMounted(() => {
const redocScript = document.createElement("script");
redocScript.setAttribute(
"src",
"https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"
);
document.head.appendChild(redocScript);
});
</script>
Expected behavior
It should load the Spec file correctly
Minimal reproducible OpenAPI snippet(if possible)
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the error with the CDN script added to index.html and the shown Vue component using redoc.standalone.js. Inspect how the CDN bundle is built and loaded, then verify that the redoc object is usable in the component and the spec file loads without a require is not defined error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- documentation, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Needs clarification
- Newbie friendliness
- 45/100