menu-aim | : dart : Instant mega menus in vanilla JavaScript | Menu library

It turns out this whole issue was the result of a mistake made months ago during a config migration.

The base webpack config did NOT include an entry for babel-polyfill like I thought it did, resulting in none of the polyfills being applied.

I just had to add babel-polyfill to my entry["vendor"] object and the original error which caused me to install this plugin in the first place (ReferenceError: regeneratorRuntime is not defined) went away.

I still don't understand why this transform-runtime plugin caused this very bizarre issue, but I don't want to go deeper into that rabbit hole.

From the GitHub code, it looks like jQuery-menu-aim is not using a universal module definition, so it needs some help from your RequireJS config.

A shim can help RequireJS sequence the dependencies since this is a jQuery plugin and jQuery must be loaded first and passed into it. Click here for more information on RequireJS shims.

Add this code to your RequireJS config file

So there are few themes in your webpack.config.js, some of which conflict. Just going to list them so I can better understand what I think you are trying to achieve.

Theme 1

You have an entry called vendor that is clearly referencing a minified jQuery library you have presumably downloaded and placed in the directory specified.

Theme 2

You also have an expose-loader that is essential exposing the jquery library from its node_modules probably listed in the dependencies of your package.json.

This makes the jquery in the node_modules available as $ and jQuery in the global scope of the page where your bundle is included.

Theme 3

You also have included the ProvidePlugin with configuration for jQuery.

The ProvidePlugin is supposed to inject dependencies into the scope of your module code, meaning you do not need to have import $ from 'jquery' instead $ and jQuery will already be available in all of your modules.

Conclusion

From what I have gathered I think you're trying to bundle jQuery from the static file at ./src/main/webapp/js/vendor/jquery-3.3.1.min.js in a vendor bundle.

You are then trying to expose the libraries in the vendor bundle to the global scope (jQuery).

Then also have your application code able to import jQuery from what is made available by the vendor bundle in the global scope.

Answer

So if that is what you are doing you need to do the following things.

Firstly, check in your package.json files dependencies for jquery. If its there you want to remove it, there's no need for it if you're going to use your jquery-3.3.1.min.js file instead to provide jQuery to your application.

Secondly, change your test of the expose-loader to trigger when it sees your jquery-3.3.1.min.js file in your entries, not resolve it from the jquery dependency from your node_modules.

This regex pattern should do the trick.

I think what you want needs enter and exit instead of activate and deactivate.

Have you read the documentation?

Here is your Fiddle Updated.