question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using with Vue 3.0

See original GitHub issue

Is there a way to use this package with Vue 3?

import { createApp } from "vue";
import App from "./App.vue";
import "bootstrap/dist/css/bootstrap.min.css";
import router from "./router";

import VueHighlightJS from "vue-highlight.js";
import json from "highlight.js/lib/languages/json";
import "highlight.js/styles/default.css";

createApp(App)
    .use(router)
    .use(VueHighlightJS, { languages: json })
    .mount("#app");

Results in

Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (tslib.es6.js?9ab4:21)
    at __extends (tslib.es6.js?9ab4:25)
    at eval (vue-highlight.es.js?c964:350)
    at eval (vue-highlight.es.js?c964:413)
    at Module../node_modules/vue-highlight.js/dist/vue-highlight.es.js (chunk-vendors.js:1396)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (main.js:15)
    at Module../src/main.js (app.js:1122)

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:5
  • Comments:5

github_iconTop GitHub Comments

4reactions
ddzycommented, May 12, 2021

Any progress?

3reactions
CMCDragonkaicommented, Jan 6, 2021

I’m interested in this, but I don’t get TypeError. I’m getting warnings like:

WARNING in ./node_modules/vue-highlight.js/dist/vue-highlight.es.js 21:28-31
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, Fragment, KeepAlive, Static, Suspense, Teleport, Text, Transition, TransitionGroup, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compile, computed, createApp, createBlock, createCommentVNode, createHydrationRenderer, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, devtools, getCurrentInstance, getTransitionRawChildren, h, handleError, hydrate, inject, isProxy, isReactive, isReadonly, isRef, isVNode, markRaw, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, toDisplayString, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useCssModule, useCssVars, useSSRContext, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers, withScopeId)
 @ ./src/index.ts 7:43-70

WARNING in ./node_modules/vue-highlight.js/dist/vue-highlight.es.js 413:2-5
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, Fragment, KeepAlive, Static, Suspense, Teleport, Text, Transition, TransitionGroup, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compile, computed, createApp, createBlock, createCommentVNode, createHydrationRenderer, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, devtools, getCurrentInstance, getTransitionRawChildren, h, handleError, hydrate, inject, isProxy, isReactive, isReadonly, isRef, isVNode, markRaw, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, toDisplayString, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useCssModule, useCssVars, useSSRContext, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers, withScopeId)
 @ ./src/index.ts 7:43-70
Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue 3: Start Using it Today
There are two ways to start using Vue 3. In this article, we'll show you how so you can take advantage of this...
Read more >
Introduction - Vue.js
Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS ...
Read more >
Creating Your First Vue 3 Project - A Vue Tutorial - LearnVue
The biggest change in Vue 3 is the introduction of the Composition API. In this new structure, we are able to organize our...
Read more >
A definitive guide to Vue 3 components - LogRocket Blog
What are components in Vue 3? ... Components are reusable pieces of UI code that build functional web applications. They can either be...
Read more >
What's new in Vue 3 — a roundup. Vue 3 - Medium
Why Vue 3? · Blazing fast, Vite-powered build toolchain · More ergonomic Composition API syntax via <script setup> · Improved TypeScript IDE support...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found