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([
    "/myApp/dictionaryAPI"
    ],
    (dictionaryAPI) => ({…}));

When I run the app, I get an error:

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

sap-ui-core.js:53 Uncaught (in promise) ModuleError: Failed to resolve dependencies of '/myApp/controller/Login.controller.js'
 -> '/myApp/controller/BaseController.js'
  -> '/myApp/controller/ControllerUtilities.js': Unexpected token 'export'
    at p1 (.js:53:213)
    at j1.failWith (.js:40:43)
    at .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

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([
    "/myApp/dictionaryAPI"
    ],
    (dictionaryAPI) => ({…}));

When I run the app, I get an error:

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

sap-ui-core.js:53 Uncaught (in promise) ModuleError: Failed to resolve dependencies of '/myApp/controller/Login.controller.js'
 -> '/myApp/controller/BaseController.js'
  -> '/myApp/controller/ControllerUtilities.js': Unexpected token 'export'
    at p1 (https://openui5nightly.hana.ondemand./resources/sap-ui-core.js:53:213)
    at j1.failWith (https://openui5nightly.hana.ondemand./resources/sap-ui-core.js:40:43)
    at https://openui5nightly.hana.ondemand./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

• javascript
• sapui5
• ui5-tooling

• 1 Not just like that, but you can look into using the official UI5 typescript support, which does allow for import and export statements github./SAP/ui5-typescript – Jorg Commented Oct 14, 2021 at 21:52

3 Answers 3

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 acplished 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 recend this because this doesn't allow bundling.

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

The best solution is to create a new module as fmi21 mentioned.

Your API could look like this which is returning just an object with the DICTIONARY_API. So you are also able to add more properties to the API.

sap.ui.define([], function () {
"use strict";

    return {
        DICTIONARY_API : Object.freeze({
            someKey: "someValue"
        })
    }
});

Then you can import it like you already do in your ControllerUtilities.js

You also have the possibility to load your JSON file directly into the model via the manifest.json

{
  "sap.ui5": {
    "models": {
      "YOURMODELNAME": {
        "type": "sap.ui.model.json.JSONModel",
        "uri": "PATH TO JSON"
      }
    }
  }
}

In case it is a model, which needs to be accessible system-wide, the easiest way would be to declare it in manifest.json under sap.ui5/models:

"dictionaryAPI": {
    "type": "sap.ui.model.json.JSONModel",
    "uri": "model/dictionaries/api.json"
},

Alternatively, it's possible to load a model from the controller of the root view (rootView in manifest.json), which makes the model available for every view during the entire app run:

async loadDictionaryData(dataSource, modelName) {

    const dictionaryModel = new JSONModel();

    await dictionaryModel.loadData(dataSource);

    this.getView().setModel(dictionaryModel, modelName);

}

No need to care about data sync/async loading, reuse, ESM/UMD, etc.