[Bug]: rules_js does not work as expected with Vite and PrimeVue

[swarren12]

What happened?

Sorry for the somewhat vague title, but I'm not exactly sure what's actually wrong.

I'm trying to add PrimeVue to a project using Bazel + Vue, but it isn't working in the way that I expect. Possibly my understanding / expectations are wrong here, but I'm not very experienced with front-end / JavaScript build systems so 🤷.

Expected behaviour: using PrimeVue with Bazel + rules_js works
Actual behaviour: PrimeVue itself seems to work, but the built-in styling does not
Steps to reproduce: see https://github.com/swarren12/rules_js-primevue-reproduction

More details

As mentioned, I have a project using Bazel, rules_js and Vue and, as far as I can tell, it's working correctly; however, when I introduce PrimeVue it doesn't behave as expected.

For some reason, I get some of the PrimeVue behaviour, but not all of it - specifically, it seems that some aspect of the theming isn't playing nicely with the rules_js build process. Bypassing Bazel completely and running via raw npm makes things work as expected, which is why I believe that this is a problem with rules_js rather than Vite or PrimeVue.

Hopefully the reproduction is enough to determine whether this is an actual issue or just user-error 😅

Version

Development (host) and target OS/architectures:

Output of bazel --version: bazel 8.0.0

Version of the Aspect rules, or other relevant rules from your
WORKSPACE or MODULE.bazel file:

bazel_dep(name = "bazel_skylib", version = "1.7.1")
bazel_dep(name = "aspect_rules_js", version = "2.1.3")

Language(s) and/or frameworks involved:

• Vue
• PrimeVue

How to reproduce

https://github.com/swarren12/rules_js-primevue-reproduction

Any other information?

The example reproduction has both a "production" build target as well as a development one; from what I can tell, both are affected (i.e. run //example:example/dev-mode and build //example will both exhibit the same problem) but it's easier to reproduce using the development build.

[swarren12]

I've had a go at trying to triage this and I've come up with a theory as to what is going wrong, but I'm prepared to be mistaken...

I turned on the vite setting that generates a source map, and compared the two outputs; they're quite big, so I'm not going to include them here but I noticed that the Bazel-generated version seemed to have extra entries. In particular, it seemed that some of the primevue libraries seemed to be included twice, e.g.:

$ cat index-B-g6ruhd.js.map | jq | grep styled/index.mjs
    "../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/node_modules/.aspect_rules_js/@[email protected]/node_modules/@primeuix/styled/index.mjs",
    "../../../node_modules/.aspect_rules_js/@[email protected]/node_modules/@primeuix/styled/index.mjs",

My suspicion is that due to some aspect of the sandboxing / symlinking that Bazel does, some dependencies are effectively duplicated and this is what causes strange behaviour?

Seems it's not that many that are duplicated:

$ cat index-B-g6ruhd.js.map | jq '.sources[]' | grep -o 'node_modules/.*' | sort | uniq -c | sort -n
...
      2 node_modules/.aspect_rules_js/@[email protected]/node_modules/@primeuix/styled/index.mjs"
      2 node_modules/.aspect_rules_js/@[email protected]/node_modules/@primeuix/utils/dom/index.mjs"
      2 node_modules/.aspect_rules_js/@[email protected]/node_modules/@primeuix/utils/eventbus/index.mjs"
      2 node_modules/.aspect_rules_js/@[email protected]/node_modules/@primeuix/utils/object/index.mjs"
      2 node_modules/.aspect_rules_js/@[email protected]_vue_3.5.13/node_modules/@primevue/core/base/style/index.mjs"
      2 node_modules/.aspect_rules_js/@[email protected]_vue_3.5.13/node_modules/@primevue/core/service/index.mjs"
      2 node_modules/.aspect_rules_js/@[email protected]_vue_3.5.13/node_modules/@primevue/core/usestyle/index.mjs"

[swarren12]

Based on the above, I'm wondering if this is similar to (or even a duplicate of) #1204