Опубликовано:

Четыре распространенные ошибки Vite в Laravel

Источник: «4 Common Vite Errors in Laravel»
Узнайте о четырех распространенных ошибках, с которыми можно столкнуться при использовании Vite в приложениях Laravel. Рассмотрим возможные причины и способы их устранения.

Vite — фантастический инструмент, позволяющий быстро создать фронтенд ресурсы для приложения Laravel. Как и с любым другим инструментом, при первом использовании могут возникнуть проблемы. Когда вы сталкиваетесь с ошибкой, она может замедлить прогресс, пока вы пытаетесь понять, что пошло не так.

В этой статье мы рассмотрим четыре распространенные ошибки, с которыми можно столкнуться при использовании Vite с Laravel:

Надеюсь, к концу статьи вы будете лучше понимать, как исправить эти ошибки и вернуться к созданию своего приложения.

Для целей статьи будем считать, что мы работаем над свежим приложением Laravel 11.

Vite manifest not found at: public/build/manifest.json

При использовании Vite с Laravel часто встречается ошибка Vite manifest not found at: public/build/manifest.json. Она возникает при загрузке страницы, когда плагин Vite для Laravel не может найти файл манифеста, созданный в процессе сборки. Давайте рассмотрим, что представляет собой файл манифеста и два вероятных сценария, в которых может возникнуть эта ошибка.

Использование конфигурации Laravel/Vite по умолчанию

Если вы не изменили ни одной команды в файле package.json, поставляемом со свежей установкой Laravel 11, то можете выполнить одну из следующих команд, чтобы собрать ресурсы и сгенерировать файл манифеста:

Если выполнить любую из этих команд, будет создан новый файл public/build/manifest.json, который будет выглядеть следующим образом:

{
  "resources/css/app.css": {
    "file": "assets/app-rlbWHTKs.css",
    "src": "resources/css/app.css",
    "isEntry": true
  },
  "resources/js/app.js": {
    "file": "assets/app-Xaw6OIO1.js",
    "name": "app",
    "src": "resources/js/app.js",
    "isEntry": true
  }
}

Файл manifest.json сопоставляет исходные файлы с файлами CSS и JS, которые Vite обработал и создал. Это означает, что в представлениях Blade можно использовать что-то вроде этого:

@vite('resources/css/app.css')

В результате сгенерируется следующий HTML код:

<link rel="preload" as="style" href="http://example.test/build/assets/app-rlbWHTKs.css" />

Таким образом, без файла manifest.json интеграция Vite для Laravel не будет знать, какой из собранных файлов относится к исходному файлу.

Во многих случаях запуск соответствующего скрипта сборки (npm run dev или npm run build) сгенерирует файл manifest.json и решит проблему.

Использование собственной конфигурации Laravel/Vite

Если вы изменили конфигурацию Vite, возможно, что плагин Vite для Laravel не может найти файл manifest.json. Например, вы обновили файл vite.config.js, чтобы выводить собранные файлы в каталог public/dist, добавив опцию buildDirectory:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

Вместо того чтобы сохранять собранные файлы в public/build, они будут сохраняться в public/dist, то есть файл manifest.json будет находиться в public/dist/manifest.json. Однако плагин Laravel Vite по-прежнему ищет файл manifest.json в директории по умолчанию public/build при использовании директивы @vite в представлении Blade.

Чтобы решить эту проблему, можно воспользоваться расширенными возможностями настройки плагина Vite и указать местоположение файла manifest.json, заменив директиву @vite в представлениях Blade на следующую:

{{ Vite::useBuildDirectory('dist')->withEntryPoints(['resources/css/app.css', 'resources/js/app.js']) }}

Как видно из примера выше, используется метод useBuildDirectory для указания директории сборки. Также используется метод withEntryPoints для указания точек входа, ранее переданных директиве @vite. После этого плагин Laravel Vite сможет найти файл manifest.json в правильной директории, и ошибка будет устранена.

Unable to locate file in Vite manifest: resources/sass/app.scss

Ещё одна распространённая ошибка при использовании Vite в проекте Laravel — Unable to locate file in Vite manifest: resources/sass/app.scss. Эта ошибка возникает, когда Vite не может найти файл, указанный в директиве @vite в представлениях Blade.

Например, у вас может быть файл с именем resources/sass/app.scss, который вы пытаетесь включить в представление Blade с помощью директивы @vite:

@vite('resources/sass/app.scss')

Давайте рассмотрим некоторые возможные причины и решения этой ошибки.

Проверьте путь к файлу и его существование

Во-первых, рекомендую проверить правильность пути к файлу, используемого в представлении Blade. Например, вы можете использовать @vite('resources/sass/app.scss'), когда на самом деле файл находится по адресу resources/css/app.scss.

Кроме того, проверьте, существует ли файл в указанном месте.

Дважды (и трижды!) проверьте пути и имена файлов при выполнении этих проверок. Возможно, в пути допущена опечатка или использовано неправильное расширение файла. Если путь к файлу неверен, его необходимо исправить, для устранения ошибки.

Пересоздайте файл манифеста

Еще одно возможное решение — попробовать собрать ресурсы с помощью соответствующего скрипта сборки (npm run dev или npm run build). Возможно, используется старый файл манифеста, не включающий файл, который вы пытаетесь включить в представление Blade. Запуск сценария сборки сгенерирует новый файл манифеста, который может включать файл, который вы пытаетесь включить, что решит проблему.

Проверьте, обработал ли Vite файл

Если после подтверждения существования файла и восстановления ресурсов ошибка не исчезла, это означает, что Vite не обработала файл.

Быстрый способ проверить это — заглянуть в файл public/build/manifest.json и посмотреть, указан ли файл, который вы пытаетесь подключить, в свойстве src одной из записей. Например, если посмотреть на этот файл manifest.json, то можно увидеть, что файл resources/sass/app.scss не указан:

{
    "resources/css/app.css": {
        "file": "assets/app-rlbWHTKs.css",
        "src": "resources/css/app.css",
        "isEntry": true
    },
    "resources/js/app.js": {
        "file": "assets/app-Xaw6OIO1.js",
        "name": "app",
        "src": "resources/js/app.js",
        "isEntry": true
    }
}

В данном примере файл resources/sass/app.scss присутствует:

{
    "resources/js/app.js": {
        "file": "assets/app-Xaw6OIO1.js",
        "name": "app",
        "src": "resources/js/app.js",
        "isEntry": true
    },
    "resources/sass/app.scss": {
        "file": "assets/app-DtFeYo_o.css",
        "src": "resources/sass/app.scss",
        "isEntry": true
    }
}

Если файл не указан в файле manifest.json, можно проверить файл vite.config.js, чтобы убедиться, что он включается в процесс сборки. Например, в этом файле vite.config.js видно, что файл resources/sass/app.scss не включается в массив input:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

Существует множество причин, по которым этот файл может быть не включен в процесс сборки. Например, возможно, вы переходите от использования CSS к использованию SCSS и забыли обновить файл vite.config.js, чтобы включить в него путь к новому SCSS-файлу. Я много раз забывал это сделать!

В этом случае можно обновить файл vite.config.js, указав в нём правильный путь к файлу:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

Запуск сценария сборки теперь должен подключить файл resources/sass/app.scss в процесс сборки, и, надеюсь, ошибка будет устранена.

Uncaught ReferenceError: $ is not defined (При использовании jQuery)

Еще одна ошибка, с которой можно столкнуться при использовании Vite, — Uncaught ReferenceError: $ not defined. Эта ошибка возникает, когда в коде JavaScript используется переменная $, но jQuery не загружен.

Проверьте, установлен ли jQuery

Возможной причиной возникновения данной ошибки является то, что jQuery не был включен в процесс сборки Vite. Первое, что необходимо проверить, это установлен ли jQuery. Если используете NPM для управления зависимостями JavaScript, можно использовать команду npm list.

Например, если проект находится в каталоге /Users/ashallen/www/my-laravel-app, можно выполнить следующую команду, проверяющую, установлен ли jQuery:

npm list jquery

Если jQuery установлен, вы увидите что-то вроде:

my-laravel-app@ /Users/ashallen/www/my-laravel-app
└── jquery@3.7.1

Если он не установлен, результат может выглядеть так:

my-laravel-app@ /Users/ashallen/www/my-laravel-app
└── (empty)

Если пакет не установлен, его можно установить в качестве зависимости разработки с помощью команды:

npm install jquery -D

Проверьте, импортируется ли jQuery

После установки jQuery необходимо сделать его доступным во всех файлах, где используется $. Например, его можно включить в файл resources/js/app.js, если он там используется:

import './bootstrap';
import $ from 'jquery';

// Затем вы можете обратиться к переменной $...

Предположим, что есть файл resources/js/MyClass.js, в котором используется jQuery. Создадим простой файл примера исключительно в демонстрационных целях:

export default class MyClass {
    init() {
        $('body').on('click', function () {
            console.log('Body clicked');
        });
    }
}

Класс resources/js/MyClass.js имеет единственный метод init, прикрепляющий слушателя события click к элементу body. При клике по элементу body он отправляет сообщение в консоль.

Затем в файле resources/js/app.js импортируем класс resources/js/MyClass.js и вызовем метод init:

import './bootstrap';
import $ from 'jquery';
import MyClass from "./MyClass.js";

new MyClass().init();

Теперь, когда страница загружается, возникает ошибка Uncaught ReferenceError: $ not defined, потому что переменная $ недоступна в файле resources/js/MyClass.js; она доступна только в файле resources/js/app.js. Итак, чтобы решить данную ошибку, есть два варианта:

Если импортировать jQuery в файл resources/js/MyClass.js, его можно обновить следующим образом:

+import $ from 'jquery';
+
 export default class MyClass {
     init() {
         $('body').on('click', function () {
             console.log('Body clicked');
         });
     }
 }

В качестве альтернативы, если решили присвоить переменную $ объекту window в файле resources/js/app.js, можно обновить файл следующим образом:

 import './bootstrap';
 import MyClass from "./MyClass.js";
 import $ from 'jquery';
+
+// Назначение переменной $ объекту window
+window.$ = $;

 new MyClass().init();

После внесения любого из этих изменений ошибка Uncaught ReferenceError: $ not defined, должна быть устранена.

vite: Permission denied

Ещё одна распространённая ошибка, с которой можно столкнуться при выполнении команды Vite, — vite: Permission denied. Эта ошибка возникает, если попытаться запустить команду Vite с недостаточными правами.

Например, вы могли установить зависимости NPM с помощью sudo npm install, а не npm install. В результате этого каталог node_modules и его содержимое будут принадлежать пользователю root, а не вашей учетной записи. Это приведет к тому, что при попытке выполнить команду Vite доступ к необходимым файлам будет ограничен.

Как правило, решением данной проблемы является изменение прав владельца каталога node_modules и его содержимого, чтобы вы могли запускать команды Vite. Один из возможных способов сделать это — рекурсивно изменить владельца каталога node_modules и его содержимого на вашу учетную запись пользователя. Предположим, что ваша учетная запись — ash-allen. Можно выполнить следующую команду, чтобы изменить владельца:

sudo chown -R ash-allen ./node_modules

Команда chown изменит владельца каталога node_modules и его содержимого на учетную запись пользователя ash-allen. Флаг -R указывает команде chown рекурсивно изменить владельца каталога. После выполнения этой команды вы сможете запускать команды Vite, не сталкиваясь с ошибкой vite: Permission denied.

Заключение

Мы рассмотрели четыре распространенные ошибки, с которыми можно столкнуться при использовании Vite с Laravel:

Мы рассмотрели причины возникновения этих ошибок и возможные решения для каждой из них. Надеюсь, теперь вы лучше понимаете, как их устранить, и вернуться к созданию своего приложения Laravel с Vite.

Комментарии


Предыдущая Статья

Декодирование CSS селекторов: :has(:not) и :not(:has)