[BUG] Error: Failed to resolve import "../../molecules/SfMenuItem/SfMenuItem" on Vite.js

[runyasak]

Describe the bug
I have initiated project, Vue 3 with Vite.js, and try to import some components, such as SfProductCard.
Perhaps, the error appear that Failed to resolve import "../../molecules/SfMenuItem/SfMenuItem" ....

How to reproduce
Steps to reproduce the behavior:

1. Initiate project with Vue 3, Vite.js, and TypeScript
2. Install dependencies and @storefront-ui
3. Import SfProductCard and implement on App.vue
4. Error appear

Expected behavior
This error should not appear when import and implement on App.vue

Actual behavior
The error appear: Failed to resolve import "../../molecules/SfMenuItem/SfMenuItem" ....

Code examples

• App.vue

<script setup>
import { RouterView } from "vue-router";
import { SfProductCard } from "../node_modules/@storefront-ui/vue";
</script>

<template>
  <SfProductCard image="https://picsum.photos/200/300" />
  <RouterView />
</template>

• vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { join } from "node:path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: /~(.+)/,
        replacement: join(process.cwd(), "node_modules/$1"),
      },
      {
        find: /@\//,
        replacement: join(process.cwd(), "./src") + "/",
      },
    ],
  },
});

Git repository
https://github.com/runyasak/my-storefront-ui

Screenshots

Devices:

• Device: Desktop
• OS: macOS Monterey [12.3.1]
• Browser: Chome [104.0.5112.79]

┆Issue is synchronized with this Jira Task by Unito

[ymaheshwari1]

@runyasak Have you tried directly importing storefront-ui components from @storefront-ui/vue?

[runyasak]

@runyasak Have you tried directly importing storefront-ui components from @storefront-ui/vue?

Yes, I have imported directly from @storefront-ui/vue.

You can checkout on my code:
https://github.com/runyasak/my-storefront-ui/blob/main/src/App.vue

Actually, this error is appeared in @storefront-ui/vue from node_modules.
I'm not sure that my code or configuration work properly or not.

[ymaheshwari1]

@runyasak Have you tried directly importing storefront-ui components from @storefront-ui/vue?

Yes, I have imported directly from @storefront-ui/vue.

You can checkout on my code: https://github.com/runyasak/my-storefront-ui/blob/main/src/App.vue

Actually, this error is appeared in @storefront-ui/vue from node_modules. I'm not sure that my code or configuration work properly or not.

https://github.com/runyasak/my-storefront-ui/blob/main/src/App.vue#L3
Can you change the import to import { SfProductCard } from "@storefront-ui/vue"; and check whether if it also throws some error?

[runyasak]

https://github.com/runyasak/my-storefront-ui/blob/main/src/App.vue#L3 Can you change the import to import { SfProductCard } from "@storefront-ui/vue"; and check whether if it also throws some error?

@ymaheshwari1 I have updated to import { SfProductCard } from "@storefront-ui/vue";.
But still got the same error.

[runyasak]

However, I have tried on Vue 3 with Webpack from Vue CLI.
There don't have errors with the resolving path.
But errors with <template functional> for some Vue 3 syntax breaking changes, like this issue: #2454.
You can check out my demo repo: https://github.com/runyasak/demo-storefront-ui

By the way, we should migrate components to support Vue 3.
And then, fix for resolving the path on Vite.js.

This is just my opinion for discussing.
If I have missed some parts or want to give me some suggestions, please let me know. 😁

[justyna-13]

At the moment there's no support for vue 3 but wr're working on it :)