search

rails / jsbundling-rails

Bundle and transpile JavaScript in Rails with esbuild, rollup.js, or Webpack.
MIT License
831 stars 143 forks source link

jsbundling 1.2 doesn't compile javascript #173

Closed midtownkc closed 1 year ago

midtownkc commented 1 year ago

Steps to reproduce

I have many rails 7 applications which uses cssbundling & jsbundling. Since updating to jsbundling-rails 1.2, the javascript no longer compiles when running bundle exec rake, the CSS bundling step is run twice. When running bundle exec rake javascript:build directly, it compiles the CSS instead of the JS. This behavior affects all of my rails 7 applications.

package.json contents:

{
  "name": "app",
  "private": true,
  "engines": {
    "node": "^18.16.1"
  },
  "version": "1.0.0",
  "scripts": {
    "build-dev": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
    "build-dev:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --minify",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --style=compressed",
    "test": ""
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15",
    "@hotwired/stimulus": "^3.2.1",
    "@hotwired/turbo-rails": "^7.1.1",
    "@popperjs/core": "^2.11.5",
    "@rails/actioncable": "^7.0.0",
    "@rails/actiontext": "^7.0.0",
    "@rails/activestorage": "^7.0.0",
    "bootstrap": "^5.1.3",
    "bootstrap-datepicker": "^1.9.0",
    "bootstrap-icons": "^1.8.3",
    "datatables.net": "^1.13.1",
    "datatables.net-bs5": "^1.13.1",
    "esbuild": "^0.14.47",
    "jquery": "^3.6.0",
    "sass": "^1.53.0",
    "trix": "^1.2.0"
  }
}

Expected behavior

When running jsbundling 1.1.2:

bundle exec rake javascript:build       
yarn install v1.22.19
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.05s.
yarn run v1.22.19
$ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --minify

  app/assets/builds/application.js                755.4kb
  app/assets/builds/dt.js                         177.5kb
  app/assets/builds/jq.js                          86.3kb
  app/assets/builds/interaction_forms.js           1010b 
  app/assets/builds/jquery_datepicker.js            329b 
  app/assets/builds/cable.js                        218b 
  app/assets/builds/trix-editor-overrides.js        185b 
  app/assets/builds/debug.js                        160b 
  app/assets/builds/tooltip.js                      158b 
  app/assets/builds/application.js.map              2.6mb
  app/assets/builds/dt.js.map                       1.1mb
  app/assets/builds/jq.js.map                     450.3kb
  app/assets/builds/interaction_forms.js.map        2.2kb
  app/assets/builds/jquery_datepicker.js.map        690b 
  app/assets/builds/cable.js.map                    654b 
  app/assets/builds/tooltip.js.map                  372b 
  app/assets/builds/trix-editor-overrides.js.map    365b 
  app/assets/builds/debug.js.map                    355b 

✨  Done in 0.55s.

Actual behavior

When running jsbnundling-rails 1.2 Instead of installing the JS, it installs the CSS.

bundle exec rake javascript:build
yarn install v1.22.19
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.05s.
yarn run v1.22.19
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --style=compressed
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

   ╷
57 │   $dividend: abs($dividend);
   │              ^^^^^^^^^^^^^^
   ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 57:14         divide()
    node_modules/bootstrap/scss/mixins/_grid.scss 59:12        row-cols()
    node_modules/bootstrap/scss/mixins/_grid.scss 85:13        @content
    node_modules/bootstrap/scss/mixins/_breakpoints.scss 68:5  media-breakpoint-up()
    node_modules/bootstrap/scss/mixins/_grid.scss 72:5         make-grid-columns()
    node_modules/bootstrap/scss/_grid.scss 38:3                @import
    bootstrap/scss/bootstrap.scss 20:9                         @import
    app/assets/stylesheets/application.bootstrap.scss 1:9      root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(20em, 16) or calc(20em / 16)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
12 │ $fa-fw-width:          (20em / 16);
   │                         ^^^^^^^^^
   ╵
    node_modules/@fortawesome/fontawesome-free/scss/_variables.scss 12:25  @import
    @fortawesome/fontawesome-free/scss/fontawesome.scss 5:9                @import
    app/assets/stylesheets/application.bootstrap.scss 7:9                  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4em, 3) or calc(4em / 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
6 │   font-size: (4em / 3);
  │               ^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_larger.scss 6:15  @import
    @fortawesome/fontawesome-free/scss/fontawesome.scss 8:9            @import
    app/assets/stylesheets/application.bootstrap.scss 7:9              root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(3em, 4) or calc(3em / 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
7 │   line-height: (3em / 4);
  │                 ^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_larger.scss 7:17  @import
    @fortawesome/fontawesome-free/scss/fontawesome.scss 8:9            @import
    app/assets/stylesheets/application.bootstrap.scss 7:9              root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($fa-li-width * 5, 4) or calc($fa-li-width * 5 / 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
6 │   margin-left: $fa-li-width * 5/4;
  │                ^^^^^^^^^^^^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_list.scss 6:16  @import
    @fortawesome/fontawesome-free/scss/fontawesome.scss 10:9         @import
    app/assets/stylesheets/application.bootstrap.scss 7:9            root stylesheet

✨  Done in 1.26s.

I am pining jsbundling to 1.1.2 as this is blocking our builds in CI.

System configuration

Rails 7.0.8 ruby 3.1.4p223 (2023-03-30 revision 957bb7cb81) [arm64-darwin22]

rmacklin commented 1 year ago

This seems to be the same issue as https://github.com/rails/cssbundling-rails/issues/131 which has open PRs: https://github.com/rails/jsbundling-rails/pull/172 & https://github.com/rails/cssbundling-rails/issues/132. Until those are merged you could try using the gems with a GitHub source pointed at those PRs.

rafaelfranca commented 1 year ago

1.2.1 released that should fix this issue