[SOLVED] How to import ES Module into UI5 controller

How to import ES Module into UI5 controller

Given an ES Module dictionaryAPI.mjs:

export const DICTIONARY_API = Object.freeze({
    someKey: "someValue"
});

I want to import it to my UI5 controller. As far, as I understand, UI5 doesn't support .mjs extensions, therefore I've changed an extension from .mjs to .js. Then, I try to add it into the UI5 controller, precisely, to the utility controller ControllerUtilities.js:

sap.ui.define([
    "com/myApp/dictionaryAPI"
    ],
    (dictionaryAPI) => ({…}));

When I run the app, I get an error:

'com/myApp/controller/ControllerUtilities.js': Unexpected token 'export'

sap-ui-core.js:53 Uncaught (in promise) ModuleError: Failed to resolve dependencies of 'com/myApp/controller/Login.controller.js'
 -> 'com/myApp/controller/BaseController.js'
  -> 'com/myApp/controller/ControllerUtilities.js': Unexpected token 'export'
    at p1 (https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js:53:213)
    at j1.failWith (https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js:40:43)
    at https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js:65:1556
Caused by: SyntaxError: Unexpected token 'export'

It looks like, UI5 doesn't recognize the export statemen from the ES Module.

Is there any option to import ES Module into UI5 controller?

Used version: OpenUI5 1.96.0

Solution

UI5 uses by default UMD import syntax (sap.ui.define, sap.ui.require). To make it understand other module types you have to 'trick' it into thinking that the module is UMD.

This can be accomplished by using the ui5 cli.

You have to build a proper folder structure (package.json, ui5.yaml, webapp folder) and in the ui5.yaml file you can define project shims for the corresponding ES modules.

A cheap and hacky alternative would be to include the ES modules trough <script src="path/to/module" type="module"> tags but I don't know anyone who would reccomend this because this doesn't allow bundling.

EDIT: check the ui5-tooling-modules middleware / task which automates this process.