{"id":24954,"library":"babel-openui5-module-formatter","title":"babel-ui5-module-formatter","description":"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.","status":"active","version":"0.0.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","ui5","sapui5","openui5","babel","babeljs","es6"],"install":[{"cmd":"npm install babel-openui5-module-formatter","lang":"bash","label":"npm"},{"cmd":"yarn add babel-openui5-module-formatter","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-openui5-module-formatter","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-only package; requires Babel configured to use this plugin.","wrong":"const myModule = require('babel-ui5-module-formatter')","symbol":"default export","correct":"import myModule from 'babel-ui5-module-formatter'"}],"quickstart":{"code":"// .babelrc configuration\n{\n  \"modules\": \"babel-ui5-module-formatter\",\n  \"moduleIds\": true\n}\n\n// Install\nnpm install --save-dev babel-ui5-module-formatter\n\n// Example ES6 input (mymodule.js)\nexport default class MyClass {\n  constructor() {\n    this.name = 'UI5';\n  }\n}\n\n// After transpilation, the output will be wrapped in sap.ui.define:\n// sap.ui.define(['module'], function(module) {\n//   'use strict';\n//   var MyClass = function MyClass() {\n//     this.name = 'UI5';\n//   };\n//   return MyClass;\n// });","lang":"javascript","description":"How to configure Babel with this plugin and a minimal ES6 module transpilation example."},"warnings":[{"fix":"Use absolute imports like 'mycompany/myapp/foo' or ensure the Babel plugin resolves paths at transpile time.","message":"Relative imports to parent directories (e.g., '../foo') will fail at runtime.","severity":"breaking","affected_versions":"0.0.1"},{"fix":"Replace named imports with 'import * as module from ...' and access exports via module.foo.","message":"Named imports (e.g., import { foo } from './mod') are not supported; use wildcard import (import * as mod from './mod').","severity":"breaking","affected_versions":"0.0.1"},{"fix":"Use either a default export or named exports, not both.","message":"Mixing default and named exports in the same module will produce unexpected behavior in transpiled code.","severity":"breaking","affected_versions":"0.0.1"},{"fix":"Restructure module to have either a single default export or multiple named exports (no mixing).","message":"The formatter only supports per-file default or named exports, but not both simultaneously.","severity":"breaking","affected_versions":"0.0.1"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save-dev babel-ui5-module-formatter' and ensure .babelrc has '\"modules\": \"babel-ui5-module-formatter\"'.","cause":"Missing npm install or incorrect Babel configuration for the module formatter.","error":"Error: Cannot find module 'babel-ui5-module-formatter'"},{"fix":"Use the 'modules' option in .babelrc, not 'plugins'. Ensure Babel version 6.x is used.","cause":"Outdated Babel version or wrong usage (e.g., using as a plugin instead of module formatter).","error":"Error: Module 'babel-ui5-module-formatter' is not available"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}