tailwindlabs / heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.
https://heroicons.com
MIT License
21.03k stars 1.27k forks source link

ERROR [Vue warn]: Error in render: "TypeError: _openBlock is not a function" #889

Closed KellsWorks closed 1 year ago

KellsWorks commented 1 year ago

l installed the package using yarn in Nuxt.js and just tried any icon component and it's pulling up that error, trace

node_modules/@heroicons/vue/24/solid/BeakerIcon.jsopen in editor
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = require("vue")

module.exports = function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    fill: "currentColor",
    "aria-hidden": "true"
  }, [
reinink commented 1 year ago

Hey! It looks like this is the same error as #229. The issue is caused by using the @heroicons/vue library in a Vue 2 project. This project only supports Vue 3 at this time.

You can still use Heroicons in your Vue 2 project though! All the icons are just SVGs, so you can copy and paste them into your project as needed. You just won't be able to use this Vue library version of them.

Hope that helps! 👍