BO
339 9
Asked
Updated
Viewed
1.3k times

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:
The default JS files

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:
The compiled app js

Here is some of the bootstrap.js which I never touched:
I didn't touch the bootstrap js

Thank you in advance for your expertise!

  • 0
    Ok, opening command prompt, going to the directory where the package.json is and running npm install and then npm run dev seems to have it work... but now I have no idea how to incorporate it into my project. — Bogey
  • 0
    I'm using laravel for my framework which has webpack and vite, but I have no idea how to use either of those. Do I cd to the root of my laravel project and install summernote via npm or do I copy the files I got from github to laravel? Which directories from summernote and where in laravel and then how do I put them both together? — Bogey
  • 0
    Yeah, you were on the right track with running npm install, that will download all of the files into a folder called node_modules in your project root directory. Laravel switched from mix to vite, did you happen to read this guide on how to bundle your assets? — Brian Wozeniak
  • 0
    I'm looking for them, but all of the videos youtube gives me is of Hindu programmers barely speaking English and it's hard to understand them. The documentation expects you to know how use vite, just the integration part is explained and haven't gotten to other sources yet — Bogey
  • 0
    https://laracasts.com/discuss/channels/laravel/incorporating-summernote-with-laravel Trying my luck there but no good. Why did they go and make javascript a compiled language!!! — Bogey
  • 0
    Well its not a compiled language, but I understand your point. Instead of loading 5 CSS files and 15 Javascript files, these asset managers do work to ensure you can optimize what sort of payload gets sent to the user which usually results in many less files being transferred at much smaller payloads. I have always skipped mix and vite 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 Wozeniak
  • 0
    Nothing works... I have no idea where to put my summernote files I got from github, do I put them somewhere in the resources folder? In node_modules? In vendor? How do I make it so that vite compiles it and allows me to use it? I removed a previous project I used to try and learn vite and reinstalled a brand new copy of laravel and without changing the code I run npm 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. — Bogey
  • 0
    It would be helpful to see what your vite configuration file looks like. Can you add this to your question above? Also you mention you run npm run dev for compiling assets, what does your package.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 running npm run dev? — Brian Wozeniak
  • 0
    At the moment I don't have anything, but a fresh copy of laravel, but the resulting app.js has the code I've added in the previous project before deleting it. The new copy is in the same directory as the old project, but I don't think that should be causing any issues. I'll paste those files. I didn't change the vite configuration file, it is how it got installed. — Bogey
  • 0
    I've added the requested info but it got removed... not sure what happened — Bogey
  • 0
    Your edit went into the review queue is all, its approved now. Thanks for including that. Can you also show a screenshot of you running npm 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 run npm 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
  • 0
    Clearing browser cache again fixed the issue... now I'm trying to import summernote files and getting [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 — Bogey
  • 0
    I don't see the jquery dependency in your package.json. Make sure to require it, run npm 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 Wozeniak
  • 0
    All i'm trying to do right now is to integrate a summernote into the normal welcome page that a fresh laravel install comes with. Doing alert('hi'); in app.js works if I remove all of the imports. After importing everything and running npm run dev I get the following error in the console Uncaught TypeError: $(...).summernote is not a function — Bogey
  • 0
    Now it takes forever for it to load... Running npm build doesn't help either. Still getting Uncaught TypeError: $(...).summernote is not a function. — Bogey
  • 0
    I've added an image of the debugger showing what is imported... jquery is under the summernote (if that even matters) even though I'm importing it before the summernote, and summernote imports it at the top of every of their javascript files. Right now, the console where I put npm run dev isn't showing any errors. Just a bunch of page reloads as I try new things. — Bogey
  • 0
    Did you install your dependencies? I mentioned npm 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 run npm install summernote? I definitely don't see that in your package.json, which means it wasn't installed yet. — Brian Wozeniak
  • 0
    It is installed, but I have all the files in resource folder, don't see why it cant bundle them directly — Bogey
  • 0
    You can too assuming it’s compatible for an import, I’m just trying to get around your issues. Your summernote import is using a query string. You should remove that as these are paths not URLs and a query string for a path may cause issues. — Brian Wozeniak
  • 0
    Vite is adding those query strings... guessing those are some sort of versioning or something like that. I didn't have summernote installed but after I posted those screenshots, I added it, but I don't know why vite isn't bundling. According to the debugger, everything is included. — Bogey
  • 0
    Whoever renamed this post didn't rename it properly. My problem is how to bundle packages and how to use them. — Bogey
  • 0
    Sorry if I am not following, but "My problem is how to bundle packages and how to use them.", doesn't that mean nearly the same thing as "How to use bundled JavaScript packages after compiling with Vite?". You are welcome to edit the title (or comment here) to suggest something more appropriate, but for what your comment just stated isn't the current question fairly close to what you said compared to "Setting up a summernote editor in a project" which is what the title was before? — Brian Wozeniak
  • 0
    Yes, the original title was too broad and I wrote that out of frustration so it did need to be edited, but my issue was mostly how to bundle and then how to use the bundled. I still don't know how to properly bundle anything I "install" via NPM. — Bogey
  • 0
    As the author of the thread you know the intentions of your question the best, so you are probably best suited to make further edits to get the questions where it needs to be. If you see questions changed, but still think it can be improved or corrected, feel free to make another edit. The goal of the community is to improve everything about each other's questions, answers, and content posted here to help improve clarity and understanding which can help people write better answers (for those trying to help, the better they understand the question the more relevant and helpful the answer will be), and for someone with similar questions down the road getting the help they need. A good question will tell you exactly what to expect if you read further. While everyone should try their best when editing, they may fail to understand the authors original intention if clarity needs to be improved so there could be a bit of back and forth on editing as things are fine tuned. Additionally good questions have a narrow scope, if you have multiple things you need help with try to break then down into the smallest pieces as possible as separate questions than one generic question that might touch on multiple topics. Your actual problem here is very broad and really there could be an entire wiki article on this subject. Broad questions will probably not get great answers as it would take quite a bit of work to really make an excellent answer to cover the entire scope that may be needed. Sometimes this can be hard if you aren't grasping a concept and not sure what the problem really is, but we are all doing our best to try to identify a specific problem with specific answers to fulfill the question. Again though, if you disagree with an edit, make another edit and try to improve upon it! — Brian Wozeniak
add a comment
0

1 Answer

  • Votes
  • Oldest
  • Latest
BO
339 9
Answered

Ok, got it to work. Didn't need that summernote in composer nor the jquery. Apparently the javascript that is bundled is only available in app.js. For instance, moving:

$('.summernote').summernote({
    height: 200,
});

From welcome.blade.php to app.js worked where in welcome.blade.php it told me that $(...).summernote is not a function. If I can't have any Javascript inline than that is a huge down-fall of these bundlers and I don't even see the point in them except to make me waste a whole day learning something that is broken. Maybe I messed something up, but this is how it worked out for me.

I have a bunch of javascript that I have in my blade files which get's it's content filled by PHP as they are dynamic and having javascript only functional within a container that's unavailable for my dynamically retrieved data, renders my application useless.

  • 0
    Good job! Yeah it’s a bit hard to grasp without knowing exactly what you were doing, but that is true that the way everything is bundled they are typically within wrappers that do not expose the variables or functions as global in scope. However, you can still get around that and set global variables in your app to expose any library, functions, or variables for use in your blade file if you want. Simply define a global variable in your app and set it to one of the objects you are needing access to, like jQuery. Then you could use it in your blade file directly. By the way you could instead use classes and ids instead in your blade file and work your app to use those in a dynamic way still without having to bring any JavaScript inline. That is how Ozzu is built for the most part. — Brian Wozeniak
  • 0
    I have javascript who's behaivor is modified based on what is in the database. Some content prefilled with content from the database (summernote is prefilled via javascript rather than putting content directly into the textarea that gets transformed into an editor). I need access to those javascript files. If I add jquery normally via the script src tag I can use jquery in my blade files. It's really stupid that vite scopes everything out of the blade file. Using a system that you need to 'hack' to make it work is counter-intuitive but I did notice the trend between a lot of programmers where they like to complicate things. What happened to 'keep it simple, stupid' (the KISS principle). I don't know javascript, most of the javascript I have is thanks to chatGPT — Bogey
  • 1
    Yeah things have changed over the years. Any sort of global objects and variables are frowned upon because of the uncertainties of how other code could be interfering with it. Again it would be fairly simple to make some of these global if you want to do it the way you are used to. In your app.js simply define a line after all your imports like this window.$ = $; if you want jQuery to be global. It should then work in your welcome.blade.php then. — Brian Wozeniak
  • 1
    You should make a tutorial how to use vite properly, and how to use packages from node_modules with vite. So many tutorials explaining how vite works, but so few, if any, tutorials on how to actually use it. All the tutorials I've seen talk about hot module replacement, how it modifies on the fly without any need for refresh and very basic alert('hihi') in app.js but nothing that's actually relavent in a real world implementation — Bogey
  • 0
    I just wanted to note that if you look at the original files you had, you can see that they had made Alpine global as well with window.Apline = Apline. — Brian Wozeniak
  • 0
    How would I know what that line of code does? I don't know javascript, much less what Alpine is. Had no clue what that window does, why it's there or anything like that... — Bogey
  • 1
    Well you know now! At least how to make anything compiled global for blade files. — Brian Wozeniak
  • 0
    I see 4 answers here, but it's only thing one... what happened to the other 3? — Bogey
  • 0
    Where are you seeing it showing 4 answers? I only see 1, but there were 3 rejected via the review queue. If you are seeing 4 that is a bug with Ozzu and it should be reported in Meta. — Brian Wozeniak
  • 0
    Now it says 1. Maybe it counts the answers that are waiting to be accepted/rejected? — Bogey
add a comment
0