Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

jsbundling 1.2 doesn't compile javascript #173

Closed
midtownkc opened this issue Sep 13, 2023 · 2 comments
Closed

jsbundling 1.2 doesn't compile javascript #173

midtownkc opened this issue Sep 13, 2023 · 2 comments

Comments

@midtownkc
Copy link

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
Copy link
Contributor

rmacklin commented Sep 13, 2023

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

@rafaelfranca
Copy link
Member

1.2.1 released that should fix this issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants