Currently, I am delving into TypeScript utilizing a project built on ASP.NET Core 3.0 and the VS 2019 IDE. Recently, I acquired the OverlayScrollbars plugin via npm: .
npm install overlayscrollbars
npm install @types/overlayscrollbar
Provided below is a straightforward usage example:
/// <reference path="../../libs/npm/@types/overlayscrollbars/index.d.ts" />
import OverlayScrollbars from "../../libs/npm/@types/overlayscrollbars/index"; // ../../libs/npm/overlayscrollbars/js/overlayscrollbars.js
$(() => {
OverlayScrollbars($("body")[0], { });
//$("body").overlayScrollbars({ });
});
The solution compiles successfully, the files are transpiled (the target is switched as per the comment - this will be an area of future inquiry for me) and then copied to the wwwroot. At this stage, the files are referenced correctly.
Here is my tsconfig.json configuration file:
{
"compileOnSave": true,
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"noEmitOnError": true,
"noImplicitAny": true,
"skipLibCheck": true,
"sourceMap": true,
"target": "es6",
"typeRoots": [ "node_modules/@types/**" ]
},
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
Despite this success, upon executing
OverlayScrollbars($("body")[0], { });Uncaught SyntaxError: The requested module does not provide an export named 'default'https://i.stack.imgur.com/4jj6U.png
Alternatively, using the second method (
$("body").overlayScrollbars({ });TS2345: (TS) Argument of type '{}' is not assignable to parameter of type stringhttps://i.stack.imgur.com/zFjW5.png
https://i.stack.imgur.com/iCuPe.png
Addressing this problem in C# would be more straightforward, but due to my limited knowledge of TS, solving it seems challenging without resorting to trial and error.
Attached is a basic project that demonstrates this issue:
Any assistance or guidance provided would be greatly appreciated.
// EDIT 1
@Kewin Dousse
I want to clarify that I specifically reference the declarations because I import the actual files in my .cshtml file.
<link href="~/libs/npm/overlayscrollbars/css/OverlayScrollbars.css" rel="stylesheet" />
...
<script src="~/libs/npm/overlayscrollbars/js/jquery.overlayScrollbars.js"></script>
This approach was chosen to preemptively address the aforementioned issues, whether opting for the JQuery or Vanilla version of OVerlayScrollbars.
My understanding is that when using imports, the browser must directly point to the JavaScript file with the explicit .js extension for functionality.
To resolve this, I have set up gulp to substitute the path to the d.ts file with the one in the comment.
If I include this line:
import OverlayScrollbars from "../../libs/npm/@types/overlayscrollbars/index"; // ../../libs/npm/overlayScrollbars/js/jquery.overlayScrollbars.js
An editor warning pops up in my .ts file:
https://i.stack.imgur.com/pU2wS.png
And there's a runtime error:
https://i.stack.imgur.com/Mvucg.png
When employing this code:
import { OverlayScrollbars } from "../../libs/npm/@types/overlayscrollbars/index"; // ../../libs/npm/overlayScrollbars/js/jquery.overlayScrollbars.js
I encounter compilation error TS2305 displaying an unusual path:
https://i.stack.imgur.com/mwE3R.png
Using this line:
import * as OverlayScrollbars from "../../libs/npm/@types/overlayscrollbars/index"; // ../../libs/npm/overlayScrollbars/js/jquery.overlayScrollbars.js
Errors out with TS2349:
https://i.stack.imgur.com/AInLQ.png
Accompanied by an intellisense error:
https://i.stack.imgur.com/56eza.png
(For potential VS fix, consider changing the path to
import OverlayScrollbars from "../../libs/npm/@types/overlayscrollbars/index";The only method that currently works for me is hand-crafting the declaration for the JQuery extension like so:
interface JQuery {
overlayScrollbars(
options: OverlayScrollbars.Options,
extensions?: OverlayScrollbars.Extensions
): JQuery;
overlayScrollbars(
filter?: string | ((element: Element, instance: OverlayScrollbars) => boolean)
): OverlayScrollbars | OverlayScrollbars[] | undefined;
}
Utilizing it as follows:
$("body").overlayScrollbars({ });
While removing the module import altogether.
I acknowledge that this custom declaration aligns with what the declarations file is intended to accomplish, yet, inspecting its content, the setup fails to function properly.