babel-ui5-module-formatter

0.0.1 verified Fri May 01 auth: no javascript

A Babel plugin that transpiles ES6 module syntax into sap.ui.define calls (AMD-like syntax) for UI5 applications (OpenUI5/SAPUI5). Version 0.0.1 is the initial release; the project is in early development with low release cadence. It enables developers to write ES6 modules and compile them to the format expected by UI5's module loader. Key differentiators: it is a dedicated Babel formatter for UI5, but has several limitations: no support for named imports (use wildcard imports instead), relative imports only within the same or subdirectories, and cannot mix default and named exports. Alternatives include using a UI5-aware bundler or manually transpiling.

Common errors

error Error: Cannot find module 'babel-ui5-module-formatter' ↓

cause Missing npm install or incorrect Babel configuration for the module formatter.

fix

Run 'npm install --save-dev babel-ui5-module-formatter' and ensure .babelrc has '"modules": "babel-ui5-module-formatter"'.

error Error: Module 'babel-ui5-module-formatter' is not available ↓

cause Outdated Babel version or wrong usage (e.g., using as a plugin instead of module formatter).

fix

Use the 'modules' option in .babelrc, not 'plugins'. Ensure Babel version 6.x is used.

Warnings

breaking Relative imports to parent directories (e.g., '../foo') will fail at runtime. ↓

fix Use absolute imports like 'mycompany/myapp/foo' or ensure the Babel plugin resolves paths at transpile time.

breaking Named imports (e.g., import { foo } from './mod') are not supported; use wildcard import (import * as mod from './mod'). ↓

fix Replace named imports with 'import * as module from ...' and access exports via module.foo.

breaking Mixing default and named exports in the same module will produce unexpected behavior in transpiled code. ↓

fix Use either a default export or named exports, not both.

breaking The formatter only supports per-file default or named exports, but not both simultaneously. ↓

fix Restructure module to have either a single default export or multiple named exports (no mixing).

Install

npm install babel-openui5-module-formatter

yarn add babel-openui5-module-formatter

pnpm add babel-openui5-module-formatter

Imports

default export

wrong

const myModule = require('babel-ui5-module-formatter')

correct

import myModule from 'babel-ui5-module-formatter'

ESM-only package; requires Babel configured to use this plugin.

Quickstart

How to configure Babel with this plugin and a minimal ES6 module transpilation example.

// .babelrc configuration
{
  "modules": "babel-ui5-module-formatter",
  "moduleIds": true
}

// Install
npm install --save-dev babel-ui5-module-formatter

// Example ES6 input (mymodule.js)
export default class MyClass {
  constructor() {
    this.name = 'UI5';
  }
}

// After transpilation, the output will be wrapped in sap.ui.define:
// sap.ui.define(['module'], function(module) {
//   'use strict';
//   var MyClass = function MyClass() {
//     this.name = 'UI5';
//   };
//   return MyClass;
// });