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
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.