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.
Vue.js plugin "ReferenceError: hljs is not defined"
See original GitHub issueA Vue.js plugin should be self-contained and not require an external script.
Currently however, the Vue.js component for highlight.js depends on hljs but hljs is not in scope in its definition.
https://github.com/highlightjs/highlight.js/blob/master/src/plugins/vue.js#L24
If a Vue.js user uses npm or yarn to install highlight.js, and follows the instructions in the section Using with Vue.js they will receive the following error in their browser.
[Vue warn]: Error in render: "ReferenceError: hljs is not defined"
The line that produces this exception is this one:
https://github.com/highlightjs/highlight.js/blob/master/src/highlight.js#L26
Proposal:
- Put the contents of the vue.js plugin file inside a function that accepts
hljsas an argument and returnsVuePlugin. Make the file export that function. - Change the plugins/vue.js import to import this new function instead of
VuePlugin - Change this location to invoke the wrapper function.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:39 (22 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
If you’re offering a plugin for Vue that provides a component, as a Vue developer I’d generally expect that component to be completely self-contained, where it imports the dependencies it needs. This makes it compatible with any module bundler which will automatically resolve and bundle those dependencies.
Depending on a global being in scope is uncharacteristic of what I think of as a modern Vue component, since Vue is used in many different contexts other than simply being included on a page. Vue is now used in projects (like the Gridsome static site generator, which does do Vue SSR) that manage dependencies automatically (users aren’t usually writing their own
<head>tags anymore, in many cases they’re being automatically managed by a build tool.)Updating the component to automatically import HLJS would allow it to be used anywhere where Vue components can be used, without any issues. If that option isn’t ideal (if it, for example, creates duplicate imports of HLJS) then dependency injection (like what’s implemented in #2816) is the next best option.
Well, I see arguments both ways. I’m trying to remember if the past issue or two were all Vue related or if there was some larger confusion. Globals are indeed dirty, but that ship has sailed on the core web build with
hljs… and I’ve had this thought before (about people using npm in the browser), so seemed worth considering. I’ll count both of you as “no globals” votes I think. 😃