So, using Rails 5.2beta (gem install rails --pre), if you create a new app via rails new myapp --webpack=react... how would I go about incorporating Lodash into my flow from there?
I've mucked around with babel-plugin-lodash and lodash-webpack-plugin to no avail.
The compile doesn't fail if I do something like import { _pick, _map } from 'lodash/array'; ... but those variables are undefined when trying to use them.
I'm a bit lost as I'm both new to webpacker & webpack, and a lot of existing examples seem to target an older version of webpack?
Anyway, thank you for any help...
UPDATE:
Ok, looks like you can just do import map from "lodash/map"
So where are you trying to use lodash from? By this I mean are you sure the files are getting compiled / processed by Webpacker, or are they getting processed via the Asset Pipeline?
On my webpacker project I realized that there's a problem: that yes, regular old Javascript compiled with the Asset Pipeline won't know about the NPM Modules included via Webpack. (or at least the require statements wouldn't work).
Because of this I made a hard rule: all javascript goes where webpacker expect it (app/javascript) and no Javascript goes in app/assets. We only use the asset pipeline for CSS (which works great in our case, as I still don't think React - our frontend framework of choice - has a good story around site wide CSS).
Related
I'm confused about the idiomatic way to process Sass in Rails 7.
The README.md for the importmap-rails repo says:
This frees you from needing Webpack, Yarn, npm, or any other part of the JavaScript toolchain. All you need is the asset pipeline that's already included in Rails.
and The Rails Guide to The Asset Pipeline states that:
Rails can easily work with Sass by adding the sassc-rails gem to your Gemfile, which is used by Sprockets for Sass compilation
But in October 2020 we learned that LibSass is Deprecated, and that we should be using Dart Sass instead.
The sassc-rails gem is based on LibSass.
Hence should we be using something else to process Sass? And if so is the documentation on the Rails 7 asset pipeline misleading?
I'm relatively new to Rails and my naive reading of The README.md and The Asset Pipeline Guide led me to think that we should be using "the asset pipeline that's already included in Rails" to compile Sass and did not need "Yarn, npm, or any other part of the JavaScript toolchain".
What is the Rails 7 idiomatic way to process Sass?
In addition to the answer pasted in by #dumbledad, note that there is a serious disconnect in Rails 7 between JavaScript and CSS. While import maps as a specification and concept can in theory handle both ECMAScript modules and CSS modules, Rails 7 only supports ECMAScript modules and you're left out in the cold with CSS.
TL;DR, import maps are almost useless if you have any third party components that comprise CSS as well as JS components, unless you don't mind manually version-maintaining the same thing via two different package management systems in two different parts of your application. If you're happy with that dual maintenance overhead, then you can keep it lightweight and use import maps along with e.g. dartsass-rails.
See later comments on https://github.com/rails/importmap-rails/issues/107 for an official reply - basically, use jsbundling-rails and cssbundling-rails with a fully Node-based setup if you're going to have any components with both JS and CSS parts, unless you want to version-manage them separately.
You'd remove any gem that gave you those components, e.g. remove Bootstrap
You'd instead manage such dependencies via package.json and Yarn
You'll use bin/dev to run your development server and have CSS & JS compilation
While this much heavier approach is sad compared to either a simple Gem + Sprockets workflow (non-Webpacker) or import maps, and while it seems to have significant drawbacks now that e.g. #import wildcards aren't supported so you have to now hand-maintain lists of files that previously could just be linked as a tree - and so-on, there are sadly a lot of drawbacks compared to e.g. Rails 4-5 ish era simple Sprockets and gems with synchronous on-demand compilation by a single server process in development - it does mean you have access to a dramatically wider range of options for preprocessing, transpilation, generalised NPM / Yarn ecosystem or alternate build mechanisms, and it's now fronted by "vanilla" Yarn and package.json without any weird gems in the middle making things harder to learn.
(Copied directly from DHH's reply to the GitHub Issue.)
There are two ways to use Dart Sass in Rails. Either through
cssbundling-rails with Node. Or with
https://github.com/rails/dartsass-rails, using the standalone Dart
Sass compiler, without node. If you're doing a default Rails 7 app
that uses import maps, you should do the latter.
We need to update the asset pipeline guide and other documentation to
recognize this.
Just dropping it here, as it would help me, when I landed here while looking for answers myself. But the post was not produced at that time. I hope it helps and anyone can participate by writing it.
There is new unfinished guide about asset pipelines and where rails is going.
I just want to share with you an uncomfortable situation that I'm having right now and ask you for advice. It turns out that I'm developing a kind of old project by using rails 3.2 and ruby 2.0. Until now, as usual I've been creating the view layer with haml markup language. Recently I was assigned to implement a new set of UI requirements that seems to be a little complicated. So I was wondering if I could use the react library to do that. I'm using the react-rails gem to facilitate the integration and it works fine. But the problem comes in when I try to use a third party library like react-dropzone or react-modal or whatever react library. I have not been able to get it to work neither using rails-assets gems nor downloading directly the /dist files and require them with sprockets. Some of the errors that I get are:
typeError: undefined is not an object (evaluating 'webpack_require(3).unstable_renderSubtreeIntoContainer')
Can not find module 'react'
I don't know if I can easily setup a webpack server to compile these react libraries and then can be used along with react-rails and the specific version of rails 3.2. I've searched about the subject and I found the webpacker gem but it requires at least rails 4.2. I appreciate any comment or observation about what should I do.
I've finally solved my problem by using react_on_rails gem which allows an easy integration of React + Webpack + Rails, and also includes the server side rendering option.
I am upgrading my app from Rails 5.0 to 5.1, and there is one thing I can't find being mentioned anywhere - usage of Webpacker to process ActionCable JavaScript files.
I realise that Webpacker and the asset pipeline are supposed to work side by side, but now that we have Webpack build into Rails it would be a waste not to use it for files located in assets directory (which is where ActionCable lives), yet I can't find any information on how to do that.
I'm specifically interested in Babel, so I could use ES6. Any ideas?
The problem here is that you need to replace the ActionCable implementation of rails, which is written for sprockets with something that is written in module syntax, to make proper use of webpacker.
Specifically this line in your cable.js
require action_cable
Everything else should be easily portable.
There seem to be a couple of implementations for ActionCable and modules around:
https://www.npmjs.com/search?q=keywords:ActionCable
Specifically this looks exactly what you are searching for:
https://www.npmjs.com/package/actioncable-modules
There seems to be some movement on the side of Rails to use Webpacker as a complete sprocket replacement in Rails 6, so it might be worth waiting, instead of creating something that builds on third party modules.
I'm working with Jasmine. I spotted this handy looking library: https://github.com/JamieMason/Jasmine-Matchers and I thought its collection of customer matchers would help me a lot.
Problem is, it's loaded with files common to Node applications, such as JSHint, Grunt, travis.yml etc
The project I'm working on, that would love these matchers, is a Rails application. I've tried dropping them into my assets/javascripts and requiring in application.js, but obviously, life isn't that simple.
What is the correct way to install these files, and integrate them with Jasmine in a Rails context? Is Bower the tool for the job? If so, what's the right procedure to adding JS dependencies/integrating them off the bat?
Author of Jasmine-Matchers here, the only file you need to load into your test environment is this one https://github.com/JamieMason/Jasmine-Matchers/blob/master/dist/jasmine-matchers.js.
The other files are part of the development repo, I'll open an issue to have those excluded from npm/bower packages to save confusion.
You should be able to copy that file to your assets/javascripts directory, then embed it after Jasmine but before your tests.
Please comment if I've missed anything out here.
I was also trying to use Node modules inside my Rails application and the easiest way I found to achieve it was through browserify-rails gem.
The installation is pretty straightforward, just follow the getting started section and everything should be working. :-)
Basically, I am in the same boat as this question:
Rails 4 asset compilation is VERY slow (>1min) in dev mode. How to troubleshoot?
But instead of using Bootstrap, I'm using Susy 2 with SASS 3.3 and Rails 4.1 (but not Compass). I'm using the Sprockets 'require' in my application.js manifest, and it's not causing any problems...the snail's pace only happens when I make a change to any SASS file. At the moment I'm needing to use the #import rule in my stylesheet manifest.
I have tried variations on the 'require'/'#import' combination, and they have helped a little bit, but I do have a lot of SASS files and I'd love to just have an application.css.scss manifest that uses SASS's compilation method instead of including a 'global' file with an #import at the top of each SASS file.
I'm wondering whether it could have something to do with the current Sprockets/sass-rails gem issues; during compilation I get a lot of
Warning. Error encountered while saving cache 6b6acdc6a4d802b749fef26e565bbfe3caa60193/style.css.scssc: can't dump anonymous class #<Class:0x007ff59c2c8870>
I'd try moving back to SASS 3.2 if I could and still use Susy 2.
I'd be OK with not using the Asset Pipeline if I could be sure that the app would still play nice with Heroku when pushing to staging/production. I am familiar with both Grunt and Gulp, less so with what using Grunt/Gulp instead of the AP would do to my Rails app.
On the one hand, I'm glad that I'm not alone with this problem, but on the other...I'd love to find a way out of it, if anyone has some suggestions to share! Thanks in advance, SO community!