Production/Heroku issues?
joemasilotti opened this issue · comments
Is there any additional configuration needed to get this working in production on Heroku? Everything works fine locally but when deployed there are no CSS or JavaScript assets.
P.S. Thanks so much for this – being able to glob import Stimulus controllers is 🔥
This is an esbuild plugin, so it runs when yarn build runs. If that's not happening, that's an issue with your jsbundling-rails setup.
That package will run yarn build during asset compilation, so you might check the jsbundling-rails issues for some information on that. 👍
For example: rails/jsbundling-rails#16
Weird. I see $ node esbuild.config.js in the Heroku logs which should mean it's getting run, right? Should this output actually be going to /tmp/ or somewhere else? That feels wrong.
$ node esbuild.config.js
Done in 0.50s.
yarn install v1.22.17
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.29s.
I, [2022-03-01T03:11:33.503396 #2002] INFO -- : Writing /tmp/build_4cb6af49/public/assets/application-8efe5cf33b25bc64c2f4b74a9f787ca99c500d757f06e284251b7493d29a6854.css
I, [2022-03-01T03:11:33.503697 #2002] INFO -- : Writing /tmp/build_4cb6af49/public/assets/application-8efe5cf33b25bc64c2f4b74a9f787ca99c500d757f06e284251b7493d29a6854.css.gz
I, [2022-03-01T03:11:33.504032 #2002] INFO -- : Writing /tmp/build_4cb6af49/public/assets/application-f97eed0bce3e8ddc22619cea08443899ae1c54db769cee96fe2a9d91225ceafa.js
I, [2022-03-01T03:11:33.505037 #2002] INFO -- : Writing /tmp/build_4cb6af49/public/assets/application-f97eed0bce3e8ddc22619cea08443899ae1c54db769cee96fe2a9d91225ceafa.js.gz
Asset precompilation completed (25.04s)
Turns out this isn't directly related to esbuild-rails, but rather jsbundling-rails. From the README:
If you import CSS in your application.js while using esbuild, you'll be creating both an app/assets/builds/application.js and app/assets/builds/application.css file when bundling. The latter can conflict with the app/assets/builds/application.css produced by cssbundling-rails. The solution is to either change the output file for esbuild (and the references for that) or for cssbundling. Both are specified in package.json.
application.js was importing some library-specific CSS – removing that import fixed everything. I'm not sure how to apply the required changes mentioned above, but I'll post here when I do.
My recommendation is don't include any CSS in your JS files if you're going to use esbuild. Leave all the CSS imports in your CSS files.
That's how we do it in Jumpstart Pro.
That did the trick! Thanks for helping debug, Chris.
To summarize, importing any CSS in application.js caused esbuild to overwrite application.css with only the CSS imported in JavaScript. Hence, clobbering my styles. The solution was to move the CSS import to application.css (application.tailwind.css in my case).