I'm currently grappling with using Vite for front-end asset compilation in my Laravel project. The main issue I am having is when it comes to accessing JavaScript packages in Blade files (HTML).
In my attempt to set up Summernote, I've encountered challenges, including confusion about including the summernote-bs5.js
file in the head section – it appears to be a configuration file, and the corresponding summernote-bs5.css
is not where I expected it. My knowledge of JavaScript and its packages is limited, but the provided instructions seem unclear, and I'm unsure about the correct approach.
I've included the following Vite configuration in my HEAD section: @vite(['resources/css/app.css', 'resources/js/app.js'])
which should load both the CSS and JavaScript as needed for people visiting the page in their browser.
Could anyone provide insights or solutions regarding how to effectively compile assets with Vite and access JavaScript packages like jQuery or Summernote in Laravel Blade files? For example one error I am seeing in the browser is: Uncaught TypeError: $(...).summernote is not a function
My Vite configuration file is:
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,
}),
],
});
The package JSON file (By the way, I want to get rid of tailwind and use bootstrap 5):
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.2",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^1.6.1",
"laravel-vite-plugin": "^1.0.0",
"postcss": "^8.4.31",
"tailwindcss": "^3.1.0",
"vite": "^5.0.0"
}
}
Here are the default JavaScript files in the resources folder:
This is the contents of app.js
:
import './bootstrap';
import Alpine from 'alpine.js';
window.Apline = Alpine;
Alpine.start();
The compiled app.js loading on the web page:
Here is some of the bootstrap.js
which I never touched:
Thank you in advance for your expertise!
package.json
is and runningnpm install
and thennpm run dev
seems to have it work... but now I have no idea how to incorporate it into my project. — Bogeynpm install
, that will download all of the files into a folder callednode_modules
in your project root directory. Laravel switched frommix
tovite
, did you happen to read this guide on how to bundle your assets? — Brian Wozeniakmix
andvite
and just use webpack directly. In my case I use webpack so that it will combine all of the CSS into one single file that is minified, one single Javascript file that is minified, and many image assets will be optimized/compressed that are used when it comes to styling or imagery on the website. Are you getting errors, or where are you getting stuck? — Brian Wozeniaknpm run dev
and the vite builds the app.js with the contents I've put in the previous app.js... I've tried clearing laravel cache and npm cache and browser cache and nothing changes. — Bogeynpm run dev
for compiling assets, what does yourpackage.json
file look like. Please add both of those to your original question above by editing it. Could you also add a screenshot of what assets were compiled, you know the results of runningnpm run dev
? — Brian Wozeniaknpm run dev
, I would like to see the output from that. When you load the webpage after everything is compiled, and view the source do you see it loading up your JS and CSS? Also have you runnpm run build
? The other (npm run dev
) is more for real-time web development using your web browser and seeing any changes you make instantly, you may have better luck just using the build version for now. — Brian Wozeniak[plugin:vite:import-analysis] Failed to resolve import "jquery" from "resources\summernote\summernote-bs5.js". Does the file exist?
for everything (And not only for jquery... for every import they are doing — Bogeyjquery
dependency in yourpackage.json
. Make sure to require it, runnpm install jquery
. You may need to install the others you are missing too. Alternatively you can it include jquery via a CDN and skip installing it via NPM. You would then likely want to add this to your vite configuration input array:https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js
. You may also want to start simple before trying to get your full application to work. If I were you I would try to get a simple hello world type JS to load up and compile. Once you get that to work, then press harder into including more packages. — Brian Wozeniakalert('hi');
in app.js works if I remove all of the imports. After importing everything and runningnpm run dev
I get the following error in the consoleUncaught TypeError: $(...).summernote is not a function
— BogeyUncaught TypeError: $(...).summernote is not a function
. — Bogeynpm run dev
isn't showing any errors. Just a bunch of page reloads as I try new things. — Bogeynpm install jquery
, but you should ensure you have all of them. If you get an error that something is not a function it would indicate to me that you didn't install summernote, meaning to runnpm install summernote
? I definitely don't see that in yourpackage.json
, which means it wasn't installed yet. — Brian Wozeniak