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–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Button
✓ import { Button } from 'amos-framework';
✗ const Button = require('amos-framework').Button;
Components are typically imported as named exports from the main package. CommonJS `require` might lead to issues if the build target is primarily ESM.
message
✓ import { message } from 'amos-framework';
✗ import message from 'amos-framework/lib/message';
Utility functions like `message` are also named exports. Direct subpath imports may bypass intended bundling or cause issues.
findAllByType
✓ import { findAllByType } from 'amos-framework';
✗ window.amosframework.findAllByType;
Although the framework can be exposed globally as 'amosframework' in UMD builds, modern applications should use ES module imports. Global access is intended for specific embedding scenarios.
moduleMapping
✓ import moduleMapping from 'amos-framework/lib/moduleMapping';
✗ import { moduleMapping } from 'amos-framework';
This specific utility is a default export from a subpath and is primarily used for configuring the Babel split import plugin, not for direct application logic.
Demonstrates importing and using core Amos Framework UI components (Button, Input, Form) and the message utility, including basic state management and the required development license initialization.
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Button, Input, message, Form, Layout, Row, Col } from 'amos-framework';
// Ensure framework styles are loaded. Example (actual path may vary based on build):
// import 'amos-framework/dist/amosframework.min.css';
// IMPORTANT: Simulate license setup for development.
// For production, follow the official licensing guide.
// This can be a string key or an object based on your license type.
window.__amos__license__ = 'test'; // Quick start development license
const App = () => {
const [inputValue, setInputValue] = React.useState('');
const handleClick = () => {
message.info('Button clicked! Input: ' + inputValue);
};
const handleSubmit = (e) => {
e.preventDefault();
message.success(`Form submitted with value: ${inputValue}`);
};
return (
<Layout style={{ minHeight: '100vh', padding: '20px' }}>
<Row justify="center" align="middle">
<Col span={12} style={{ maxWidth: '600px', width: '100%' }}>
<h1>Amos Framework Basic Usage</h1>
<Form onSubmit={handleSubmit} style={{ marginBottom: '20px' }}>
<Input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Enter some text..."
style={{ width: '100%', marginBottom: '10px' }}
/>
<Button type="primary" onClick={handleClick}>
Show Message
</Button>
<Button type="submit" style={{ marginLeft: '10px' }}>
Submit Form
</Button>
</Form>
<p>
This simple application demonstrates how to import and utilize core Amos Framework UI components like `Button`, `Input`, `Form`, `Layout`, and the `message` utility. It also highlights the crucial step of initializing the framework's license for local development, which is a mandatory requirement. For a full setup, ensure React and ReactDOM are available, and the framework's CSS is properly loaded into your project.
</p>
</Col>
</Row>
</Layout>
);
};
const rootElement = document.getElementById('root');
if (rootElement) {
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);
} else {
console.error("Root element 'root' not found. Please add <div id='root'></div> to your HTML.");
}
Errors
Common errors & fixes
License verification failed: No license found or invalid format
The framework's internal license check failed because `license.dat` is missing, or `window.__amos__license__` is not set or contains an invalid value.
fixEnsure `license.dat` is in your project root, or set `window.__amos__license__` to a valid license string or object as specified in the README. Use `window.__amos__license__ = 'test';` for quick development.
TypeError: Cannot read properties of undefined (reading 'info')
A utility method (like `message.info`) or component is being accessed before it is correctly imported or before the framework is fully initialized, potentially due to a license issue or incorrect import path.
fixVerify that `import { message } from 'amos-framework';` is present and that the framework's license is successfully loaded and validated. Check console for license-related errors. Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components)...
An Amos Framework component is not being recognized as a valid React component. This can be caused by incorrect import paths, CommonJS/ESM module mismatches, or an improper webpack `externals` configuration.
fixDouble-check your component imports (e.g., `import { Button } from 'amos-framework';`). If using webpack, ensure `externals` are configured as specified in the '添加 sdk license' section. ReferenceError: amosframework is not defined
An attempt was made to access `amosframework` globally (e.g., in an embedded script tag or through a bundler that expects global access) without the UMD build being correctly loaded into the HTML or the webpack `externals` being configured to expose it.
fixIf using UMD, ensure `<script src="/extra/amosframework/amosframework.min.js"></script>` is loaded *before* your application scripts. If using a bundler, configure webpack `externals` as described in the documentation.
Audit
Dependencies
reactrequiredCore peer dependency for UI components, required for rendering. Expected as an external in build configurations.
react-domrequiredCore peer dependency for rendering UI components. Expected as an external in build configurations.
amos-authorizationoptionalRequired for the framework's licensing mechanism, specifically for `lib/licenseSdk.js`.
ray-pack-toolkitoptionalProvides `SplitImportPlugin` for implementing custom Babel plugins for on-demand component loading.