Topic: jQuery + webpack + webpacker + rails - no hammer?
I'm trying to integrate mdb-pro jquery into a rails application that is using webpack/webpacker. I THINK I've imported the mdb.js properly, but the browser then gives an error about hammerjs:
index.js?3175:2910 Uncaught Error: Cannot find module "hammerjs"
at webpackMissingModule (index.js?3175:2910)
at eval (index.js?3175:2910)
at Object.eval (index.js?3175:2910)
at eval (12:3974)
at Object.<anonymous> (shared.js:114)
at __webpack_require__ (manifest.js:55)
at eval (index.js?ce25:1)
at Object.2 (shared-critical.js:33)
at __webpack_require__ (manifest.js:55)
at eval (home.js?e2a6:1)
I dug around in the files and I actually don't see hammer.js anywhere in any of the folders so I'm wondering if it's actually a core bug or lack of documentation that's just being exposed by the use of webpack.
Anyway:
* are there any instructions for using mdbootstrap with rails?
* what about webpack?
Thanks.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.15
- Device: laptop
- Browser: chrome
- OS: Linux (Fedora 29)
- Provided sample code: Yes
- Provided link: No
erikmjacobs commented 6 years ago
https://mdbootstrap.com/articles/jquery/md-bootstrap-ruby-on-rails-tutorial/ provides some details but does not use webpack (uses the traditional asset pipeline)
Jakub Strebeyko staff commented 6 years ago
Hi there @erikmjacobs,
Welcome to the support board!
We started implementing MDB with Rails timidly some time ago, and never run it against webpack-based build process.
The jQ version of MDB uses Hammer for touch gestures. The newest, as of time of writing this, version is 4.6.1 has hammer included in jq-pro/js/modules/vendor directory.
What's crucial here is that Hammer's code is already concatenated into mdb.js file and there should be no reason for webpack to be doing the adding again, unless you want to modify some of its parts. I know for a fact that the gulpfile mentions hammer explicitly, but that is because it was Gulp to do the work first. My suggestion would be to try and pinpoint the place where webpack may be looking for hammer and limit its workings with JS to mdb.js.
Please be sure to let me know how did that go, and we might be looking for something else.
Best,
Kuba
erikmjacobs commented 6 years ago
@Jakub Strebeyko I just checked https://git.mdbootstrap.com/mdb/jquery/jq-pro/tree/4.6.1 and there is no "modules/vendor" directory. And therefore hammer is not there.
That being said, it does look like Hammer is embedded in mdb.js (4.6.1) It also appears to be embedded in the version that I am on (4.6.15 fork). There is a pantload of other javascript being loaded in this app, so perhaps I need to try a completely vanilla webpack rails app and see if I can't get it working.
erikmjacobs commented 6 years ago
digging in further i think the error was somewhat spurious. it seems like i don't know where to put mdb.js in relation to webpack to make it happy.
now i'm trying just to use the regular rails asset pipeline, but i'm having an issue with the fact that bootstrap/jquery came in via webpack and now mdb is trying to use jQuery but can't "find" it...
Jakub Strebeyko staff commented 6 years ago
Hey @erikmjacobs,
Thanks for sharing your journey through the dense stack. You are complete right, the last version that was being served including vendor code was 4.5.13. All should be in the mdb.js. Yeah, custom webpack config often get complex very quickly, I personally am trying to avoid it whenever I can.
I see little room to strap mdb off jQ or bootstrap, so the easiest way I would see now would be to provide everything via the asset pipeline.
Do you think that providing a gem would be a more error-proof solution for integrating MDB with Rails?
Please keep us updated about the challenges you find in this difficult task - perhaps the struggle will help us improve the implementation or help someone else in the future.
Best Regards,
Kuba
erikmjacobs commented 6 years ago
A gem certainly would make life easier for some folks. But I'm probably not the best person to ask here as I'm a pretty poor rubyist and not a rails dev by trade. My experience harkens back to the 3.x days and pre-sprockets for the most part.
If you haven't received a lot of questions/feedback/whatever on Ruby/Rails in general it's likely indicative of 1 or 2 things:
* people aren't using mdbootstrap in ruby/rails apps
* people are using it but generally don't have trouble because they're better at ruby/rails than I am =)
If I had a vanilla app I bet it would be super trivial to integrate this. But because I'm dealing with an inherited codebase that is not well documented I'm struggling.
That being said, webpack does seem like a direction that people are moving, especially for React/Vue and other "javascript applications" so it's entirely likely that you should have some documentation at least minimally for pure webpack.
Jakub Strebeyko staff commented 6 years ago
Hey @erikmjacobs,
Huge thanks for your input! We got our hands on user-made MDBootstrap integration guide and took it from there, but it never got fully tested, as it was used only by the most adventurous ones out there anyway. Things would be different if we were getting a lot of tickets on Rails / feature requests -- but we're not, for any of the two reasons.
Webpack builds are everyday bread for MDBReact and MDBVue. Here I felt it would mainly make things more complicated on this uncharted thin ice, so kept to the Assets Pipeline with fingers crossed. Sorry.
I hope you will find a way around this cluster-stack as I try to convince the team it's worthwhile to gem it. Please keep me updated for future generations' sake.
Best,
Kuba