Replace webpacker with jsbundling-rails [SCI-7926]

2024-09-20 06:35:56 +08:00 · 2023-03-30 13:27:10 +02:00 · 2023-03-30 13:27:10 +02:00 · ed1c4bcb69
parent babb46baa7
commit ed1c4bcb69
93 changed files with 976 additions and 4465 deletions
--- a/.gitignore
+++ b/.gitignore
@ -88,3 +88,6 @@ public/marvin4js-license.cxl

 # Ignore JetBrains
 .idea/
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
--- a/3
+++ b/3
@ -18,7 +18,6 @@ gem 'view_component', require: 'view_component/engine'
 gem 'recaptcha', require: 'recaptcha/rails'
 gem 'sanitize', '~> 6.0'
 gem 'sassc-rails'
-gem 'webpacker', '~> 4.0.0'
 gem 'yomu', git: 'https://github.com/scinote-eln/yomu', branch: 'master'

 # Gems for OAuth2 subsystem
@ -101,6 +100,8 @@ gem 'discard', '~> 1.0'

 gem 'graphviz'

+gem 'jsbundling-rails'
+
 gem 'base62' # Used for smart annotations
 gem 'newrelic_rpm'

--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -344,6 +344,8 @@ GEM
      railties (>= 3.2.16)
    js_cookie_rails (2.2.0)
      railties (>= 3.1)
+    jsbundling-rails (1.1.1)
+      railties (>= 6.0.0)
    json (2.5.1)
    json-jwt (1.13.0)
      activesupport (>= 4.2)
@ -475,8 +477,6 @@ GEM
      rack (>= 2.0.0)
    rack-protection (3.0.1)
      rack
-    rack-proxy (0.6.5)
-      rack
    rack-test (2.0.2)
      rack (>= 1.3)
    rails (6.1.7.1)
@ -642,10 +642,6 @@ GEM
      addressable (>= 2.3.6)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (4.0.7)
-      activesupport (>= 4.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 4.2)
    websocket-driver (0.7.5)
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.5)
@ -711,6 +707,7 @@ DEPENDENCIES
  jquery-scrollto-rails!
  jquery-ui-rails
  js_cookie_rails
+  jsbundling-rails
  json-jwt
  json_matchers
  jsonapi-renderer (~> 0.2.2)
@ -769,7 +766,6 @@ DEPENDENCIES
  underscore-rails
  view_component
  webmock
-  webpacker (~> 4.0.0)
  whacamole
  wicked_pdf
  wkhtmltopdf-heroku (= 2.12.5)
--- a/Procfile.dev
+++ b/Procfile.dev
@ -0,0 +1,2 @@
+web: unset PORT && bin/rails server -b 0.0.0.0
+js: yarn build --watch
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@ -1,3 +1,4 @@
 //= link_tree ../images
 //= link application.js
 //= link application.css
+//= link_tree ../builds/
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@ -0,0 +1 @@
+// Entry point for the build script in your package.json
--- a/app/javascript/packs/fontawesome.scss
+++ b/app/javascript/packs/fontawesome.scss
@ -1,6 +1,6 @@
-$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
+$fa-font-path: "@fortawesome/fontawesome-free/webfonts/";

-@import "~@fortawesome/fontawesome-free/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free/scss/solid";
-@import "~@fortawesome/fontawesome-free/scss/regular";
-@import "~@fortawesome/fontawesome-free/scss/brands";
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/solid";
+@import "@fortawesome/fontawesome-free/scss/regular";
+@import "@fortawesome/fontawesome-free/scss/brands";
--- a/app/javascript/vue/bmt_filter/container.vue
+++ b/app/javascript/vue/bmt_filter/container.vue
@ -49,8 +49,8 @@
 </template>

 <script>
-  import FilterElement from 'vue/bmt_filter/filter.vue'
-  import SavedFilterElement from 'vue/bmt_filter/saved_filter.vue'
+  import FilterElement from './filter.vue'
+  import SavedFilterElement from './saved_filter.vue'

  export default {
    name: 'FilterContainer',
--- a/app/javascript/vue/bmt_filter/filter.vue
+++ b/app/javascript/vue/bmt_filter/filter.vue
@ -29,17 +29,17 @@

 <script>
  // Filter types
-  import additionalDataFilter from 'vue/bmt_filter/filters/additionalDataFilter.vue'
-  import entityTypeFilter from 'vue/bmt_filter/filters/entityTypeFilter.vue'
-  import monomerTypeFilter from 'vue/bmt_filter/filters/monomerTypeFilter.vue'
-  import subsequenceFilter from 'vue/bmt_filter/filters/subsequenceFilter.vue'
-  import variantSequenceFilter from 'vue/bmt_filter/filters/variantSequenceFilter.vue'
-  import fullsequenceFilter from 'vue/bmt_filter/filters/fullsequenceFilter.vue'
-  import monomerSubstructureSearchFilter from 'vue/bmt_filter/filters/monomerSubstructureSearchFilter.vue'
-  import cidFilter from 'vue/bmt_filter/filters/cidFilter.vue'
+  import additionalDataFilter from './filters/additionalDataFilter.vue'
+  import entityTypeFilter from './filters/entityTypeFilter.vue'
+  import monomerTypeFilter from './filters/monomerTypeFilter.vue'
+  import subsequenceFilter from './filters/subsequenceFilter.vue'
+  import variantSequenceFilter from './filters/variantSequenceFilter.vue'
+  import fullsequenceFilter from './filters/fullsequenceFilter.vue'
+  import monomerSubstructureSearchFilter from './filters/monomerSubstructureSearchFilter.vue'
+  import cidFilter from './filters/cidFilter.vue'

  // Other components
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import DropdownSelector from '../shared/dropdown_selector.vue'

  export default {
    props: {
--- a/app/javascript/vue/bmt_filter/filters/additionalDataFilter.vue
+++ b/app/javascript/vue/bmt_filter/filters/additionalDataFilter.vue
@ -20,8 +20,8 @@
 </template>

 <script>
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
-  import FilterMixin from 'vue/bmt_filter/mixins/filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
+  import FilterMixin from '../mixins/filter.js'

  export default {
    name: 'additionalDataFilter',
--- a/app/javascript/vue/bmt_filter/filters/cidFilter.vue
+++ b/app/javascript/vue/bmt_filter/filters/cidFilter.vue
@ -12,7 +12,7 @@
 </template>

 <script>
-  import FilterMixin from 'vue/bmt_filter/mixins/filter.js'
+  import FilterMixin from '../mixins/filter.js'
  export default {
    name: 'cidFilter',
    mixins: [FilterMixin],
--- a/app/javascript/vue/bmt_filter/filters/entityTypeFilter.vue
+++ b/app/javascript/vue/bmt_filter/filters/entityTypeFilter.vue
@ -12,7 +12,7 @@
 </template>

 <script>
-  import FilterMixin from 'vue/bmt_filter/mixins/filter.js'
+  import FilterMixin from '../mixins/filter.js'
  export default {
    name: 'entityTypeFilter',
    mixins: [FilterMixin],
--- a/app/javascript/vue/bmt_filter/filters/fullsequenceFilter.vue
+++ b/app/javascript/vue/bmt_filter/filters/fullsequenceFilter.vue
@ -28,7 +28,7 @@
 </template>

 <script>
-  import FilterMixin from 'vue/bmt_filter/mixins/filter.js'
+  import FilterMixin from '../mixins/filter.js'
  export default {
    name: 'fullsequenceFilter',
    mixins: [FilterMixin],
--- a/app/javascript/vue/bmt_filter/filters/monomerSubstructureSearchFilter.vue
+++ b/app/javascript/vue/bmt_filter/filters/monomerSubstructureSearchFilter.vue
@ -12,7 +12,7 @@
 </template>

 <script>
-  import FilterMixin from 'vue/bmt_filter/mixins/filter.js'
+  import FilterMixin from '../mixins/filter.js'
  export default {
    name: 'monomerSubstructureSearchFilter',
    mixins: [FilterMixin],
--- a/app/javascript/vue/bmt_filter/filters/monomerTypeFilter.vue
+++ b/app/javascript/vue/bmt_filter/filters/monomerTypeFilter.vue
@ -12,7 +12,7 @@
 </template>

 <script>
-  import FilterMixin from 'vue/bmt_filter/mixins/filter.js'
+  import FilterMixin from '../mixins/filter.js'
  export default {
    name: 'monomerTypeFilter',
    mixins: [FilterMixin],
--- a/app/javascript/vue/bmt_filter/filters/subsequenceFilter.vue
+++ b/app/javascript/vue/bmt_filter/filters/subsequenceFilter.vue
@ -28,7 +28,7 @@
 </template>

 <script>
-  import FilterMixin from 'vue/bmt_filter/mixins/filter.js'
+  import FilterMixin from '../mixins/filter.js'
  export default {
    name: 'subsequenceFilter',
    mixins: [FilterMixin],
--- a/app/javascript/vue/bmt_filter/filters/variantSequenceFilter.vue
+++ b/app/javascript/vue/bmt_filter/filters/variantSequenceFilter.vue
@ -46,7 +46,7 @@
 </template>

 <script>
-  import FilterMixin from 'vue/bmt_filter/mixins/filter.js'
+  import FilterMixin from '../mixins/filter.js'
  export default {
    name: 'variantSequenceFilter',
    mixins: [FilterMixin],
--- a/app/javascript/vue/images/bio_eddie.png
+++ b/app/javascript/vue/images/bio_eddie.png
--- a/app/javascript/vue/images/marvinjs.svg
+++ b/app/javascript/vue/images/marvinjs.svg
@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18">
+    <g clip-path="url(#clip0)">
+        <path fill="#404048" fill-rule="evenodd" d="M7.995 1.732L3 4.616v5.768l3.297 1.903c.327.189.462.59.317.938-.174.418-.675.588-1.067.362L2.25 11.683c-.464-.268-.75-.763-.75-1.299V4.616c0-.536.286-1.031.75-1.299L7.245.433c.464-.268 1.036-.268 1.5 0l4.995 2.884c.464.268.75.763.75 1.299v2.886c0 .483-.569.742-.933.423l-.375-.328c-.122-.107-.192-.261-.192-.423V4.616L7.995 1.732zM4.5 4.5l-.75.375v5.25l.75.375v-6zm7.909.654l-.05.837-5.197-3 .7-.462 4.547 2.625zM10.875 8.25c.207 0 .375.168.375.375v3.75c0 .207.168.375.375.375s.375-.168.375-.375V12h.3c.248 0 .45.201.45.45v.675c0 .207.168.375.375.375s.375-.168.375-.375v-.375h.3c.248 0 .45.201.45.45v.675c0 .207.168.375.375.375s.375-.168.375-.375V13.5c.414 0 .75.336.75.75v1.875c0 .207.168.375.375.375s.375-.168.375-.375V14.25c0-.828-.672-1.5-1.5-1.5h-.087c-.178-.44-.61-.75-1.113-.75h-.387c-.178-.44-.61-.75-1.113-.75H12V8.625c0-.621-.504-1.125-1.125-1.125S9.75 8.004 9.75 8.625v4.655c-1.079-.582-2.334.23-2.59 1.086-.05.173-.043.528.173.638.871.442 1.265.756 1.71 1.123.487.4.663.857.707 1.487.015.206.18.375.387.375.207 0 .377-.169.363-.375-.05-.736-.256-1.063-.55-1.488-.313-.451-1-.974-1.904-1.426-.135-.068-.207-.227-.124-.353.297-.458.964-.736 1.512-.384l.316.19v.472c0 .207.168.375.375.375s.375-.168.375-.375v-6c0-.207.168-.375.375-.375z" clip-rule="evenodd"/>
+    </g>
+    <defs>
+        <clipPath id="clip0">
+            <path fill="#fff" d="M0 0H18V18H0z"/>
+        </clipPath>
+    </defs>
+</svg>
--- a/app/javascript/vue/images/pdf_js/blocked.svg
+++ b/app/javascript/vue/images/pdf_js/blocked.svg
@ -0,0 +1,78 @@
+<svg width="183" height="163" viewBox="0 0 183 163" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<ellipse cx="90" cy="148.5" rx="89.5" ry="14.5" fill="#404048"/>
+<path d="M164.098 87.8924C164.068 90.2505 163.96 92.8925 163.717 95.676L170.514 87.2064L170.561 87.3389C170.005 85.4274 169.182 83.6038 168.117 81.9219L168.17 82.0465L164.098 87.8924Z" fill="#0ECDC0"/>
+<path d="M164.103 87.4789L168.048 81.8162C166.914 80.1085 165.555 78.7863 164.004 77.9797C163.923 77.9378 163.842 77.8987 163.761 77.8599C163.822 78.4982 164.151 82.2472 164.103 87.4789Z" fill="#0ECDC0"/>
+<path d="M171.364 103.917C171.531 102.93 171.661 101.944 171.753 100.961L161.504 109.006L161.49 108.935C161.336 109.516 161.175 110.086 161.007 110.646L171.34 103.761L171.364 103.917Z" fill="#0ECDC0"/>
+<path d="M162.673 103.589L171.846 95.0926L171.882 95.2396C171.764 92.6125 171.335 90.0085 170.604 87.4822L163.678 96.1131C163.439 98.7209 163.104 101.213 162.673 103.589Z" fill="#0ECDC0"/>
+<path d="M163.503 95.9663L151.233 83.78L151.287 83.6311C150.291 85.2184 149.459 86.9021 148.803 88.6565L162.766 101.891C163.098 99.8229 163.336 97.8248 163.503 95.9663Z" fill="#0ECDC0"/>
+<path d="M162.445 103.743C162.539 103.238 162.627 102.736 162.71 102.237L148.695 88.9532L148.747 88.8032C148.515 89.4213 148.298 90.0593 148.094 90.7172L148.145 90.5668L162.445 103.743Z" fill="#0ECDC0"/>
+<path d="M161.577 108.598L171.74 100.62L171.77 100.772C171.931 98.9902 171.971 97.1995 171.89 95.4121L162.593 104.024C162.296 105.606 161.958 107.131 161.577 108.598Z" fill="#0ECDC0"/>
+<path d="M147.12 103.202L158.613 116.517C159.392 114.77 160.067 112.978 160.632 111.151L146.801 98.2183C146.771 99.9368 146.856 101.655 147.056 103.363L147.12 103.202Z" fill="#0ECDC0"/>
+<path d="M163.565 77.8593L163.658 77.811C161.246 76.6967 158.72 76.9774 156.365 78.3846L163.914 87.4801C163.964 81.8198 163.571 77.9153 163.565 77.8593Z" fill="#0ECDC0"/>
+<path d="M160.715 111.599C160.195 113.244 159.585 114.859 158.889 116.438L169.316 110.258L169.336 110.412C170.066 108.998 170.615 107.497 170.968 105.945C171.104 105.335 171.225 104.724 171.331 104.112L160.875 111.079C160.822 111.253 160.769 111.427 160.715 111.599Z" fill="#0ECDC0"/>
+<path d="M163.909 87.9018L156.188 78.5976L156.247 78.4553C154.48 79.5422 152.813 81.2649 151.366 83.5083L163.536 95.5954C163.774 92.8433 163.88 90.2325 163.909 87.9018Z" fill="#0ECDC0"/>
+<path d="M160.731 110.831C161.402 108.612 161.953 106.358 162.382 104.08L148.046 90.8716C147.775 91.7641 147.532 92.6902 147.317 93.6498C147.022 95.0251 146.852 96.4244 146.811 97.8304L160.721 110.837L160.731 110.831Z" fill="#0ECDC0"/>
+<path d="M175.497 125.121C173.969 126.918 172.2 128.884 170.237 130.874L180.876 128.683L180.829 128.815C181.62 126.989 182.15 125.059 182.403 123.085L182.365 123.215L175.497 125.121Z" fill="#0ECDC0"/>
+<path d="M181.751 117.427C181.716 117.343 181.678 117.261 181.641 117.18C181.28 117.71 179.141 120.807 175.765 124.806L182.417 122.959C182.634 120.921 182.431 119.037 181.751 117.427Z" fill="#0ECDC0"/>
+<path d="M160.059 139.666C159.57 140.014 159.082 140.351 158.595 140.676L170.948 141.959L170.866 142.095C171.625 141.441 172.354 140.765 173.052 140.066L160.024 139.729L160.059 139.666Z" fill="#0ECDC0"/>
+<path d="M164.382 136.302L176.87 135.606L176.803 135.742C178.389 133.643 179.721 131.364 180.77 128.952L169.928 131.185C168.079 133.041 166.231 134.747 164.382 136.302Z" fill="#0ECDC0"/>
+<path d="M160.341 139.461L173.261 139.796L173.186 139.932C174.447 138.662 175.621 137.308 176.699 135.88L164.043 136.586C162.805 137.616 161.571 138.575 160.341 139.461Z" fill="#0ECDC0"/>
+<path d="M144.963 146.731C145.049 146.633 145.136 146.534 145.226 146.43C147.824 145.86 150.345 144.978 152.732 143.805L152.546 134.543C152.636 134.301 152.723 134.058 152.807 133.812L153.005 143.671C154.72 142.823 156.383 141.873 157.985 140.826L155.794 123.679C155.883 123.626 155.973 123.572 156.066 123.516L158.254 140.64L158.265 140.642C160.198 139.361 162.061 137.976 163.845 136.495L161.564 119.631C161.652 119.558 161.74 119.485 161.829 119.411L164.109 136.276C164.504 135.947 164.892 135.616 165.274 135.284L163.209 118.198C163.296 118.118 163.384 118.036 163.471 117.955L165.538 135.054C167.114 133.673 168.572 132.285 169.887 130.961L168.214 113.754L168.35 113.673C167.879 113.825 167.402 113.998 166.921 114.188C167.782 113.081 168.546 111.903 169.205 110.665L158.678 116.904C158.012 118.368 157.25 119.787 156.397 121.151C156.21 121.349 156.024 121.55 155.841 121.756L155.868 121.965C155.786 122.087 155.704 122.207 155.621 122.327L155.586 122.048C155.481 122.169 155.377 122.292 155.274 122.415C156.519 120.646 157.595 118.764 158.488 116.794L147.079 103.576C147.223 104.804 147.414 106.037 147.64 107.259C146.563 105.72 145.284 104.332 143.836 103.135L143.926 103.237L141.861 110.054C142.561 112.306 143.276 114.852 143.906 117.574L147.697 107.56C147.726 107.712 147.755 107.863 147.785 108.014L144.004 118.002C144.583 120.556 145.035 123.03 145.36 125.423L150.102 116.933C150.138 117.049 150.175 117.164 150.212 117.279L145.418 125.86C145.626 127.457 145.775 129.012 145.867 130.525L151.756 121.748C151.796 121.857 151.836 121.963 151.875 122.067L145.923 130.936L145.888 130.873C145.921 131.472 145.945 132.064 145.959 132.649L152.682 124.14C152.727 124.25 152.769 124.352 152.807 124.445L145.967 133.102C145.97 133.283 145.973 133.465 145.975 133.645C145.989 135.37 145.909 137.095 145.735 138.811L146.388 138.069C146.273 138.349 146.16 138.625 146.051 138.897L145.679 139.319C145.65 139.575 145.617 139.828 145.583 140.08C145.457 140.407 145.335 140.725 145.218 141.036C145.313 140.452 145.395 139.865 145.464 139.274L130.526 130.227C134.829 139.594 142.414 148.301 142.9 148.854C143.226 148.15 143.52 147.43 143.783 146.694C143.872 146.68 143.961 146.665 144.05 146.651C144.019 146.739 143.989 146.828 143.958 146.916C143.911 146.923 143.864 146.932 143.818 146.939C143.856 146.948 143.897 146.956 143.939 146.966C143.752 147.481 143.553 147.985 143.341 148.477C143.64 148.175 144.087 147.709 144.63 147.106C148.061 147.773 157.266 149.088 164.898 145.916L152.809 144.011C150.317 145.24 147.682 146.154 144.963 146.731ZM152.477 131.148L152.747 130.842L152.756 131.277L152.486 131.583L152.477 131.148Z" fill="#0ECDC0"/>
+<path d="M181.49 117.054L181.593 117.077C180.446 114.68 178.321 113.287 175.609 112.869L175.619 124.686C179.27 120.359 181.459 117.101 181.49 117.054Z" fill="#0ECDC0"/>
+<path d="M157.763 141.223C156.313 142.158 154.813 143.014 153.269 143.786L165.243 145.673L165.16 145.804C166.626 145.181 168.006 144.375 169.268 143.404C169.762 143.021 170.246 142.627 170.718 142.224L158.218 140.925C158.066 141.025 157.915 141.126 157.763 141.223Z" fill="#0ECDC0"/>
+<path d="M170.149 130.696C172.088 128.728 173.836 126.784 175.346 125.008L175.337 112.92L175.473 112.848C173.419 112.559 171.035 112.823 168.489 113.629L170.149 130.696Z" fill="#0ECDC0"/>
+<path d="M143.738 103.056C142.131 101.782 140.43 100.944 138.705 100.656C138.616 100.641 138.527 100.629 138.438 100.617C138.692 101.206 140.165 104.67 141.737 109.66L143.738 103.056Z" fill="#0ECDC0"/>
+<path d="M143.793 117.917L128.355 110.117L128.359 109.959C127.904 111.776 127.633 113.635 127.551 115.506L144.924 123.779C144.6 121.709 144.208 119.736 143.793 117.917Z" fill="#0ECDC0"/>
+<path d="M144.977 124.125L127.541 115.821L127.543 115.663C127.514 116.322 127.505 116.996 127.515 117.685L127.516 117.526L145.192 125.639C145.125 125.13 145.053 124.625 144.977 124.125Z" fill="#0ECDC0"/>
+<path d="M145.758 133.245L128.604 125.218C129.107 126.862 129.72 128.47 130.438 130.032L130.45 129.859L145.497 138.972C145.699 137.07 145.786 135.158 145.758 133.245Z" fill="#0ECDC0"/>
+<path d="M138.251 100.677L138.324 100.603C135.685 100.288 133.37 101.335 131.566 103.401L141.558 109.719C139.855 104.321 138.273 100.729 138.251 100.677Z" fill="#0ECDC0"/>
+<path d="M141.684 110.122L131.463 103.658L131.475 103.505C130.131 105.084 129.078 107.238 128.396 109.818L143.708 117.554C143.083 114.863 142.376 112.347 141.684 110.122Z" fill="#0ECDC0"/>
+<path d="M145.753 132.91C145.705 130.592 145.533 128.279 145.236 125.98L127.517 117.846C127.535 118.779 127.59 119.735 127.683 120.714C127.827 122.113 128.099 123.496 128.494 124.846L145.746 132.919L145.753 132.91Z" fill="#0ECDC0"/>
+<path d="M131.314 91.8542L79.8523 85.371C77.5199 65.9803 81.0437 47.0499 87.06 28.2241L138.522 34.7073C130.756 53.1762 128.477 72.2385 131.314 91.8542Z" fill="white"/>
+<path d="M125.699 39.0293L94.2505 35.0674L93.8246 38.4442L125.273 42.4062L125.699 39.0293Z" fill="#104DA9"/>
+<path opacity="0.3" d="M129.605 47.8338L86.9805 42.4639L86.7675 44.1523L129.392 49.5222L129.605 47.8338Z" fill="#104DA9"/>
+<path opacity="0.3" d="M128.917 53.2886L86.2925 47.9187L86.0795 49.6071L128.704 54.977L128.917 53.2886Z" fill="#104DA9"/>
+<path opacity="0.3" d="M128.229 58.7437L85.6045 53.3738L85.3915 55.0622L128.017 60.4321L128.229 58.7437Z" fill="#104DA9"/>
+<path opacity="0.3" d="M127.541 64.1985L84.9165 58.8286L84.7035 60.517L127.329 65.887L127.541 64.1985Z" fill="#104DA9"/>
+<path opacity="0.3" d="M126.853 69.6536L84.2285 64.2837L84.0156 65.9721L126.641 71.342L126.853 69.6536Z" fill="#104DA9"/>
+<path opacity="0.3" d="M126.166 75.1084L83.5405 69.7385L83.3276 71.427L125.953 76.7969L126.166 75.1084Z" fill="#104DA9"/>
+<path opacity="0.3" d="M125.478 80.5633L82.8525 75.1934L82.6396 76.8818L125.265 82.2517L125.478 80.5633Z" fill="#104DA9"/>
+<path d="M106.945 72.7508L58.7988 53.4644C61.4517 34.1149 69.6537 16.6916 80.2406 0L128.386 19.2864C116.198 35.1905 109.166 53.056 106.945 72.7508Z" fill="#F0F0F6"/>
+<path d="M114.886 20.2251L85.4639 8.43896L84.1969 11.5982L113.619 23.3844L114.886 20.2251Z" fill="#104DA9"/>
+<path opacity="0.3" d="M116.436 29.7307L76.5581 13.7561L75.9246 15.3357L115.803 31.3104L116.436 29.7307Z" fill="#104DA9"/>
+<path opacity="0.3" d="M114.389 34.8343L74.5112 18.8596L73.8777 20.4392L113.756 36.4139L114.389 34.8343Z" fill="#104DA9"/>
+<path opacity="0.3" d="M112.343 39.9378L72.4648 23.9631L71.8313 25.5428L111.71 41.5174L112.343 39.9378Z" fill="#104DA9"/>
+<path opacity="0.3" d="M110.296 45.0413L70.418 29.0667L69.7845 30.6463L109.663 46.6209L110.296 45.0413Z" fill="#104DA9"/>
+<path opacity="0.3" d="M108.249 50.1445L68.3711 34.1699L67.7376 35.7495L107.616 51.7242L108.249 50.1445Z" fill="#104DA9"/>
+<path opacity="0.3" d="M106.203 55.2478L66.3247 39.2732L65.6912 40.8528L105.569 56.8275L106.203 55.2478Z" fill="#104DA9"/>
+<path opacity="0.3" d="M104.157 60.3514L64.2783 44.3767L63.6448 45.9563L103.523 61.931L104.157 60.3514Z" fill="#104DA9"/>
+<path d="M95.0379 77.396H43.1688C38.4282 58.4491 39.5555 39.2268 43.1688 19.7969H95.0379C89.6445 39.0914 89.7684 58.2889 95.0379 77.396Z" fill="white"/>
+<path d="M82.8565 25.6875H51.1587V29.0911H82.8565V25.6875Z" fill="#104DA9"/>
+<path opacity="0.3" d="M87.8338 33.9346H44.8716V35.6364H87.8338V33.9346Z" fill="#104DA9"/>
+<path opacity="0.3" d="M87.8338 39.4326H44.8716V41.1344H87.8338V39.4326Z" fill="#104DA9"/>
+<path opacity="0.3" d="M87.8338 44.9309H44.8716V46.6327H87.8338V44.9309Z" fill="#104DA9"/>
+<path opacity="0.3" d="M87.8338 50.429H44.8716V52.1308H87.8338V50.429Z" fill="#104DA9"/>
+<path opacity="0.3" d="M87.8338 55.927H44.8716V57.6288H87.8338V55.927Z" fill="#104DA9"/>
+<path opacity="0.3" d="M87.8338 61.4253H44.8716V63.1271H87.8338V61.4253Z" fill="#104DA9"/>
+<path opacity="0.3" d="M87.8338 66.9231H44.8716V68.6249H87.8338V66.9231Z" fill="#104DA9"/>
+<path d="M60.0757 65.897L42.2062 52.0127C42.0274 51.7019 41.7698 51.4438 41.4593 51.2643C41.1488 51.0848 40.7965 50.9902 40.4378 50.9902H30.7933C30.2523 50.9902 29.7334 51.205 29.3509 51.5873C28.9683 51.9697 28.7534 52.4882 28.7534 53.0289V138.104C28.7534 139.858 29.4505 141.54 30.6913 142.78C31.9322 144.02 33.6151 144.717 35.3699 144.717H134.375C135.244 144.717 136.104 144.546 136.907 144.213C137.71 143.881 138.439 143.394 139.054 142.78C139.668 142.166 140.155 141.437 140.488 140.634C140.82 139.832 140.992 138.972 140.992 138.104V71.9074C140.992 70.3134 140.358 68.7846 139.23 67.6574C138.102 66.5303 136.573 65.897 134.978 65.897H60.0757Z" fill="#7094CB"/>
+<path d="M131.472 160.158C121.96 160.793 114.105 159.146 113.927 156.479C113.748 153.812 121.315 151.135 130.827 150.5C140.338 149.865 148.194 151.512 148.372 154.179C148.55 156.846 140.984 159.523 131.472 160.158Z" fill="#231F20"/>
+<path d="M138.824 150.472C138.824 150.472 141.18 155.094 139.609 155.269C138.039 155.443 137.428 155.443 136.73 154.745C136.348 154.364 135.575 153.852 134.953 153.466C134.584 153.242 134.286 152.918 134.093 152.531C133.9 152.145 133.82 151.712 133.862 151.283C133.908 150.856 134.068 150.504 134.461 150.472C135.508 150.384 136.73 149.425 136.73 149.425L138.824 150.472Z" fill="white"/>
+<path d="M125.821 153.873C125.821 153.873 128.177 158.496 126.607 158.67C125.036 158.844 124.425 158.844 123.727 158.147C123.345 157.765 122.572 157.253 121.95 156.868C121.581 156.643 121.283 156.319 121.09 155.933C120.897 155.546 120.817 155.114 120.859 154.684C120.905 154.257 121.065 153.906 121.458 153.873C122.505 153.786 123.727 152.826 123.727 152.826L125.821 153.873Z" fill="white"/>
+<path d="M137.714 106.01C137.714 106.01 140.716 114.941 139.382 118.114C138.048 121.287 135.935 124.343 135.935 124.343C135.935 124.343 136.714 106.598 137.714 106.01Z" fill="#F0F0F6"/>
+<path d="M136.468 124.916C136.468 124.916 136.642 126.574 136.729 126.661C136.817 126.748 136.642 126.922 136.729 127.184C136.817 127.446 136.904 127.795 136.729 127.882C136.555 127.969 137.689 135.644 137.689 135.644C137.689 135.644 140.482 139.307 139.348 145.064L138.998 150.907C138.998 150.907 136.293 151.082 136.293 150.122C136.293 150.122 136.468 148.989 136.468 148.465C136.468 147.942 136.031 147.942 136.293 147.68C136.555 147.419 136.555 147.244 136.555 147.244C136.555 147.244 136.119 146.895 136.206 146.808C136.293 146.721 135.42 140.528 135.42 140.528C135.42 140.528 134.46 139.569 134.46 139.046V138.522C134.46 138.522 134.024 137.389 134.024 137.301C134.024 137.214 131.668 131.894 131.668 131.894L130.708 135.731L129.661 141.226C129.661 141.226 129.137 146.198 128.09 148.116C128.09 148.116 126.257 154.396 126.257 154.222C126.257 154.047 123.203 153.611 123.29 152.826C123.377 152.041 125.123 141.052 125.123 141.052L124.686 124.742L136.468 124.916Z" fill="#104DA9"/>
+<path d="M129.884 101.012C128.312 99.7357 128.072 97.4267 129.35 95.855C130.627 94.2832 132.937 94.044 134.51 95.3206C136.083 96.5972 136.322 98.9062 135.045 100.478C133.767 102.05 131.457 102.289 129.884 101.012Z" fill="#F8B68E"/>
+<path d="M133.952 100.334C133.952 100.334 134.302 105.807 134.492 105.895C134.683 105.984 129.552 105.339 129.552 105.339C129.552 105.339 130.255 100.585 130.241 100.117L133.952 100.334Z" fill="#F8B68E"/>
+<path d="M126.65 104.812C126.65 104.812 131.886 101.934 132.41 102.021C132.933 102.109 136.433 103.718 138.128 106.373C138.626 108.7 138.626 111.888 138.427 113.682C138.228 115.475 137.032 122.848 136.86 123.652C136.543 125.139 139.426 138.953 139.252 138.953C139.61 140.925 122.48 148.715 122.392 148.453C122.392 147.481 126.65 104.812 126.65 104.812Z" fill="white"/>
+<path d="M123.726 125.527C123.726 125.527 122.068 130.586 123.465 130.411C124.861 130.237 125.472 126.05 125.472 126.05L123.726 125.527Z" fill="#F8B68E"/>
+<path opacity="0.1" d="M130.141 118.157L126.127 125.309L129.509 117.773L130.141 118.157Z" fill="black"/>
+<path d="M130.043 95.0273L130.21 94.8022L129.69 94.5585C129.751 94.4925 129.826 94.4405 129.91 94.4063C129.993 94.372 130.083 94.3562 130.173 94.3601L129.733 93.96C130.567 93.7246 131.439 93.6605 132.298 93.7715C133.157 93.8825 133.985 94.1663 134.731 94.6059C135.846 95.271 136.786 96.3816 136.869 97.6765C136.909 98.3046 136.747 98.9301 136.517 99.516C136.093 100.595 135.318 101.662 134.182 101.897C133.028 102.135 131.904 101.454 130.922 100.802C130.577 100.573 130.217 100.329 130.021 99.9634C130.265 99.5961 130.588 99.288 130.966 99.0616C131.096 99.0017 131.208 98.9106 131.294 98.7964C131.474 98.4928 131.168 98.1312 130.866 97.9474C130.565 97.7635 130.193 97.5545 130.184 97.2019C130.177 96.959 130.354 96.7565 130.49 96.5553C130.862 96.0078 129.961 95.1384 130.043 95.0273Z" fill="#512B1F"/>
+<path d="M128.151 104.225C128.151 104.225 131.423 104.934 130.892 109.365C130.362 113.796 129.389 118.226 129.389 118.226L126.116 125.404L125.762 126.733L123.374 126.113L125.143 115.834C125.143 115.834 125.762 104.846 126.558 104.491C127.06 104.277 127.606 104.186 128.151 104.225Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="182" height="163" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
--- a/app/javascript/vue/label_template/components/label_preview.vue
+++ b/app/javascript/vue/label_template/components/label_preview.vue
@ -82,7 +82,7 @@
    { value: 24, label: '24 dpmm (600 dpi)' }
  ]

-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'

  export default {
    name: 'LabelPreview',
--- a/app/javascript/vue/label_template/container.vue
+++ b/app/javascript/vue/label_template/container.vue
@ -116,8 +116,8 @@

 <script>

- import InlineEdit from 'vue/shared/inline_edit.vue'
- import InsertFieldDropdown from 'vue/label_template/insert_field_dropdown.vue'
+ import InlineEdit from '../shared/inline_edit.vue'
+ import InsertFieldDropdown from './insert_field_dropdown.vue'
 import LabelPreview from './components/label_preview.vue'

  export default {
--- a/app/javascript/vue/navigation/notifications/notifications_flyout.vue
+++ b/app/javascript/vue/navigation/notifications/notifications_flyout.vue
@ -37,7 +37,7 @@

 <script>

-import NotificationItem from 'vue/navigation/notifications/notification_item.vue'
+import NotificationItem from './notification_item.vue'

 export default {
  name: 'NotificationsFlyout',
--- a/app/javascript/vue/navigation/top_menu.vue
+++ b/app/javascript/vue/navigation/top_menu.vue
@ -76,8 +76,8 @@
 </template>

 <script>
-  import NotificationsFlyout from 'vue/navigation/notifications/notifications_flyout.vue'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import NotificationsFlyout from './notifications/notifications_flyout.vue'
+  import DropdownSelector from '../shared/dropdown_selector.vue'

  export default {
    name: 'TopMenuContainer',
--- a/app/javascript/vue/protocol/attachments.vue
+++ b/app/javascript/vue/protocol/attachments.vue
@ -93,13 +93,13 @@
  </div>
 </template>
 <script>
-  import listAttachment from 'vue/protocol/step_attachments/list.vue'
-  import inlineAttachment from 'vue/protocol/step_attachments/inline.vue'
-  import thumbnailAttachment from 'vue/protocol/step_attachments/thumbnail.vue'
-  import uploadingAttachment from 'vue/protocol/step_attachments/uploading.vue'
-  import emptyAttachment from 'vue/protocol/step_attachments/empty.vue'
-  import marvinjsIcon from 'images/icon_small/marvinjs.svg'
-  import bioEddieIcon from 'images/icon_small/bio_eddie.png'
+  import listAttachment from './step_attachments/list.vue'
+  import inlineAttachment from './step_attachments/inline.vue'
+  import thumbnailAttachment from './step_attachments/thumbnail.vue'
+  import uploadingAttachment from './step_attachments/uploading.vue'
+  import emptyAttachment from './step_attachments/empty.vue'
+  import marvinjsIcon from '../images/marvinjs.svg'
+  import bioEddieIcon from '../images/bio_eddie.png'

  import WopiFileModal from './step_attachments/mixins/wopi_file_modal.js'

--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@ -132,15 +132,15 @@
 </template>

 <script>
-  import InlineEdit from 'vue/shared/inline_edit.vue'
-  import Step from 'vue/protocol/step'
-  import ProtocolMetadata from 'vue/protocol/protocolMetadata'
-  import ProtocolOptions from 'vue/protocol/protocolOptions'
-  import ProtocolModals from 'vue/protocol/modals'
-  import Tinymce from 'vue/shared/tinymce.vue'
-  import ReorderableItemsModal from 'vue/protocol/modals/reorderable_items_modal.vue'
+  import InlineEdit from '../shared/inline_edit.vue'
+  import Step from './step'
+  import ProtocolMetadata from './protocolMetadata'
+  import ProtocolOptions from './protocolOptions'
+  import ProtocolModals from './modals'
+  import Tinymce from '../shared/tinymce.vue'
+  import ReorderableItemsModal from './modals/reorderable_items_modal.vue'

-  import UtilsMixin from 'vue/mixins/utils.js'
+  import UtilsMixin from '../mixins/utils.js'

  export default {
    name: 'ProtocolContainer',
--- a/app/javascript/vue/protocol/modals.vue
+++ b/app/javascript/vue/protocol/modals.vue
@ -3,7 +3,7 @@
  </div>
 </template>
 <script>
-  import deleteElementModal from 'vue/protocol/modals/delete_element.vue'
+  import deleteElementModal from './modals/delete_element.vue'

  export default {
    name: 'ProtocolModals',
--- a/app/javascript/vue/protocol/protocolMetadata.vue
+++ b/app/javascript/vue/protocol/protocolMetadata.vue
@ -54,8 +54,8 @@
 </template>
 <script>

-  import InlineEdit from 'vue/shared/inline_edit.vue'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import InlineEdit from '../shared/inline_edit.vue'
+  import DropdownSelector from '../shared/dropdown_selector.vue'

  export default {
    name: 'ProtocolMetadata',
--- a/app/javascript/vue/protocol/protocolOptions.vue
+++ b/app/javascript/vue/protocol/protocolOptions.vue
@ -82,7 +82,7 @@
 </template>

 <script>
-import DeleteStepsModals from 'vue/protocol/modals/delete_steps'
+import DeleteStepsModals from './modals/delete_steps'

 export default {

--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@ -186,19 +186,19 @@
    'StepTable': 'fa-table'
  }

-  import InlineEdit from 'vue/shared/inline_edit.vue'
-  import StepTable from 'vue/protocol/step_elements/table.vue'
-  import StepText from 'vue/protocol/step_elements/text.vue'
-  import Checklist from 'vue/protocol/step_elements/checklist.vue'
-  import deleteStepModal from 'vue/protocol/modals/delete_step.vue'
-  import Attachments from 'vue/protocol/attachments.vue'
-  import fileModal from 'vue/protocol/step_attachments/file_modal.vue'
-  import clipboardPasteModal from 'vue/protocol/step_attachments/clipboard_paste_modal.vue'
-  import ReorderableItemsModal from 'vue/protocol/modals/reorderable_items_modal.vue'
+  import InlineEdit from '../shared/inline_edit.vue'
+  import StepTable from './step_elements/table.vue'
+  import StepText from './step_elements/text.vue'
+  import Checklist from './step_elements/checklist.vue'
+  import deleteStepModal from './modals/delete_step.vue'
+  import Attachments from './attachments.vue'
+  import fileModal from './step_attachments/file_modal.vue'
+  import clipboardPasteModal from './step_attachments/clipboard_paste_modal.vue'
+  import ReorderableItemsModal from './modals/reorderable_items_modal.vue'

-  import UtilsMixin from 'vue/mixins/utils.js'
-  import AttachmentsMixin from 'vue/protocol/mixins/attachments.js'
-  import StorageUsage from 'vue/protocol/storage_usage.vue'
+  import UtilsMixin from '../mixins/utils.js'
+  import AttachmentsMixin from './mixins/attachments.js'
+  import StorageUsage from './storage_usage.vue'

  export default {
    name: 'StepContainer',
--- a/app/javascript/vue/protocol/step_elements/checklist.vue
+++ b/app/javascript/vue/protocol/step_elements/checklist.vue
@ -78,11 +78,11 @@
 </template>

 <script>
-  import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
-  import DuplicateMixin from 'vue/protocol/mixins/components/duplicate.js'
-  import deleteElementModal from 'vue/protocol/modals/delete_element.vue'
-  import InlineEdit from 'vue/shared/inline_edit.vue'
-  import ChecklistItem from 'vue/protocol/step_elements/checklistItem.vue'
+  import DeleteMixin from '../mixins/components/delete.js'
+  import DuplicateMixin from '../mixins/components/duplicate.js'
+  import deleteElementModal from '../modals/delete_element.vue'
+  import InlineEdit from '../../shared/inline_edit.vue'
+  import ChecklistItem from '../step_elements/checklistItem.vue'
  import Draggable from 'vuedraggable'

  export default {
--- a/app/javascript/vue/protocol/step_elements/checklistItem.vue
+++ b/app/javascript/vue/protocol/step_elements/checklistItem.vue
@ -52,9 +52,9 @@
 </template>

 <script>
-  import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
-  import InlineEdit from 'vue/shared/inline_edit.vue'
-  import deleteElementModal from 'vue/protocol/modals/delete_element.vue'
+  import DeleteMixin from '../mixins/components/delete.js'
+  import InlineEdit from '../../shared/inline_edit.vue'
+  import deleteElementModal from '../modals/delete_element.vue'

  export default {
    name: 'ChecklistItem',
--- a/app/javascript/vue/protocol/step_elements/table.vue
+++ b/app/javascript/vue/protocol/step_elements/table.vue
@ -59,11 +59,11 @@
 </template>

 <script>
-  import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
-  import DuplicateMixin from 'vue/protocol/mixins/components/duplicate.js'
-  import deleteElementModal from 'vue/protocol/modals/delete_element.vue'
-  import InlineEdit from 'vue/shared/inline_edit.vue'
-  import TableNameModal from 'vue/protocol/modals/table_name_modal.vue'
+  import DeleteMixin from '../mixins/components/delete.js'
+  import DuplicateMixin from '../mixins/components/duplicate.js'
+  import deleteElementModal from '../modals/delete_element.vue'
+  import InlineEdit from '../../shared/inline_edit.vue'
+  import TableNameModal from '../modals/table_name_modal.vue'

  export default {
    name: 'StepTable',
--- a/app/javascript/vue/protocol/step_elements/text.vue
+++ b/app/javascript/vue/protocol/step_elements/text.vue
@ -40,10 +40,10 @@
 </template>

 <script>
-  import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
-  import DuplicateMixin from 'vue/protocol/mixins/components/duplicate.js'
-  import deleteElementModal from 'vue/protocol/modals/delete_element.vue'
-  import Tinymce from 'vue/shared/tinymce.vue'
+  import DeleteMixin from '../mixins/components/delete.js'
+  import DuplicateMixin from '../mixins/components/duplicate.js'
+  import deleteElementModal from '../modals/delete_element.vue'
+  import Tinymce from '../../shared/tinymce.vue'

  export default {
    name: 'StepText',
--- a/app/javascript/vue/repository_filter/container.vue
+++ b/app/javascript/vue/repository_filter/container.vue
@ -23,9 +23,9 @@
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
-    <FiltersList 
-      :filters="filters" 
-      :my_modules="my_modules" 
+    <FiltersList
+      :filters="filters"
+      :my_modules="my_modules"
      :key="filterListKey ? 1 : 0"
      @filter:update="updateFilter"
      @filter:delete="deleteFilter" />
@ -56,9 +56,9 @@
 </template>

 <script>
-  import ColumnElement from 'vue/repository_filter/column.vue'
-  import FiltersList from 'vue/repository_filter/filters_list.vue'
-  import SavedFilterElement from 'vue/repository_filter/saved_filter.vue'
+  import ColumnElement from './column.vue'
+  import FiltersList from './filters_list.vue'
+  import SavedFilterElement from './saved_filter.vue'

  export default {
    name: 'FilterContainer',
--- a/app/javascript/vue/repository_filter/filter.vue
+++ b/app/javascript/vue/repository_filter/filter.vue
@ -20,23 +20,23 @@

 <script>
  // filter types
-  import RepositoryNonEmptyTextValue from 'vue/repository_filter/filters/repositoryNonEmptyTextValue.vue'
-  import RepositoryAssetValue from 'vue/repository_filter/filters/repositoryAssetValue.vue'
-  import RepositoryTextValue from 'vue/repository_filter/filters/repositoryTextValue.vue'
-  import RepositoryNumberValue from 'vue/repository_filter/filters/repositoryNumberValue.vue'
-  import RepositoryMyModuleValue from 'vue/repository_filter/filters/repositoryMyModuleValue.vue'
-  import RepositoryDateValue from 'vue/repository_filter/filters/repositoryDateValue.vue'
-  import RepositoryDateRangeValue from 'vue/repository_filter/filters/repositoryDateRangeValue.vue'
-  import RepositoryDateTimeValue from 'vue/repository_filter/filters/repositoryDateTimeValue.vue'
-  import RepositoryDateTimeRangeValue from 'vue/repository_filter/filters/repositoryDateTimeRangeValue.vue'
-  import RepositoryTimeValue from 'vue/repository_filter/filters/repositoryTimeValue.vue'
-  import RepositoryTimeRangeValue from 'vue/repository_filter/filters/repositoryTimeRangeValue.vue'
-  import RepositoryListValue from 'vue/repository_filter/filters/repositoryListValue.vue'
-  import RepositoryStatusValue from 'vue/repository_filter/filters/repositoryStatusValue.vue'
-  import RepositoryChecklistValue from 'vue/repository_filter/filters/repositoryChecklistValue.vue'
-  import RepositoryUserValue from 'vue/repository_filter/filters/repositoryUserValue.vue'
-  import RepositoryStockValue from 'vue/repository_filter/filters/repositoryStockValue.vue'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import RepositoryNonEmptyTextValue from './filters/repositoryNonEmptyTextValue.vue'
+  import RepositoryAssetValue from './filters/repositoryAssetValue.vue'
+  import RepositoryTextValue from './filters/repositoryTextValue.vue'
+  import RepositoryNumberValue from './filters/repositoryNumberValue.vue'
+  import RepositoryMyModuleValue from './filters/repositoryMyModuleValue.vue'
+  import RepositoryDateValue from './filters/repositoryDateValue.vue'
+  import RepositoryDateRangeValue from './filters/repositoryDateRangeValue.vue'
+  import RepositoryDateTimeValue from './filters/repositoryDateTimeValue.vue'
+  import RepositoryDateTimeRangeValue from './filters/repositoryDateTimeRangeValue.vue'
+  import RepositoryTimeValue from './filters/repositoryTimeValue.vue'
+  import RepositoryTimeRangeValue from './filters/repositoryTimeRangeValue.vue'
+  import RepositoryListValue from './filters/repositoryListValue.vue'
+  import RepositoryStatusValue from './filters/repositoryStatusValue.vue'
+  import RepositoryChecklistValue from './filters/repositoryChecklistValue.vue'
+  import RepositoryUserValue from './filters/repositoryUserValue.vue'
+  import RepositoryStockValue from './filters/repositoryStockValue.vue'
+  import DropdownSelector from '../shared/dropdown_selector.vue'


  export default {
--- a/app/javascript/vue/repository_filter/filters/repositoryAssetValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryAssetValue.vue
@ -22,8 +22,8 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'

  export default {
    name: 'RepositoryAssetValue',
--- a/app/javascript/vue/repository_filter/filters/repositoryChecklistValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryChecklistValue.vue
@ -27,8 +27,8 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
  export default {
    name: 'RepositoryChecklistValue',
    mixins: [FilterMixin],
--- a/app/javascript/vue/repository_filter/filters/repositoryDateRangeValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryDateRangeValue.vue
@ -19,10 +19,10 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import RangeDateTimeFilterMixin from 'vue/repository_filter/mixins/filters/range_date_time_filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
-  import DateTimePicker from 'vue/shared/date_picker.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import RangeDateTimeFilterMixin from '../mixins/filters/range_date_time_filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
+  import DateTimePicker from '../../shared/date_picker.vue'

  export default {
    name: 'RepositoryDateRangeValue',
--- a/app/javascript/vue/repository_filter/filters/repositoryDateTimeRangeValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryDateTimeRangeValue.vue
@ -21,10 +21,10 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import RangeDateTimeFilterMixin from 'vue/repository_filter/mixins/filters/range_date_time_filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
-  import DateTimePicker from 'vue/shared/date_time_picker.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import RangeDateTimeFilterMixin from '../mixins/filters/range_date_time_filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
+  import DateTimePicker from '../../shared/date_time_picker.vue'

  export default {
    name: 'RepositoryDateRangeValue',
--- a/app/javascript/vue/repository_filter/filters/repositoryDateTimeValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryDateTimeValue.vue
@ -23,10 +23,10 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DateTimeFilterMixin from 'vue/repository_filter/mixins/filters/date_time_filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
-  import DateTimePicker from 'vue/shared/date_time_picker.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DateTimeFilterMixin from '../mixins/filters/date_time_filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
+  import DateTimePicker from '../../shared/date_time_picker.vue'

  export default {
    name: 'RepositoryDateValue',
--- a/app/javascript/vue/repository_filter/filters/repositoryDateValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryDateValue.vue
@ -21,10 +21,10 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DateTimeFilterMixin from 'vue/repository_filter/mixins/filters/date_time_filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
-  import DateTimePicker from 'vue/shared/date_picker.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DateTimeFilterMixin from '../mixins/filters/date_time_filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
+  import DateTimePicker from '../../shared/date_picker.vue'

  export default {
    name: 'RepositoryDateValue',
--- a/app/javascript/vue/repository_filter/filters/repositoryListValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryListValue.vue
@ -27,8 +27,8 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
  export default {
    name: 'RepositoryListValue',
    mixins: [FilterMixin],
--- a/app/javascript/vue/repository_filter/filters/repositoryMyModuleValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryMyModuleValue.vue
@ -29,8 +29,8 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
  export default {
    name: 'RepositoryMyModuleValue',
    mixins: [FilterMixin],
--- a/app/javascript/vue/repository_filter/filters/repositoryNonEmptyTextValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryNonEmptyTextValue.vue
@ -22,8 +22,8 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
  export default {
    name: 'RepositoryNonEmptyTextValue',
    mixins: [FilterMixin],
--- a/app/javascript/vue/repository_filter/filters/repositoryNumberValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryNumberValue.vue
@ -43,8 +43,8 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
  export default {
    name: 'RepositoryNumberValue',
    mixins: [FilterMixin],
--- a/app/javascript/vue/repository_filter/filters/repositoryStatusValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryStatusValue.vue
@ -27,8 +27,8 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
  export default {
    name: 'RepositoryStatusValue',
    mixins: [FilterMixin],
--- a/app/javascript/vue/repository_filter/filters/repositoryStockValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryStockValue.vue
@ -53,8 +53,8 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
  export default {
    name: 'RepositoryStockValue',
    mixins: [FilterMixin],
--- a/app/javascript/vue/repository_filter/filters/repositoryTextValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryTextValue.vue
@ -22,8 +22,8 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
  export default {
    name: 'RepositoryTextValue',
    mixins: [FilterMixin],
--- a/app/javascript/vue/repository_filter/filters/repositoryTimeRangeValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryTimeRangeValue.vue
@ -19,10 +19,10 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import RangeDateTimeFilterMixin from 'vue/repository_filter/mixins/filters/range_date_time_filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
-  import DateTimePicker from 'vue/shared/date_time_picker.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import RangeDateTimeFilterMixin from '../mixins/filters/range_date_time_filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
+  import DateTimePicker from '../../shared/date_time_picker.vue'

  export default {
    name: 'RepositoryTimeRangeValue',
--- a/app/javascript/vue/repository_filter/filters/repositoryTimeValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryTimeValue.vue
@ -21,10 +21,10 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DateTimeFilterMixin from 'vue/repository_filter/mixins/filters/date_time_filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
-  import DateTimePicker from 'vue/shared/date_time_picker.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DateTimeFilterMixin from '../mixins/filters/date_time_filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
+  import DateTimePicker from '../../shared/date_time_picker.vue'

  export default {
    name: 'RepositoryTimeValue',
--- a/app/javascript/vue/repository_filter/filters/repositoryUserValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryUserValue.vue
@ -30,8 +30,8 @@
 </template>

 <script>
-  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import FilterMixin from '../mixins/filter.js'
+  import DropdownSelector from '../../shared/dropdown_selector.vue'
  export default {
    name: 'RepositoryUserValue',
    mixins: [FilterMixin],
--- a/app/javascript/vue/repository_filter/filters_list.vue
+++ b/app/javascript/vue/repository_filter/filters_list.vue
@ -12,7 +12,7 @@
 </template>

 <script>
-  import FilterElement from 'vue/repository_filter/filter.vue'
+  import FilterElement from './filter.vue'

    export default {
    name: 'FiltersList',
--- a/app/javascript/vue/repository_print_modal/container.vue
+++ b/app/javascript/vue/repository_print_modal/container.vue
@ -91,8 +91,8 @@
 </template>

 <script>
-  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
-  import LabelPreview from 'vue/label_template/components/label_preview.vue'
+  import DropdownSelector from '../shared/dropdown_selector.vue'
+  import LabelPreview from '../label_template/components/label_preview.vue'

  export default {
    name: 'PrintModalContainer',
--- a/app/javascript/vue/shared/date_time_picker.vue
+++ b/app/javascript/vue/shared/date_time_picker.vue
@ -6,8 +6,8 @@
 </template>

 <script>
-  import TimePicker from 'vue/shared/time_picker.vue'
-  import DatePicker from 'vue/shared/date_picker.vue'
+  import TimePicker from './time_picker.vue'
+  import DatePicker from './date_picker.vue'

  export default {
    name: 'DateTimePicker',
--- a/app/javascript/vue/shared/inline_edit.vue
+++ b/app/javascript/vue/shared/inline_edit.vue
@ -30,7 +30,7 @@
 </template>

 <script>
-  import UtilsMixin from 'vue/mixins/utils.js';
+  import UtilsMixin from '../mixins/utils.js';

  export default {
    name: 'InlineEdit',
--- a/app/javascript/vue/shared/pdf_viewer.vue
+++ b/app/javascript/vue/shared/pdf_viewer.vue
@ -55,7 +55,7 @@
 </template>

 <script>
-  import blockedIcon from 'images/pdf_js/blocked.svg'
+  import blockedIcon from '../images/pdf_js/blocked.svg'

  export default {
    name: 'PdfViewer',
--- a/app/javascript/vue/shared/tinymce.vue
+++ b/app/javascript/vue/shared/tinymce.vue
@ -54,7 +54,7 @@
 </template>

 <script>
-  import UtilsMixin from 'vue/mixins/utils.js';
+  import UtilsMixin from '../mixins/utils.js';

  export default {
    name: 'Tinymce',
--- a/app/serializers/asset_serializer.rb
+++ b/app/serializers/asset_serializer.rb
@ -3,7 +3,6 @@
 class AssetSerializer < ActiveModel::Serializer
  include Canaid::Helpers::PermissionsHelper
  include Rails.application.routes.url_helpers
-  include Webpacker::Helper
  include FileIconsHelper
  include ActionView::Helpers::NumberHelper
  include ApplicationHelper
@ -79,7 +78,7 @@ class AssetSerializer < ActiveModel::Serializer
    {
      url: object.pdf? ? asset_download_path(object) : asset_pdf_preview_path(object),
      size: !object.pdf? && object.pdf_preview_ready? ? object.file_pdf_preview&.blob&.byte_size : object.file_size,
-      worker_url: asset_pack_path('pdfjs/pdf_js_worker.js')
+      worker_url: asset_path('pdf_js_worker.js')
    }
  end

--- a/app/views/label_printers/_label_printer_modal.html.erb
+++ b/app/views/label_printers/_label_printer_modal.html.erb
@ -19,4 +19,4 @@
 </div>

 <%= render partial: 'label_printers/zebra_printer_library' %>
-<%= javascript_pack_tag 'vue/repository_print_modal' %>
+<%= javascript_include_tag 'vue_repository_print_modal' %>
--- a/app/views/label_templates/show.html.erb
+++ b/app/views/label_templates/show.html.erb
@ -18,4 +18,4 @@
  />
 </div>

-<%= javascript_pack_tag 'vue/label_template' %>
+<%= javascript_include_tag 'vue_label_template' %>
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -14,7 +14,7 @@

    <%= javascript_include_tag 'jquery_bundle' %>
    <%= javascript_include_tag 'application' %>
-    <%= javascript_pack_tag 'application' %>
+    <%= javascript_include_tag 'application_pack' %>
    <%= javascript_include_tag 'session_end' %>


@ -27,19 +27,19 @@
    <%= favicon_link_tag "favicon-16.png", type: "image/png", size: "16x16" %>
    <%= favicon_link_tag "favicon-32.png", type: "image/png", size: "32x32" %>
    <%= favicon_link_tag "favicon-48.png", type: "image/png", size: "48x48" %>
-    <%= stylesheet_pack_tag 'fonts', id: 'font-css-pack' %>
-    <%= stylesheet_pack_tag 'fontawesome' %>
+    <%= stylesheet_link_tag 'fonts', id: 'font-css-pack' %>
+    <%= stylesheet_link_tag 'fontawesome' %>

-    <%= stylesheet_pack_tag 'prism' %>
+    <%= stylesheet_link_tag 'prism' %>

    <%= csrf_meta_tags %>
    <% if content_for?(:head) %>
      <%= yield(:head) %>
    <% end %>

-    <%= javascript_pack_tag 'tui_image_editor' %>
-    <%= stylesheet_pack_tag 'tui_image_editor_styles' %>
-    <%= javascript_pack_tag 'vue/navigation/top_menu' %>
+    <%= javascript_include_tag 'tui_image_editor' %>
+    <%= stylesheet_link_tag 'tui_image_editor_styles' %>
+    <%= javascript_include_tag 'vue_navigation_top_menu' %>
  </head>
  <body
    class="<%= yield :body_class %>"
@ -110,6 +110,6 @@
      window.IN_REQUEST = false;
    </script>

-    <%= javascript_pack_tag 'prism' %>
+    <%= javascript_include_tag 'prism' %>
  </body>
 </html>
--- a/app/views/layouts/sign_in_halt.html.erb
+++ b/app/views/layouts/sign_in_halt.html.erb
@ -17,7 +17,7 @@
    <%= favicon_link_tag "favicon-16.png", type: "image/png", size: "16x16" %>
    <%= favicon_link_tag "favicon-32.png", type: "image/png", size: "32x32" %>
    <%= favicon_link_tag "favicon-48.png", type: "image/png", size: "48x48" %>
-    <%= stylesheet_pack_tag 'fontawesome' %>
+    <%= stylesheet_link_tag 'fontawesome' %>

    <%= csrf_meta_tags %>
  </head>
--- a/app/views/my_modules/archive.html.erb
+++ b/app/views/my_modules/archive.html.erb
@ -28,5 +28,5 @@
  </div>
 </div>

-<%= javascript_pack_tag 'pdfjs/pdf_js' %>
-<%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %>
+<%= javascript_include_tag 'pdfjs/pdf_js' %>
+<%= stylesheet_link_tag 'pdfjs/pdf_js_styles' %>
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@ -177,11 +177,11 @@
 <%= javascript_include_tag("my_modules/protocols") %>
 <%= javascript_include_tag("my_modules/status_flow") %>
 <%= javascript_include_tag("my_modules/tags") %>
-<%= javascript_pack_tag 'emoji_button' %>
+<%= javascript_include_tag 'emoji_button' %>
 <%= javascript_include_tag("my_modules/repositories") %>
 <%= javascript_include_tag("my_modules/pwa_mobile_app") %>
-<%= javascript_pack_tag 'pdfjs/pdf_js' %>
-<%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %>
+<%= javascript_include_tag 'pdf_js' %>
+<%= stylesheet_link_tag 'pdf_js_styles' %>

-<%= javascript_pack_tag 'vue/protocol' %>
+<%= javascript_include_tag 'vue_protocol' %>

--- a/app/views/my_modules/results.html.erb
+++ b/app/views/my_modules/results.html.erb
@ -92,8 +92,8 @@
 <%= javascript_include_tag "results/result_texts" %>
 <%= javascript_include_tag "results/result_tables" %>
 <%= javascript_include_tag "results/result_assets" %>
-<%= javascript_pack_tag 'pdfjs/pdf_js' %>
-<%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %>
+<%= javascript_include_tag 'pdf_js' %>
+<%= stylesheet_link_tag 'pdf_js_styles' %>

 <%= render 'shared/tiny_mce_packs' %>
 <%= render partial: 'label_printers/label_printer_modal' %>
--- a/app/views/protocols/edit.html.erb
+++ b/app/views/protocols/edit.html.erb
@ -15,5 +15,5 @@

 <!-- Delete file modal -->
 <%= render partial: 'assets/asset_delete_modal.html.erb' %>
-<%= javascript_pack_tag 'pdfjs/pdf_js' %>
-<%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %>
+<%= javascript_include_tag 'pdf_js' %>
+<%= stylesheet_link_tag 'pdf_js_styles' %>
--- a/app/views/protocols/index.html.erb
+++ b/app/views/protocols/index.html.erb
@ -139,5 +139,5 @@
 <%= javascript_include_tag "assets/wopi/create_wopi_file" %>
 <%= javascript_include_tag "protocols/index" %>
 <%= javascript_include_tag "protocols/steps" %>
-<%= javascript_pack_tag 'pdfjs/pdf_js' %>
-<%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %>
+<%= javascript_include_tag 'pdf_js' %>
+<%= stylesheet_link_tag 'pdf_js_styles' %>
--- a/app/views/protocols/show.html.erb
+++ b/app/views/protocols/show.html.erb
@ -30,9 +30,9 @@

 <%= javascript_include_tag "handsontable.full" %>
 <%= render partial: "shared/formulas_libraries.html.erb" %>
-<%= javascript_pack_tag 'pdfjs/pdf_js' %>
-<%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %>
+<%= javascript_include_tag 'pdf_js' %>
+<%= stylesheet_link_tag 'pdf_js_styles' %>

 <%= render 'shared/tiny_mce_packs' %>
-<%= javascript_pack_tag 'vue/protocol' %>
+<%= javascript_include_tag 'vue_protocol' %>
 <%= render partial: 'label_printers/label_printer_modal' %>
--- a/app/views/reports/index.html.erb
+++ b/app/views/reports/index.html.erb
@ -70,5 +70,5 @@

 <%= javascript_include_tag 'reports/save_pdf_to_inventory' %>
 <%= javascript_include_tag 'reports/reports_datatable' %>
-<%= javascript_pack_tag 'pdfjs/pdf_js' %>
-<%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %>
+<%= javascript_include_tag 'pdf_js' %>
+<%= stylesheet_link_tag 'pdf_js_styles' %>
--- a/app/views/repositories/_repository_filters.html.erb
+++ b/app/views/repositories/_repository_filters.html.erb
@ -38,5 +38,5 @@
      </div>
    </div>
  </template>
-  <%= javascript_pack_tag 'vue/repository_filter' %>
+  <%= javascript_include_tag 'vue_repository_filter' %>
 <% end %>
--- a/app/views/repositories/show.html.erb
+++ b/app/views/repositories/show.html.erb
@ -108,7 +108,7 @@

 <% if @repository.is_a?(BmtRepository) %>
  <%= render partial: 'save_bmt_filter_modal' %>
-  <%= javascript_pack_tag 'vue/bmt_filter' %>
+  <%= javascript_include_tag 'vue_bmt_filter' %>
 <% else %>
  <%= render partial: 'repository_filters' %>
  <%= render partial: 'save_repository_filter_modal' %>
@ -117,10 +117,10 @@
 <%= javascript_include_tag 'repositories/edit' %>
 <%= javascript_include_tag 'repositories/repository_datatable' %>
 <%= javascript_include_tag "repositories/show" %>
-<%= javascript_pack_tag 'custom/inputmask' %>
-<%= javascript_pack_tag 'emoji_button' %>
-<%= javascript_pack_tag 'pdfjs/pdf_js' %>
-<%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %>
+<%= javascript_include_tag 'inputmask' %>
+<%= javascript_include_tag 'emoji_button' %>
+<%= javascript_include_tag 'pdf_js' %>
+<%= stylesheet_link_tag 'pdf_js_styles' %>



--- a/app/views/shared/_tiny_mce_packs.html.erb
+++ b/app/views/shared/_tiny_mce_packs.html.erb
@ -1,4 +1,4 @@
 <div class="tiny-mce-packs">
-  <%= javascript_pack_tag 'tiny_mce' %>
-  <%= stylesheet_pack_tag 'tiny_mce_styles' %>
+  <%= javascript_include_tag 'tiny_mce' %>
+  <%= stylesheet_link_tag 'tiny_mce_styles' %>
 </div>
--- a/app/views/users/registrations/edit.html.erb
+++ b/app/views/users/registrations/edit.html.erb
@ -72,6 +72,6 @@
 <%= render partial: '2fa_modal' %>
 <%= render partial: 'users/shared/user_avatars_modal' %>

-<%= javascript_pack_tag 'custom/croppie' %>
-<%= stylesheet_pack_tag 'custom/croppie_styles' %>
+<%= javascript_include_tag 'croppie' %>
+<%= stylesheet_link_tag 'croppie_styles' %>
 <%= javascript_include_tag "users/registrations/edit" %>
--- a/babel.config.js
+++ b/babel.config.js
@ -41,6 +41,18 @@ module.exports = function(api) {
      require('@babel/plugin-syntax-dynamic-import').default,
      isTestEnv && require('babel-plugin-dynamic-import-node'),
      require('@babel/plugin-transform-destructuring').default,
+      [
+        require('@babel/plugin-proposal-private-property-in-object').default,
+        {
+          loose: true
+        }
+      ],
+      [
+        require('@babel/plugin-proposal-private-methods').default,
+        {
+          loose: true
+        }
+      ],
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
--- a/bin/dev
+++ b/bin/dev
@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+
+if ! gem list foreman -i --silent; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+exec foreman start -f Procfile.dev "$@"
--- a/bin/webpack
+++ b/bin/webpack
@ -1,19 +0,0 @@
-#!/usr/bin/env ruby
-
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= "development"
-
-require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
-require "rubygems"
-require "bundler/setup"
-
-require "webpacker"
-require "webpacker/webpack_runner"
-
-APP_ROOT = File.expand_path("..", __dir__)
-Dir.chdir(APP_ROOT) do
-  Webpacker::WebpackRunner.run(ARGV)
-end
--- a/bin/webpack-dev-server
+++ b/bin/webpack-dev-server
@ -1,19 +0,0 @@
-#!/usr/bin/env ruby
-
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= "development"
-
-require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
-require "rubygems"
-require "bundler/setup"
-
-require "webpacker"
-require "webpacker/dev_server_runner"
-
-APP_ROOT = File.expand_path("..", __dir__)
-Dir.chdir(APP_ROOT) do
-  Webpacker::DevServerRunner.run(ARGV)
-end
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@ -2,7 +2,6 @@ require 'active_support/core_ext/integer/time'

 Rails.application.configure do
  # Verifies that versions and hashed value of the package contents in the project's package.json
-  config.webpacker.check_yarn_integrity = true

  # Settings specified here will take precedence over those in config/application.rb.

--- a/config/environments/production.rb
+++ b/config/environments/production.rb
@ -1,6 +1,5 @@
 Rails.application.configure do
  # Verifies that versions and hashed value of the package contents in the project's package.json
-  config.webpacker.check_yarn_integrity = false

  # Settings specified here will take precedence over those in config/application.rb.

--- a/config/environments/test.rb
+++ b/config/environments/test.rb
@ -1,6 +1,5 @@
 Rails.application.configure do
  # Verifies that versions and hashed value of the package contents in the project's package.json
-  config.webpacker.check_yarn_integrity = false

  # Settings specified here will take precedence over those in config/application.rb.

--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@ -5,8 +5,6 @@ Rails.application.config.assets.version = '1.0'

 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
-# Add Yarn node_modules folder to the asset load path.
-Rails.application.config.assets.paths << Rails.root.join('node_modules')

 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets
--- a/config/initializers/content_security_policy.rb
+++ b/config/initializers/content_security_policy.rb
@ -11,8 +11,6 @@
 #   policy.object_src  :none
 #   policy.script_src  :self, :https
 #   policy.style_src   :self, :https
-#   # If you are using webpack-dev-server then specify webpack-dev-server host
-#   policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?

 #   # Specify URI for violation reports
 #   # policy.report_uri "/csp-violation-report-endpoint"
--- a/config/webpack/development.js
+++ b/config/webpack/development.js
@ -1,6 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
-
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()
-module.exports.output.filename = 'js/[name]-[hash].js';
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@ -1,48 +0,0 @@
-const { environment } = require('@rails/webpacker')
-const { VueLoaderPlugin } = require('vue-loader')
-const vue = require('./loaders/vue')
-const { execSync } = require('child_process');
-const { basename, resolve } = require('path');
-const { readdirSync } = require('fs');
-
-environment.loaders.delete('nodeModules')
-environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
-environment.loaders.prepend('vue', vue)
-
-// Engine pack loading based on https://github.com/rails/webpacker/issues/348#issuecomment-635480949
-// Get paths to all engines' folders
-console.log('Including packs from addons...');
-
-let enginePaths = [];
-
-try {
-  enginePaths = execSync('ls -d $PWD/addons/*').toString().split('\n').filter((p) => !!p);
-} catch {
-  console.log('Unable to find any addons.')
-}
-
-enginePaths.forEach((path) => {
-  const packsFolderPath = `${path}/app/javascript/packs`;
-
-  let entryFiles;
-  try {
-    entryFiles = readdirSync(packsFolderPath);
-    console.log(`Found packs in ${path}`);
-  } catch {
-    console.log(`No packs in ${path}`);
-    return;
-  }
-
-  entryFiles.forEach((file) => {
-    // File name without .js
-    const name = basename(file, '.js');
-    const entryPath = `${packsFolderPath}/${file}`;
-
-    environment.entry.set(name, entryPath);
-  });
-
-  // Otherwise babel won't transpile the file
-  environment.loaders.get('babel').include.push(`${path}/app/javascript`);
-});
-
-module.exports = environment;
--- a/config/webpack/loaders/vue.js
+++ b/config/webpack/loaders/vue.js
@ -1,6 +0,0 @@
-module.exports = {
-  test: /\.vue(\.erb)?$/,
-  use: [{
-    loader: 'vue-loader'
-  }]
-}
--- a/config/webpack/production.js
+++ b/config/webpack/production.js
@ -1,6 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'production'
-
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()
-module.exports.output.filename = 'js/[name]-[hash].js';
--- a/config/webpack/test.js
+++ b/config/webpack/test.js
@ -1,5 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
-
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()
--- a/config/webpack/webpack.config.js
+++ b/config/webpack/webpack.config.js
@ -0,0 +1,77 @@
+const path = require('path');
+const webpack = require('webpack');
+const { VueLoaderPlugin } = require('vue-loader');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production';
+
+module.exports = {
+  mode,
+  optimization: {
+    moduleIds: 'deterministic'
+  },
+  entry: {
+    application_pack: './app/javascript/packs/application.js',
+    emoji_button: './app/javascript/packs/emoji_button.js',
+    fonts: './app/javascript/packs/fonts.js',
+    fontawesome: './app/javascript/packs/fontawesome.scss',
+    prism: './app/javascript/packs/prism.js',
+    tiny_mce: './app/javascript/packs/tiny_mce.js',
+    tiny_mce_styles: './app/javascript/packs/tiny_mce_styles.scss',
+    tui_image_editor: './app/javascript/packs/tui_image_editor.js',
+    tui_image_editor_styles: './app/javascript/packs/tui_image_editor_styles.scss',
+    croppie: './app/javascript/packs/custom/croppie.js',
+    croppie_styles: './app/javascript/packs/custom/croppie_styles.scss',
+    inputmask: './app/javascript/packs/custom/inputmask.js',
+    pdfjs: './app/javascript/packs/pdfjs/pdf_js.js',
+    pdf_js_styles: './app/javascript/packs/pdfjs/pdf_js_styles.scss',
+    pdf_js: './app/javascript/packs/pdfjs/pdf_js.js',
+    pdf_js_worker: './app/javascript/packs/pdfjs/pdf_js_worker.js',
+    vue_bmt_filter: './app/javascript/packs/vue/bmt_filter.js',
+    vue_label_template: './app/javascript/packs/vue/label_template.js',
+    vue_protocol: './app/javascript/packs/vue/protocol.js',
+    vue_repository_filter: './app/javascript/packs/vue/repository_filter.js',
+    vue_repository_print_modal: './app/javascript/packs/vue/repository_print_modal.js',
+    vue_navigation_top_menu: './app/javascript/packs/vue/navigation/top_menu.js'
+  },
+  output: {
+    filename: '[name].js',
+    sourceMapFilename: '[file].map',
+    path: path.resolve(__dirname, '..', '..', 'app/assets/builds')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: 'vue-loader'
+      },
+      {
+        test: /\.(js)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader']
+      },
+      {
+        test: /\.(?:sa|sc|c)ss$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/i,
+        use: 'file-loader'
+      }
+    ]
+  },
+  resolve: {
+    // Add additional file types
+    extensions: ['.js', '.jsx', '.scss', '.css', '.vue']
+  },
+  plugins: [
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    }),
+    new VueLoaderPlugin(),
+    new RemoveEmptyScriptsPlugin(),
+    new MiniCssExtractPlugin(),
+    new NodePolyfillPlugin()
+  ]
+};
--- a/config/webpacker.yml
+++ b/config/webpacker.yml
@ -1,97 +0,0 @@
-# Note: You must restart bin/webpack-dev-server for changes to take effect
-
-default: &default
-  source_path: app/javascript
-  source_entry_path: packs
-  public_root_path: public
-  public_output_path: packs
-  cache_path: tmp/cache/webpacker
-  check_yarn_integrity: true
-  webpack_compile_output: true
-
-  # Additional paths webpack should lookup modules
-  # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: ['app/assets']
-
-  # Reload manifest.json on all requests so we reload latest compiled packs
-  cache_manifest: false
-
-  # Extract and emit a css file
-  extract_css: true
-
-  static_assets_extensions:
-    - .jpg
-    - .jpeg
-    - .png
-    - .gif
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .woff
-    - .woff2
-
-  extensions:
-    - .vue
-    - .jsx
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
-
-development:
-  <<: *default
-  compile: true
-
-  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
-  check_yarn_integrity: true
-
-  # Reference: https://webpack.js.org/configuration/dev-server/
-  dev_server:
-    https: false
-    host: 0.0.0.0
-    port: 8080
-    public: 0.0.0.0:8080
-    hmr: false
-    # Inline should be set to true if using HMR
-    inline: true
-    overlay: true
-    compress: true
-    disable_host_check: true
-    use_local_ip: false
-    quiet: false
-    headers:
-      'Access-Control-Allow-Origin': '*'
-    watch_options:
-      ignored: '**/node_modules/**'
-
-
-test:
-  <<: *default
-  compile: true
-
-  # Compile test packs to a separate directory
-  public_output_path: packs-test
-
-production:
-  <<: *default
-
-  # Production depends on precompilation of packs prior to booting for performance.
-  compile: false
-
-  # Extract and emit a css file
-  extract_css: true
-
-  # Cache manifest.json for performance
-  cache_manifest: true
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -25,37 +25,18 @@ services:
      - "3000:3000"
    command: >
      bash -c "rm -f /usr/src/app/tmp/pids/server.pid &&
+               yarn install &&
               (bundle check || bundle install) &&
-               bundle exec rails s -b 0.0.0.0"
+               ./bin/dev"
    environment:
      - RAILS_ENV=development
-      - WEBPACKER_DEV_SERVER_HOST=webpack
+      - NODE_ENV=development
    volumes:
      - .:/usr/src/app
      - scinote_development_bundler:/usr/local/bundle/
      - scinote_development_files:/usr/src/app/public/system
      - scinote_development_storage:/usr/src/app/storage

-  webpack:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    image: scinote_web_development
-    container_name: scinote_webpack_development
-    stdin_open: true
-    tty: true
-    ports:
-      - "8080:8080"
-    command: >
-      bash -c "./bin/webpack-dev-server"
-    environment:
-      - RAILS_ENV=development
-      - WORKER=true
-    volumes:
-      - .:/usr/src/app
-      - scinote_development_bundler:/usr/local/bundle/
-      - scinote_development_files:/usr/src/app/public/system
-
 volumes:
  scinote_development_postgres:
  scinote_development_bundler:
--- a/package.json
+++ b/package.json
@ -18,7 +18,8 @@
  ],
  "scripts": {
    "flow": "flow",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "build": "webpack --config ./config/webpack/webpack.config.js"
  },
  "postinstall": "./engines_yarn_install.js",
  "devDependencies": {
@ -37,35 +38,40 @@
    "flow-bin": "^0.56.0",
    "flow-typed": "^2.5.1",
    "prettier": "^1.13.7",
-    "prettier-eslint": "^8.8.2",
-    "webpack-dev-server": "^4.13.1"
+    "prettier-eslint": "^8.8.2"
  },
  "dependencies": {
+    "@babel/core": "^7.21.3",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
    "@fortawesome/fontawesome-free": "^5.2.0",
    "@joeattardi/emoji-button": "^4.6.2",
-    "@rails/webpacker": "^5.4.4",
    "autoprefixer": "^7.2.6",
    "axios": "0.21.2",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-macros": "^3.1.0",
    "bootstrap-sass": "^3.3.7",
    "bwip-js": "^3.0.1",
    "coffee-loader": "^0.8.0",
    "coffeescript": "^1.12.6",
    "compression-webpack-plugin": "^1.1.11",
    "croppie": "^2.6.4",
-    "css-loader": "2.1.1",
+    "css-loader": "^6.7.3",
    "decimal.js": "^10.3.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "fabric": "1.6.7",
-    "file-loader": "^4.0.0",
+    "file-loader": "^6.2.0",
    "glob": "^7.1.2",
    "immutability-helper": "^2.7.1",
    "inputmask": "^5.0.0",
    "intl": "^1.2.5",
    "js-yaml": "^3.12.0",
    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.7.5",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.35",
    "node-gyp": "^3.8.0",
+    "node-polyfill-webpack-plugin": "^2.0.1",
    "path-complete-extname": "^0.1.0",
    "pdfjs-dist": "^2.5.207",
    "postcss-loader": "^2.1.6",
@ -76,7 +82,8 @@
    "raw-loader": "^4.0.2",
    "resolve-url-loader": "^2.3.0",
    "safe-umd-webpack-plugin": "^4.0.0",
-    "sass-loader": "^10.4.1",
+    "sass": "^1.60.0",
+    "sass-loader": "^13.2.2",
    "shortid": "^2.2.12",
    "style-loader": "^0.18.2",
    "styled-components": "^2.4.1",
@ -91,9 +98,10 @@
    "vue-template-compiler": "^2.6.12",
    "vue-turbolinks": "^2.2.1",
    "vuedraggable": "^2.24.3",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^4.3.0",
+    "webpack": "^5.76.3",
+    "webpack-cli": "^5.0.1",
    "webpack-manifest-plugin": "^1.3.2",
-    "webpack-merge": "^4.1.3"
+    "webpack-merge": "^4.1.3",
+    "webpack-remove-empty-scripts": "^1.0.1"
  }
 }
--- a/yarn.lock
+++ b/yarn.lock
				`@ -0,0 +1 @@`
				`// Entry point for the build script in your package.json`