It seems that when I’m using the import
statement in the <script setup>
all code below it stops working.
I installed the @heroicons package and use the import statement to use it as a component in my <template>
. But everything below the import statements does not work anymore. My code:
JavaScript
x
11
11
1
<template>
2
<HomeIcon class="w-5 h-5">
3
<h1>{{myName}}</h1>
4
</template>
5
6
<script setup>
7
import {HomeIcon} from '@heroicons/vue/24/outline'
8
9
const myName = ref('username')
10
</script>
11
When running the code above I do not see “username” as a heading as specified in my code. I also see a ESlint warning
myName is declared but it’s value is never read
The moment I comment the import
statement, the myName
ref seems to work again.
What I use:
- VS Code
- Nuxtjs 3
- Tailwind CSS
- Heroicons package
- PNPM as package manager
Advertisement
Answer
I fixed the various issues, I’ll take the reference of your code here for the changelog:
<HomeIcon>
wasn’t closed aka<HomeIcon />
vue
was missing as a dependency for@heroicons
- PNPM needed to be shamefully hoist to work properly
- clean reinstall of your
node_modules
+pnpm-lock.yaml
Here is the Pull request with the various fixes: https://github.com/flackokj/nuxt-issues/pull/1/files