Can´t access child theme´s scripts dependencies found in parent

Question

I´ve been struggling with this for nearly a month now and still couldn´t find anything at all on how to do this! Not here, not in Quora, not through many different advanced Google search queries...

Here it is:

The parent theme has only one script file main.min.js. It contains all the scripts and libraries being used by it, including jQuery, Select2, Parsley and Slick, to name a few.

How do I go about making my own scripts use one or more of these libraries as their dependencies in the child theme?

The immediatelly obvious approach is to declare the parent theme main.min.js as the dependency when enqueueing my own scripts in the child´s functions.php and make sure my scripts fire after the dependency has been loaded on the page.

I´ve done that, yet, it doesn´t work. My scripts cannot access their dependencies.

The only alternative I can think of is enqueueing all these libraries separately in the child theme, as if the parent didn´t have them. Which is clearly a horrible thing to do, as the parent theme will load these libraries in its main js file too!

So there must be a way to do this by using the already provided libraries in the parent.

Had the parent theme enqueued the libraries separately this would be easy. I guess the main issue here is that all scripts and libraries are included in one single js file.

Any help would be immensely appreciated!

Answer 1

If the parent theme bundles all vendor scripts in one file, you can't require/enqueue them separately. From WP's point of view, they are one single resource/dependency.

Look into any page's source-code or use a plugin (such as "debug this") to get the script's register name so you could specify it as dependency. In your case it could be {parentThemeSlug}-main. It's not the file name, but the register name which needs to be specified in the dependencies array (i.e. jquery.min.js is jquery). I usually look it up in parent theme by finding the register/enqueue function.

Answer 2

Just for the sake of providing an answer in case people get here and don´t go through the comments, this is the reason why I had this issue:

The parent theme developers use browserify to create the final bundle for the theme. And the way browserify works, such bundle is completely hidden from the global scope.

So even though it has all the libraries I need in it, I can´t access them outside their original environment.

One can argue that, in such case, this theme is not meant to be used as a parent theme. Which is a valid input but, as I want/need to keep going, that leaves me 3 options:

1- Create redundance and code bloat by having the same libraries in my child theme separately. (not really an option, is it?)

2- Add to the parent theme and make and extra effort to keep things tidy in order to be able to have the mods clean cut for next theme releases, like Andrei kindly suggested in the comments. (kindda risky though as, not only I´m not yet an expert theme developer, it´d also require extraordinary attention, which leaves room for a lot of possible issues. Who knows what could happen).

3- Copy, modify and recompile parent theme source files then overwrite the final bundle through the child theme by keeping the same file name/handle as the original since the child´s functions.php will load first.

The latter seems the most practical and cleanest option, so I´ll stick to it and see how it goes.

Thanks to Andrei once again for all his input throughtout this.