The following dependencies are imported but could not be resolved

app.js

import './bootstrap';

import { createApp } from "vue";
import App from 'components/app.vue';

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

welcome.blade.php

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app">

    </div>
</body>
</html>

app.vue

<template>
TEST
</template>

vite.confin.js

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

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

How can I solve it?

shaungbhone

3 years ago

Level 28

import like this import App from '/components/app.vue';

Sinnbeck

3 years ago

Level 102

Can you try telling it to start from current directory (just like the bootstrap import )

import App from './components/app.vue';

Please or to participate in this conversation.