Import statements breaks script setup Nuxtjs 3

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:

<template>
  <HomeIcon class="w-5 h-5">
  <h1>{{myName}}</h1>
</template>

<script setup>
import {HomeIcon} from '@heroicons/vue/24/outline'

const myName = ref('username')
</script>

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

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

Advertisement

Answer