What is the proper way of importing modules in typescript (ECMAScript 2015)?

[UndeadKernel]

When using ECMAScript 2015, import statements are lexically bound. That is, everything inside a module must be either declared or imported by a module. There is no such thing as globals outside of the module.

The modules of jsPanel assume that the jsPanel object exists in the global scope. Due to this, the following lines of code result in an error:

import jsPanel from "dist/jspanel.js"
import "dist/extensions/modal/jspanel.modal.js"

The last import triggers an error because jsPanel is not defined.

What is the appropriate way of using modules in this context? For reference, I'm building a web application with vue3 and typescript.

[Flyer53]

In your code example above you use the files from the dist folder. They don't export anything and thus don't work as modules. In order to use jsPanel as js module you have to use the files from the es6module folder. And don't forget to use type="module" in the script tag.

<script type="module">
    import { jsPanel } from './es6module/jspanel.js';
    import './es6module/extensions/modal/jspanel.modal.js';
    .
    .
    .

Please try that first and let me know whether it works.

PS: I don't use vue and/or typescript at all. So I won't be able to help you with any questions about vue or typescript.

[Flyer53]

Did you try anything concerning this issue? It's been more than a month now ...

[UndeadKernel]

Sorry for the delay @Flyer53. I'm still trying to make JsPanel work with the modules syntax. I'll report back when I find what is causing me problems. I suspect it's something related to Vue or Typescript.

By the way, I've been using a typescript data type for JsPanel. Would you be interested in a type declaration for JsPanel so that it can be used with Typescript?

[Flyer53]

@UndeadKernel No problem at all, sorry that I can't help you with Vue or Typescript issues.

Although I won't start using Typescript I could add your type declaration to the repo in case it's usable for everybody else. I would name you as originator of the type declaration for any further questions on this topic.

[UndeadKernel]

I was able to get everything running with the explanation you gave me. Thanks. Most of the issues were related to the creation of a Typescript module for JPanel. I have done that and I intend to create a pull request with the type definition. Where should I put it in your repo?

[Flyer53]

Thanks a lot for your work. Well, if your Typescript definition is usable for both the module version and the regular version, then I would put the definition file in the root directory. If you can use it only for the module version put it in the es6module folder.

Info: I'm out of town for the next two or three weeks. So it will take some time before I can look at it...