jQuery code completion with npm, @type, $ and IJ 2021.1

I am wondering what the recommended way is to use jQuery, so that IntelliJ shows proper code completion.

I have created a new node project using the IntelliJ (2021.1) wizard , added a dependency to jquery 3.5.1 and run npm install.

Then I added the following code to index.js.

import $ from 'jquery'; // Recommended way to import it when using Babel, according to the readme.md of the dependency

$.fn.pluginFunc = function() {} // jquery-plugin that adds some functions

/** @type {$} */
let $div = $('<div>'); // Explicitly defining the type of $div

$div.addClass(); // <- Unresolved function or method addClass() 
$div.pluginFunc(); // <- Resolves correctly

The problem I face is that the jQuery functions are not recognized (e.g. addClass). If I remove the @type {$} it works, but I would like to define the type. If I change it to @type {jQuery} it works, too, but my custom functions are not recognized anymore. To make them work I would have to use jQuery.fn instead of $.fn and also had to change the import to import jQuery from 'jquery'.

// Using jQuery instead of $ would work
import jQuery from 'jquery';
jQuery.fn.pluginFunc = function() {}

/** @type {jQuery} */
let $div = $('<div>');

$div.addClass()
$div.pluginFunc()

I prefer working with $ instead of jQuery. Since it is just a synonym I expected it to behave the same. But IntelliJ obviously treats it differently.

What is your recommendation? Adding it as a global JavaScript library does not change anything, but since it is included as node dependency I don't think this should be the way anyway.

Btw: With release 2020.1 I got it working by adding the following snippet. This does not work anymore with 2021.1. My intention was to tell IntelliJ: Look, $ and jQuery are the same. Any idea, why this does not work anymore?

/** @typedef {jQuery} $ */