[plugin:vite:import-analysis] Failed to resolve import

[burakakca]

Hello ,

When i click the chat button i get this error;

Problem because of some file first letter big or small.

I fix it for you .

import "virtual:windi.css";
import "./styles/index.css";
import "./styles/transitions.css";

// ACCOUNT

export { default as AccountProfile } from "./account/profile.vue";
export { default as AccountAvatar } from "./account/avatar.vue";
export { default as AccountBadge } from "./account/badge.vue";
export { default as AccountHome } from "./account/home.vue";
export { default as AccountStars } from "./account/stars.vue";
export { default as AccountReactions } from "./account/Reactions.vue";

// LINKs

export { default as AccountMateButton } from "./account/mate/Button.vue";
export { default as AccountMateList } from "./account/mate/List.vue";

// USER

export { default as UserCredentials } from "./user/credentials.vue";
export { default as UserPassphrase } from "./user/Pass.vue";
export { default as UserAuth } from "./user/auth.vue";
export { default as UserLogin } from "./user/login.vue";
export { default as UserHome } from "./user/home.vue";
export { default as UserIcon } from "./user/icon.vue";
export { default as UserPanel } from "./user/panel.vue";
export { default as UserProfile } from "./user/profile.vue";
export { default as UserProfileField } from "./user/profile/field.vue";

export { default as RoomProfile } from "./room/profile.vue";

//SPACE

export { default as SpacePlane } from "./space/plane.vue";
export { default as SpaceGuest } from "./space/guest.vue";
export { default as SpaceArrow } from "./space/Arrow.vue";

// POSTS

export { default as PostCard } from "./post/card.vue";
export { default as PostForm } from "./post/form.vue";
export { default as PostList } from "./post/list.vue";
export { default as PostPage } from "./post/page.vue";

export { default as PostFeedBlock } from "./post/feed/Block.vue";
export { default as PostFeedLabel } from "./post/feed/Label.vue";
export { default as PostFeedList } from "./post/feed/List.vue";

export { default as PostActionStar } from "./post/action/Star.vue";
export { default as PostActionUpdate } from "./post/action/Update.vue";
export { default as PostActionBan } from "./post/action/Ban.vue";

//CHAT

export { default as ChatRoom } from "./chat/Room.vue";
export { default as ChatMessage } from "./chat/Message.vue";
export { default as ChatPrivate } from "./chat/Private.vue";
export { default as ChatPrivateCount } from "./chat/PrivateCount.vue";

// FORMS

export { default as FormLink } from "./form/Link.vue";
export { default as FormPicture } from "./form/Picture.vue";
export { default as FormText } from "./form/Text.vue";
export { default as FormYoutube } from "./form/Youtube.vue";

// UTILS

export { default as LogTree } from "./log/tree.vue";

export { default as QrShow } from "./qr/show.vue";
export { default as QrLoad } from "./qr/load.vue";

export { default as EmbedYoutube } from "./embed/youtube.vue";

export { default as UiModal } from "./ui/modal.vue";

export { default as UtilPulse } from "./util/pulse.vue";
export { default as UtilGraph } from "./util/graph.vue";
export { default as UtilShare } from "./util/share.vue";
export { default as Utiltools } from "./util/tools.vue";
export { default as UtilRelay } from "./util/Relay.vue";

export * from "@composables";

[davay42]

Hi! I start all components names with a capital letter as it's more or less a Vue convention. Seems like it depends on the case sensitivity of your system. As I know Mac OS doesn't care about the capital letters ) Git doesn't trigger changes when I change case for the files.

[burakakca]

OS : Linux Mint 20.2 Cinnamon

[lospringliu]

git mv to change the capitalization in git repos

[davay42]

Again, should I rename all the components to start with a lowercase letter for better compatibility? 😅

[scenaristeur]

same kind of thing for me on local when clicking on Topics icon, on linux Mint too

[scenaristeur]

Vue seems to use PascalCase : necessarily two words with Capital

https://eslint.vuejs.org/rules/component-name-in-template-casing.html

https://eslint.vuejs.org/rules/multi-word-component-names.html

[davay42]

Looks like something goes wrong at unplugin-vue-components in vite build. May be some node parameters need to be set? I'm considering new ways to structure the components, need some time to figure it out. 🤓

[davay42]

Check if these parameters are in your vite.config.js.

Components({
  ...
  deep: true,
  directoryAsNamespace: true,
  ...
})

[scenaristeur]

same warnings with

Components({ ... deep: true, directoryAsNamespace: true, ... })

[davay42]

So there's some Linux file system feature to deal with. It's strange that nav-bar loads correctly though.

[davay42]

@scenaristeur @burakakca Guys! I think I've fixed this issue with full rearrangement of the components in 3b47c98ac103c46a39aa8437a3f199f2593ccb6c

I've turned the directory-as-namespace option for the unplugin-vue-components plugin and renamed all the components to their full names. They are imported in index.js files in each folder and then reexported from the root index.js. Hope this should work for you.

P.S. Now there's also a component stories showcase enabled by Histoire gun-vue.js.org/components/ - I'll try to bring all of the components there for better documentation and examples. Stay tuned!

[scenaristeur]

I will try it soon