Vue3 integrated error

[13RTK]

• Overview
  I tried pnpm and yarn, but they both can't work, the error messages are the same, I can make sure that I installed the dependencies.

• Error message
  The error message after the yarn run dev:
  

• Project Overview
  

• Info
  node version: v18.18.0
  yarn version: 1.22.19
  pnpm version: 8.7.6
  PC: Macbook Air(M1 chip)
  The steps I followed: shoelace-vue

My package.json file:

{
    "name": "vue-project",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "@shoelace-style/shoelace": "github:shoelace-style/shoelace",
        "vue": "^3.3.4"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.4.0",
        "vite": "^4.4.11"
    }
}

My main.js file

import { createApp } from "vue";
import App from "./App.vue";
import "@shoelace-style/shoelace/dist/themes/light.css";
import "@shoelace-style/shoelace/dist/themes/dark.css";
import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path";

setBasePath(
    "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.11.2/cdn/"
);

createApp(App).mount("#app");

My vite.config.js file

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => tag.startsWith("sl-"),
                },
            },
        }),
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },
});

My App.vue file

<template>
    <div class="container">
        <h1>QR code generator</h1>

        <sl-input
            maxlength="255"
            clearable
            label="Value"
            v-model="qrCode"
        ></sl-input>

        <sl-qr-code :value="qrCode"></sl-qr-code>
    </div>
</template>

<script setup>
import { ref } from "vue";
import "@shoelace-style/shoelace/dist/components/qr-code/qr-code.js";
import "@shoelace-style/shoelace/dist/components/input/input.js";

const qrCode = ref();
</script>

<style>
.container {
    max-width: 400px;
    margin: 0 auto;
}

sl-input {
    margin: var(--sl-spacing-large) 0;
}
</style>

[claviska]

This is a lot of info to digest, but it looks like you're overriding Vite's resolver so it's looking in /src instead of node_modules.

    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },

You can either copy Shoelace manually into your src folder (not recommended) or reconfigure Vite to look at node_modules before trying other paths.

[13RTK]

Thank you for your patient response. I have reinstalled the @shoelace-style/shoelace package, and it suddenly started working! I realized that the @shoelace-style/shoelace/dist/ directory was missing in the node_modules folder, possibly due to a network issue on my end. Therefore, the configuration in Vite was not incorrect, and the official web steps were indeed correct.