To this day I wonder why not advanced in the sprockets? It could make a cleaner and more organized architecture to work with component-based JavaScript frameworks. Create a webpack competitor in this case: reinventing the "wheel" yoke will be necessary.
Hey! /app/javascript/packs/application.js contain this require("main/jquery.min.js") require("main/jquery-ui.min.js") javascript build on console shows like this [./app/javascript/main/jquery-ui.min.js] 341 KiB {application} [built] [./app/javascript/main/jquery.min.js] 132 KiB {application} [built] [./app/javascript/packs/application.js] 1.52 KiB {application} [built] Browser console gives error jquery-ui.min.js:6 Uncaught Error: Cannot find module 'jquery' at webpackMissingModule (jquery-ui.min.js:6) This is happening because files are compiling in wrong order not the order i'm enter do you know what's i'm doing wrong Thanks
Check out the Bootstrap & Webpacker episode to see how I'm importing jQuery into Webpacker so we can use Bootstrap. It covers all that and using the ProvidePlugin to make jQuery available to everything.
Last time I played with Rails was on version 3.2 so a lot has changed for v.6.. Regarding best practices, should the event listener part be moved to some other place like /javascript/flatpickr or /javascript/event_listeners?
You can require other files similar to how you could do in the past with the asset pipeline, so I would organize them how you normally would. It can be good to have a single location with all your event listeners. I usually just put that in the application.js pack, but you could also create another file like event_listeners and put them all in there. That would keep them organized in one place.
at least on current webpacker configuration, you can include node_modules css files within you application.scss regular file using `@import 'flatpickr/dist/flatpickr';` (probably youtube will not format, but you get the point). I hope this keeps as is. I'm only using stylesheet_pack_tag to have vue.js stylesheet files working on my template. if this still works on future release, you save a request per page call, you do not mess with css and js in the same place and your final css is pre-compiled on asset pipeline with all benefits they give us :)
Fair question that I never thought about it. I host my website on Heroku and I haven’t had issues so far. I had to do a trick on Heroku because I wanted to make sure that I had the proper node/yarn/npm versions that were set on packages.json file. For that, I set node buildpack before ruby one. But this is unrelated to asset pipeline, because before I did this it was already working. For deployments that you manage the flow like in Hatchbox, you can setup the order of scripts to run and manage yourself, so I don’t see this as a potential issue. The only think one has to understand is that yarn install must run before rails assets:precompile and it should be good
Whoever this is, thank you, this is so specific to my problem. May you live a life full of money and healthy harvests
I just wanted to learn how webpacker works in Rails 6 and your video came. Thanks
Love your content and the way you explain things. Great video! Thanks
so is page specific javascript still acceptable or does all js go in the application.js file?
Awesome. Only problem I had was that I had to search youtube again for the next video
Thanks for your very precise and useful solution, helped me a lot!
Glad it was helpful!
great video !
To this day I wonder why not advanced in the sprockets? It could make a cleaner and more organized architecture to work with component-based JavaScript frameworks.
Create a webpack competitor in this case: reinventing the "wheel" yoke will be necessary.
Mostly because the JavaScript world uses Webpacker and so Sprockets doesn't get much love.
Thanks a lot, still works perfect! No jquery and ancient gems)
great video, keep up the good work!
Transpile?
Love you man :)
03:40 move all your javascript from assets/application.js to app/javascript/packs/application.js
Hey!
/app/javascript/packs/application.js contain this
require("main/jquery.min.js")
require("main/jquery-ui.min.js")
javascript build on console shows like this
[./app/javascript/main/jquery-ui.min.js] 341 KiB {application} [built]
[./app/javascript/main/jquery.min.js] 132 KiB {application} [built]
[./app/javascript/packs/application.js] 1.52 KiB {application} [built]
Browser console gives error
jquery-ui.min.js:6 Uncaught Error: Cannot find module 'jquery'
at webpackMissingModule (jquery-ui.min.js:6)
This is happening because files are compiling in wrong order not the order i'm enter
do you know what's i'm doing wrong
Thanks
Check out the Bootstrap & Webpacker episode to see how I'm importing jQuery into Webpacker so we can use Bootstrap. It covers all that and using the ProvidePlugin to make jQuery available to everything.
Last time I played with Rails was on version 3.2 so a lot has changed for v.6..
Regarding best practices, should the event listener part be moved to some other place like /javascript/flatpickr or /javascript/event_listeners?
You can require other files similar to how you could do in the past with the asset pipeline, so I would organize them how you normally would.
It can be good to have a single location with all your event listeners. I usually just put that in the application.js pack, but you could also create another file like event_listeners and put them all in there. That would keep them organized in one place.
at least on current webpacker configuration, you can include node_modules css files within you application.scss regular file using `@import 'flatpickr/dist/flatpickr';` (probably youtube will not format, but you get the point). I hope this keeps as is. I'm only using stylesheet_pack_tag to have vue.js stylesheet files working on my template.
if this still works on future release, you save a request per page call, you do not mess with css and js in the same place and your final css is pre-compiled on asset pipeline with all benefits they give us :)
I believe that should be unchanged, but don't you have an issue on deployments that it doesn't run yarn install till after the assets precompiled?
Fair question that I never thought about it.
I host my website on Heroku and I haven’t had issues so far. I had to do a trick on Heroku because I wanted to make sure that I had the proper node/yarn/npm versions that were set on packages.json file. For that, I set node buildpack before ruby one. But this is unrelated to asset pipeline, because before I did this it was already working.
For deployments that you manage the flow like in Hatchbox, you can setup the order of scripts to run and manage yourself, so I don’t see this as a potential issue. The only think one has to understand is that yarn install must run before rails assets:precompile and it should be good
Thanks mate!
Thank you a lot!
how to add jquery-ui in rails 6
I'm still lost