Module not found: Error: Can't resolve './archive-icon.vue'

[dschiller]

Hi all,

I installed headlessui via npm install @headlessui/vue @heroicons/vue but when running webpack I get those errors:

✖ Mix
  Compiled with some errors in 7.84s

ERROR in ./resources/js/components/ExampleComponent.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/ExampleComponent.vue?vue&type=script&lang=js) 3:0-45
Module not found: Error: Can't resolve './archive-icon.vue' in '/var/www/vhosts/aulus.org/httpdocs/resources/js/components'

ERROR in ./resources/js/components/ExampleComponent.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/ExampleComponent.vue?vue&type=script&lang=js) 4:0-49
Module not found: Error: Can't resolve './duplicate-icon.vue' in '/var/www/vhosts/aulus.org/httpdocs/resources/js/components'

ERROR in ./resources/js/components/ExampleComponent.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/ExampleComponent.vue?vue&type=script&lang=js) 5:0-39
Module not found: Error: Can't resolve './move-icon.vue' in '/var/www/vhosts/aulus.org/httpdocs/resources/js/components'

ERROR in ./resources/js/components/ExampleComponent.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/ExampleComponent.vue?vue&type=script&lang=js) 6:0-39
Module not found: Error: Can't resolve './edit-icon.vue' in '/var/www/vhosts/aulus.org/httpdocs/resources/js/components'

ERROR in ./resources/js/components/ExampleComponent.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/ExampleComponent.vue?vue&type=script&lang=js) 7:0-43
Module not found: Error: Can't resolve './delete-icon.vue' in '/var/www/vhosts/aulus.org/httpdocs/resources/js/components'

Which I think is fine because in the component I copied from https://headlessui.dev/vue/menu are some other vue components imported:

import ArchiveIcon from './archive-icon.vue'
import DuplicateIcon from './duplicate-icon.vue'
import MoveIcon from './move-icon.vue'
import EditIcon from './edit-icon.vue'
import DeleteIcon from './delete-icon.vue'

How do I get those components ?

[dschiller]

When I remove the icons it works. But the used colors like bg-violet-500 are not valid with tailwindcss.

The second entry is mouse hovered but bg-violet-500 is not found so it is white.

Also in the switch component at https://headlessui.dev/vue/switch the colors not existing like bg-teal-900. Also in Radio Group the colors bg-sky-900 and text-sky-100 are missing.

Where are all those colors coming from ?

[osbre]

@dschiller Try this to add violet color

const defaultTheme = require('tailwindcss/defaultTheme')

// ...
    colors: {
        // ... 
        violet: colors.violet,
    },
// ...

[ch-henri]

@dschiller Try import { ChevronDownIcon, ArchiveIcon, DuplicateIcon, PencilIcon, TrashIcon } from '@heroicons/vue/solid'
Some icons have changed their names such as DeleteIcon became TrashIcon
Available icons are listed at https://heroicons.com/