Import statements breaks script setup Nuxtjs 3

Question

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

I'd give a try to that one, maybe it'll fix the issue: https://stackoverflow.com/a/72055404/8816585 — kissu, Oct 24 '22 at 02:40
Also, maybe try with `import HomeIcon from '@heroicons/vue/24/outline'`? Not sure, never saw that kind of issue before. — kissu, Oct 24 '22 at 02:41

flackokj · Answer 1 · 2022-10-24T14:55:42.713

1

What seems to work is by extracting the import statement in a different <script> and also exporting it as a component. I now have 2 <script> tags; one with 'setup' attribute and one without.

My final code:

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

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

export default {
    components: {
        HomeIcon,
    },
};
</script>

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

But even though everything looks to be working fine in the <script setup>, it seems that my linter plugin still doesn't recognize that I do use the declared variable (see img1). img1

List of plugins I use:

ESLint
Javascript (ES6) code snippets
Prettier
Vetur
Vue Language Features (Volar)

edited Oct 24 '22 at 14:55

answered Oct 24 '22 at 14:52

flackokj

33
6

You should clearly not have to do such thing. Can you try to replicate your issue with a brand new project that could be hosted on Github? – kissu Oct 24 '22 at 14:54
You can follow [this repo](https://github.com/flackokj/nuxt-issues/tree/issue-1) where I added some test code which reproduces the bug for me. Thanks for helping! – flackokj Oct 24 '22 at 16:40

score 1 · Accepted Answer · answered Oct 24 '22 at 20:22

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

Import statements breaks script setup Nuxtjs 3

2 Answers2