I made a simple blade view:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> @yield('title') | MY APP</title>
@vite([
'resources/css/style.css',
'node_modules/bootstrap/dist/css/bootstrap.css',
'node_modules/@fortawesome/fontawesome-free/css/all.css'
])
</head>
<body>
<nav id="deltaNavbar">
<div class="logoContainer "><a href="{{ url('/') }}"><img src="{{ url('/logo.png') }}"></a> </div>
</nav>
@section('main')
@show
@vite([
'node_modules/jquery/dist/jquery.js',
'node_modules/bootstrap/dist/js/bootstrap.bundle.js',
'resources/js/main.js'
])
</body>
</html>
That is loaded via this route:
Route::get('/', function () {
return view('main');
});
And I install jquery, bootstrap and font-awesome via npm:
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.2",
"vite": "^4.0.0"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.5.1",
"bootstrap": "^5.3.2",
"dotenv": "^16.3.1",
"jquery": "^3.7.1",
"nodejs": "^0.0.0"
}
}
I did the nessesary installations as well:
npm install
And I used this vite.config.js
:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/style.css',
'resources/js/main.js',
'node_modules/jquery/dist/jquery.js',
'node_modules/bootstrap/dist/js/bootstrap.bundle.js',
'node_modules/bootstrap/dist/css/bootstrap.css',
'node_modules/@fortawesome/fontawesome-free/css/all.css'
],
refresh: true,
}),
],
});
But once I run npm build
and visit the homepage I get the following error:
Unable to locate file in Vite manifest: node_modules/jquery/dist/jquery.js.
Any idea why that does happen? I have no indication why.