Hey, sorry for the aside - I am a Rails developer since Rails 4ish and we are running Rails 5 at work. I'm using Rails 6 for my own projects and in these side projects, I've been having a huge hell of a time trying to grok "right ways" to do things with webpacker/webpack. I seem to encounter issues every single time with deploys to Heroku because of precompilation issues, or imports not running right. But tutorials get out of date so fast and I'm constantly trying to just remove stuff just to get my builds to work. Are there any Rails focused chatrooms or places where I can get into the nitty gritty of these things without needing to post GitHub issues and piss off maintainers all the time?
I just don't really grok how to use modern Javascript I guess, but also integrating with Rails webpacker has been a source of constant frustration. I can't even figure out how to properly package JS libs without just giving up and using jsdelivr instead. Would love any kind of pointers!
I would definitely advise against webpacker. It's very much the case of trying to fit a square peg in a round hole. The two don't work all that well together, despite the pretty heroic work done by the webpacker team.
For an "idiot proof", batteries included, zero config approach, I would try out Parcel: https://parceljs.org/getting_started.html You just pass it an HTML file and it figures out what it needs to build from there. You can drop everything in /public/ and it all just works without any additional installs or fiddling. It works with pretty much anything you might drop in as an asset, whether it's via HTML tag or import statement.
As a close second, you can try esbuild: https://esbuild.github.io/ It's coming along and already does a lot of what you might do with Parcel or Webpack, but is stupendously fast. Fast enough that you'd need to be shipping an obscene amount of code to the browser to have build times exceed 1 second. It's a little more quirky right now, but I like it and appreciate the forward momentum it has right now.
Hey, I'm a JS dev who's been splashing around in rails for the past year or so. I'm happy to help! I just had a similar issue this morning, and I asked in the Ruby on Rails Link slack [1]. They're pretty helpful in there.
For what it's worth, my issue was that Heroku was running `rake assets:precompile` without node_modules being installed. This was because `yarn install` failed. I looked closely at the logs and saw an error about the yarn file needing to be updated (the lockfile pins exact versions). So I ran `yarn install` locally to update it, redeployed, and it worked. So far I've been able to use node modules with sprockets this way just fine (in JS and Sass). Webpack-generated JS bundles work well too. Anyway, happy to help in there, just tag me :)
And yes, I experienced the same issue you discussed! That has helped in the past a few times. I wonder what the advantage is to precompiling as opposed to doing it at build time during the deploy step.
Wanna be friends and show me the way? Webpack seems super popular, but like there's so much shit going on. Ok node, great.. JS runtime, got it. NPM, package manager, alls good so far, just like Hex for Elixir or Cargo for Rust, perfect, makes sense. Oh wait, huh? I gotta use yarn for my webpack? Alright... yarn add <module>, then I gotta precompile my assets... why? Why can't I just have that happen at build/deploy time? ... ok....
Then I get errors like this (even though I can run my app locally and everythings fine):
<markup>
Parsed request is a module
using description file: [absolute path to my repo]/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
aliased with mapping 'components': '[absolute path to my repo]/src/components' to '[absolute path to my repo]/src/components/DoISuportIt'
using description file: [absolute path to my repo]/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: [absolute path to my repo]/package.json (relative path: ./src)
using description file: [absolute path to my repo]/package.json (relative path: ./src/components/DoISuportIt)
as directory
[absolute path to my repo]/src/components/DoISuportIt doesn't exist
no extension
Field 'browser' doesn't contain a valid alias configuration
[absolute path to my repo]/src/components/DoISuportIt doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
[absolute path to my repo]/src/components/DoISuportIt.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
</markup>
and I don't even know what to say. What the hell is going on? Why has God forsaken me?
What's supposed to be the big win mixing webpack and Rails over, say, creating a separate React/Vue app and a Rails API? Webpack seems to slow-down the whole edit/view cycle which is pretty snappy in vanilla Rails.
You can sprinkle react components into your regular templates which is quite nice. A full blown SPA feels like way overkill (for my own projects, at least) when Rails handles forms and navigation so much better. You can include packs on a per page basis so it doesn't slow down / bloat the rest.
Completely agree, I run a Rails 6 app which provides a JSON API. This is then used by Create React App app running in the /clients folder at the root of the Rails application folder. Keeps it separated nicely.
I just don't really grok how to use modern Javascript I guess, but also integrating with Rails webpacker has been a source of constant frustration. I can't even figure out how to properly package JS libs without just giving up and using jsdelivr instead. Would love any kind of pointers!