Rails 7, webpack and jsbundling production compilation

nkokkos · February 4, 2022, 8:28am

Hi everyone,

I upgraded to rails 7 from rails 6.x and decided to keep my webpack configuration. Ι followed the migration guide here https://github.com/rails/jsbundling-rails/blob/main/docs/switch_from_webpacker.md and everything worked fine.

My problem is when I run : RAILS_ENV=production rails assets:precompile. The error i get is

SassC::SyntaxError: Error: Invalid CSS after “…nd_css.js.map*/”: expected “}”, was “” on line 48:42 of stdin

/# sourceMappingURL=backend_css.js.map/


I get no errors if I do:

RAILS_ENV=development rails assets:precompile

Why is this happening in production mode? 

Thank  you

Justin_Gordon · February 7, 2022, 8:32am

If you’re going to stick with either webpack or esbuild, consider webpacker v6, aka Shakapacker, GitHub - shakacode/shakapacker: Use Webpack to manage app-like JavaScript modules in Rails.

If you stick with jsbundling-rails, you’ll have some extra code to maintain.

The current jsbundling-rails requires some special handling for different envs:

github.com

rails/jsbundling-rails/blob/main/docs/switch_from_webpacker.md#optional-add-support-for-development-environment

# Switch from Webpacker 5 to jsbundling-rails with webpack

This guide provides step-by-step instructions to migration from [`Webpacker 5`](https://github.com/rails/webpacker/tree/5-x-stable) to `jsbundling-rails` with [`webpack 4`](https://v4.webpack.js.org/concepts/). For upgrading to Webpacker/Shakapacker v6 instead, follow [this guide](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md) or for comparison between Webpacker and jsbundling-rails, [see this](./comparison_with_webpacker.md).

Note, you will no longer have the following features of `webpacker` if you migrate to `jsbundling-rails`:

1. [HMR](https://webpack.js.org/concepts/hot-module-replacement/)
2. [Code splitting](https://webpack.js.org/guides/code-splitting/)

If you rely on these features or you have a complicated webpack setup, consider using [`shakapacker`](https://github.com/shakacode/shakapacker).

## 1. Setup jsbundling-rails

First install [`jsbundling-rails`](https://github.com/rails/jsbundling-rails):

```diff
# Add to your Gemfile
+ gem 'jsbundling-rails'

# From the CLI, rebuild the bundle

This file has been truncated. show original

Note, I have no idea if this step works.

We’re testing the basic configurations with Shakapacker v6. If you get this error there, we’ll fix the issue.

Otherwise, please report the issue and better yet, put in a PR for the docs.

Thanks,

Justin

hfpp2012 · February 8, 2022, 9:12am

just using shakapacker

jsbundling or cssbundling There are too many limitations, the function is not strong

And the static files they produce, there will be many problems with Assets Pipeline.

Justin_Gordon · April 4, 2022, 7:44am

Why not use the successor to webpacker:

https://github.com/shakacode/shakapacker

Topic		Replies	Views
Using webpack with app upgraded from Rails 6 to Rails 7 rubyonrails-talk webpacker	1	1249	December 22, 2021
Rails 7 default usage rubyonrails-talk	5	2045	February 17, 2022
Now that webpacker is removed from rails 7 which javascript library can I use without it rubyonrails-talk	5	2733	March 4, 2022
How to preserve .erb with jsbundling-rails/ESbuild rubyonrails-talk	3	1002	October 27, 2022
Slow cold start in development mode using esbuild with jsbundling-rails rubyonrails-talk	0	144	August 19, 2024

Rails 7, webpack and jsbundling production compilation

Related topics

More Resources