Troubleshooting

jQuery Libraries

Sometimes a jQuery library doesn't work when imported using Webpack. A typical error looks like:

Uncaught TypeError: $el.sampleLibrary() is not a function

This happens because jQuery library is not designed to work with Webpack, and expects the jQuery or $ variable to be available globally.

The workaround is to install imports-loader:

yarn add imports-loader --dev

Then use it to patch the library at compile time. For example, change:

import 'jquery-sample-library';

To:

import 'imports-loader?imports=default|jquery|jQuery!jquery-sample-library';

Multiple versions of XXX found

Sometimes you may get the following error message when compiling with webpack:

   Multiple versions of @babel/runtime-corejs3 found:
    7.12.5 ./~/@babel/runtime-corejs3 from ./vendor/alberon/nexus/assets/vue/Pagination.vue?vue&type=script&lang=js&
    7.14.0 ./vendor/alberon/nexus-menus/~/@babel/runtime-corejs3 from ./vendor/alberon/nexus-menus/vendor/alberon/nexus-media-library/assets/vue/MediaLibrary/PageCreate.vue?vue&type=script&lang=js&

This is because running Jest inside a package installs a local copy of the dependencies, but that confuses Webpack because it picks up both versions.

The solution is to run the cleanup script inside the package to remove the extra copy:

cd vendor/alberon/nexus-menus/
scripts/cleanup.sh

This deletes the local node_modules/ directory. (Or you can just delete it manually.)

Note: It will be installed again next time you run Jest. I haven't thought of a solution to that yet... --Dave