[Epic] Vue3: require.context provides duplicate entries

[richard-cox]

Setup

• Rancher version: dev of 2.10.0

Describe the bug

• calls to require.context used to only provide references to files that matched it's regex relative to the provided folder
• now they provide the same plus matches relative to the root of the project
• Impact
  • Vue3: Spurious warnings on load of dashboard (global formatters + formatters) #11786
  • Case 2 - chart's with additional steps
    • No Impact - extra paths are filtered out in shell/store/catalog.js chartSteps
    • Bonus - Vue3: Additional install/upgrade chart steps fail to load #11898
  • Case 3 product dynamic importer
    • No impact. addressed in vue3 merge
      • shell/utils/dynamic-importer.js listProducts additional filter path.startsWith('./')
      • 0b2f8c6#diff-d425bcbe2269e54c35340d01c97455a7ecdd1fa67caa6dfd2c5f9864f5a432d4R88
  • Case 4 Workload Pod Storage components #11787
  • Case 5 Workload Pod Storage CSI
    • Previously blocked on case 4.
    • Now validated as working Confirmed as working
      • Though legacy issue found Unable to select Deployment Pod Storage driver #11899
  • Case 6 Workload Pod Storage Ephemeral Volume components
    • Previously blocked on case 4.
    • Not shown by design

To Reproduce

Case 2

• Requires adding a custom step to an existing chart's form components (WIP)

Case 3

• N/A

Case 5 & 6

• Cluster Explorer --> Workloads --> Deployments --> Create --> Pod tab --> Storage vertical tab --> Select CSI
• Cluster Explorer --> Workloads --> Deployments --> Create --> Pod tab --> Storage vertical tab --> Select Ephemeral Volume

Screenshots

Additional context

• recommend short term fix of custom require.context that filters out resources not starting with ./
• Does not happen with below, given second below

  • const _NAME = require.context('BASE/DIR', true, /\.(vue|js|yaml)$/).keys(); 
    

  • Translates to

    const _l10n = require.context('@pkg/aks/l10n', true, /\.(vue|js|yaml)$/).keys();  
    

[rak-phillip]

I started work on splitting this out into separate issues before getting distracted by #11787. wrt require.contex() it looks like the move from Webpack4 to Webpack5 has changed the behavior a little bit, most notably (in the context of #11787), paths now include a relative path (e.g. shell/edit/workload/storage/Mount.vue); this was breaking the filter for excluded files.

We might find other inconsistencies between Webpack4/5 as we investigate other areas that utilize require.context()

[richard-cox]

@rak-phillip i've updated the issue (spun out anything not related and validated others). only top item in check list pending on this epic

[rak-phillip]

Thanks! Moving this epic out of triage

[rak-phillip]

We are closing this epic and allowing #11786 to be handled on its own.