Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–223 runs
build_error
glibcnode 18–223 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Router
✓ import { Router } from 'tma-frontend-framework'
✗ import Router from 'tma-frontend-framework'
Named export, not default. Only ESM supported.
ApiHelper
✓ import { ApiHelper } from 'tma-frontend-framework'
✗ const ApiHelper = require('tma-frontend-framework')
Named export. ESM only; no CommonJS support.
DataDriverInput
✓ import { DataDriverInput } from 'tma-frontend-framework'
Named export for the autocomplete input component.
Alert functions (e.g., showAlert)
✓ import { showAlert } from 'tma-frontend-framework'
✗ import { Alert } from 'tma-frontend-framework'
Custom alert functions are exported individually; no Alert class.
Confirm component
✓ import { Confirm } from 'tma-frontend-framework'
✗ import Confirm from 'tma-frontend-framework'
Named export for the confirm dialog component.
Shows basic usage of Router, ApiHelper, and DataDriverInput to set up routing, authenticated API calls, and autocomplete input.
import { Router } from 'tma-frontend-framework';
import { ApiHelper } from 'tma-frontend-framework';
import { DataDriverInput } from 'tma-frontend-framework';
// Define routes
const routes = {
'/': () => console.log('Home'),
'/about': () => console.log('About'),
};
const router = new Router(routes);
router.init();
// API helper
const api = new ApiHelper();
async function getData() {
const token = await api.login('/auth', 'user', 'pass');
const data = await api.request('/data', 'GET');
console.log(data);
}
// DataDriverInput
const input = new DataDriverInput({
dataLoader: async (query) => {
const res = await fetch('/api/items?q=' + query);
return res.json();
},
maxItems: 10,
inputElement: document.getElementById('my-input'),
});
input.init();
Errors
Common errors & fixes
import { Router } from 'tma-frontend-framework'; TypeError: Router is not a constructor
Using default import instead of named import.
fixChange to: import { Router } from 'tma-frontend-framework'; Uncaught SyntaxError: The requested module 'tma-frontend-framework' does not provide an export named 'default'
Attempting to import as default export, which does not exist.
fixUse named exports like: import { Router, ApiHelper } from 'tma-frontend-framework'; Module not found: Error: Can't resolve 'tma-frontend-framework'
Missing npm install or incorrect path.
fixRun: npm install tma-frontend-framework
Uncaught TypeError: Cannot read properties of undefined (reading 'login')
ApiHelper instance not created with 'new' keyword.
fixUse: const api = new ApiHelper();
Audit
Dependencies
No dependency data recorded yet.