Skip to content

Release 2345

Choose a tag to compare

View all tags
@github-actions github-actions released this 03 Mar 10:32
2345
3f96c1b
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.

Trello card

https://trello.com/c/xkADdNUb

Context

Dependabot cannot update webpack related packages to non-vulnerable versions because we are using a deprecated webpack version.

We need to migrate to the latest webpack v5.x

Changes proposed in this pull request

  • Bump up webpack to v5.69.1
  • Replace webpacker with shakapacker v6.1.1
  • Migrate the webpacker and webpack configs
    Removed the webpack env configs because didn't seem we need them.
  • Rename the webpack binstubs to webpacker
  • Update the paths of the static files in the application layout
  • Refactor the gtm pack to satisfy shakapacker
    Shakapacker expects the javascript_pack_tag to be called at most once.
  • Exclude IE 11 from the browserlist
    Latest shakapacker/webpacker doesn't play well with Stimulus 3, which has dropped IE 11 support and uses ES6 as the compile target. IE 11 users will have a no-js experience, which is slightly degraded but still functional.

Guidance to review

Check

  1. The static assets should appear ok
  2. The pages with js code should work as expected (i.e. the filters in the search page, conditional fields appear in the feedback page etc)

On your local:

  1. bundle and yarn install
  2. remove old packs by running: rails webpacker:clobber or rm -rf ./public/packs*/

Notes:
Shakapacker expects javascript_pack_tag to be called at most once, which I find very limiting and bizarre (I hope I'm not missing something here), so I had to load the application.js at the top of the page with the gtm.js and also move the gtm enable logic inside the gtm pack.
Another thing I don't like is that javascript_pack_tag will inject all the options in each <script> tag that will create. That means the line 5 in the application layout will create code like:

<script src="/packs/js/application.js" data-gtm-id="123" data-gtm-nonce="lGul0d6h9fxnbqsPCwHLMQ==" data-gtm-enabled="true" defer="defer"></script>
<script src="/packs/js/gtm.js" data-gtm-id="123" data-gtm-nonce="lGul0d6h9fxnbqsPCwHLMQ==" data-gtm-enabled="true" defer="defer"></script>
Assets 2
Loading