Redocly / Redocly/redoc

Redoc using CDN in Vue Template raises `require is not defined` error

Open
#2,216 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Type: Bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.