I'm trying to import a type or variable from a module using JSDoc. The program works, but VSCode gives the following errors, and I want to fix them:
- Cannot find name 'TomSelect'. Did you mean 'onselect'?
- Cannot find name 'FloatingUIDOM'.
Below is the code demonstrating how I'm using TomSelect and FloatingUIDOM in a JavaScript project. How can I properly document these imports in JSDoc to prevent these errors?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<link
rel="stylesheet"
href="/[email protected]/dist/css/tom-select.min.css"
/>
<script src="/[email protected]/dist/js/tom-selectplete.js"></script>
<script src="/@floating-ui/[email protected]"></script>
<script src="/@floating-ui/[email protected]"></script>
<script type="module" src="script.js"></script>
</head>
<body>
<div id="nav-bar">
<div id="user-dropdown" class="hidden"></div>
</div>
<select id="select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</body>
</html>
let navBar = document.getElementById('nav-bar');
let userDropdown = document.getElementById('user-dropdown');
let select = new TomSelect('#select', {
plugins: ['dropdown_input'],
maxOptions: null,
maxItems: 1
});
FloatingUIDOM.autoUpdate(navBar, userDropdown, () => {
FloatingUIDOMputePosition(navBar, userDropdown, {
placement: 'bottom-end',
middleware: [
FloatingUIDOM.offset({
mainAxis: remToPx(0.25),
crossAxis: remToPx(-0.5)
})
]
}).then(({ x, y }) => {
Object.assign(userDropdown.style, { top: `${y}px`, left: `${x}px` });
});
});
I tried the following
/**
* @typedef {import('/[email protected]/dist/js/tom-selectplete.js').TomSelect} TomSelect
*/
/**
* @external TomSelect
* @see {@link /[email protected]/dist/js/tom-selectplete.js}
*/
/**
* @external TomSelect
* @see {@link /[email protected]/dist/js/tom-selectplete.js|TomSelect}
*/