Can I use ECMAScript2015 type=module in SmartClient?

[mc_hatzlhoffer]

Hello, SmartClient Team.

I am a new developer using SmartClient, so I don't know if that is a simple question but I couldn't find any answer in the documentation.

I created an application using Javascript UI components using script tags following the documentation, but now I want to check if it is possible to use ES6 modules to package my application and use in other projects.

I tried to import SmarClient modules using:

```
import "../../isomorphic/system/modules/ISC_Core.js";

```

but I receive this error:

```
Uncaught SyntaxError: Strict mode code may not include a with statement (at ISC_Core.js:259:12) ```

If I try to use type=module in the script tag I receive the same error. Is there a way of using SmartClient components without importing the core script as a global variable in the HTML file?

[Isomorphic]

If you try out our React Support, and add a SmartClient framework dependency to your React app, you'll see that we provide a "compatibility wrapper" that can be imported from your React app to load our framework, though it's not loaded as an ES6 module, but directly into the isc object/namespace just as in our SDK download.

Here's the initial/relevant part of that wrapper:

if (!(window && window.isc && window.isc.module_Core) &&
    (!window || !window.Window || !(window instanceof window.Window) ||
     !window.Navigator || !(window.navigator instanceof window.Navigator) ||
     !window.Document || !(window.document instanceof window.Document)))
{
    throw new Error('Module smartclient-eval can only run in an environment such as React, where a real window with navigator and document objects are present.');
}

if (!window.isc) window.isc = {};

if (!window.isc.module_Core) require('../../../isomorphic/system/modules/ISC_Core.js');
if (!window.isc.module_Foundation) require('../../../isomorphic/system/modules/ISC_Foundation.js');
if (!window.isc.module_Containers) require('../../../isomorphic/system/modules/ISC_Containers.js');
if (!window.isc.module_Grids) require('../../../isomorphic/system/modules/ISC_Grids.js');
if (!window.isc.module_Forms) require('../../../isomorphic/system/modules/ISC_Forms.js');
if (!window.isc.module_RichTextEditor) require('../../../isomorphic/system/modules/ISC_RichTextEditor.js');
if (!window.isc.module_DataBinding) require('../../../isomorphic/system/modules/ISC_DataBinding.js');
if (!window.isc.module_RealtimeMessaging) require('../../../isomorphic/system/modules/ISC_RealtimeMessaging.js');
if (!window.isc.module_Calendar) require('../../../isomorphic/system/modules/ISC_Calendar.js');
if (!window.isc.module_PluginBridges) require('../../../isomorphic/system/modules/ISC_PluginBridges.js');
if (!window.isc.module_Drawing) require('../../../isomorphic/system/modules/ISC_Drawing.js');
if (!window.isc.module_Charts) require('../../../isomorphic/system/modules/ISC_Charts.js');
if (!window.isc.module_Analytics) require('../../../isomorphic/system/modules/ISC_Analytics.js');
if (!window.isc.module_Tools) require('../../../isomorphic/system/modules/ISC_Tools.js');

.
You can try adding SmartClient to an existing or "hello world" React app (created by "npx create-react-app hello-world") to see this "compatibility wrapper" in action and in context.

[mc_hatzlhoffer]

I am not using React. I am running with Vite and Vanilla Javascript and this solutions doesn't work because I am not using a node environment so "require" does not work. I also tried async import, but because the code uses "with" operator I get a compatibility error because of ECMAScript2015 default strict mode

[Isomorphic]

You don't need React to take the approach shown, but you do need nodeJS/npm. We just mentioned React because we thought you may be able to leverage that code from our existing support (shown).

Using VIte and running in browsers (not nodeJS), the simplest solution may be to package your own app as ES6 modules, while loading SmartClient separately, either via dynamic imports, or via Vite plugins such as vite-plugin-html or vite-plugin-load-script. Then you don't have to use explicit script tags in your HTML to load our framework.

To pull in our framework as if it were an ES6 module (unlike the above suggestions), you'd probably have to transpile it using NodeJS+webpack. If you're interested in how that works, it's used by our React support. When the React app is built, a transpiled version of the framework, isomorphic.js, is generated. A prebuilt copy is included in the SmartClient SDK available for download.