Registry / aws / amplify-frontend-javascript

amplify-frontend-javascript

library3.7.6jsnpmunverified

The `amplify-frontend-javascript` package functions as an essential internal plugin for the AWS Amplify Command Line Interface (CLI), dedicated to streamlining the configuration and management of JavaScript and TypeScript frontend projects. It is primarily utilized by the Amplify CLI to correctly scaffold, build, and deploy applications that integrate with various AWS backend services such as authentication (Amazon Cognito), APIs (AWS AppSync, Amazon API Gateway), and storage (Amazon S3). Unlike the main `amplify-cli` which currently operates at version `14.x` and experiences frequent updates, this specific plugin (version `3.7.6`) maintains its own, more stable release cadence. This indicates that its core functionality, which revolves around configuring the client-side `aws-exports.js` file and facilitating frontend deployments, is mature and undergoes fewer modifications. Developers do not directly import this package into their application code; instead, it is an underlying component of the Amplify CLI workflow, distinguishing it from the `aws-amplify` client library that developers use in their frontend applications. Its primary value lies in providing seamless integration within the Amplify ecosystem for developing full-stack applications.

aws devops

npm install amplify-frontend-javascript

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · AMPLIFY-FRONTEND-J

amplify-frontend-javascript

awsjavascriptv3.7.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Amplify

✓ import { Amplify } from 'aws-amplify';

✗ const Amplify = require('aws-amplify');

This package (`amplify-frontend-javascript`) is a CLI plugin and not directly imported by application code. These imports are for the `aws-amplify` client library, which frontend projects configure using the CLI plugin's output (e.g., `aws-exports.js`). For ESM, use `import`, for CJS, `require` is common but less preferred in modern frontend development.

Auth

✓ import { Auth } from 'aws-amplify';

✗ import Auth from 'aws-amplify/lib/Auth';

Named export `Auth` for authentication features. Direct path imports like `aws-amplify/lib/Auth` are generally deprecated in favor of top-level named exports for better tree-shaking and stability across versions.

API

✓ import { API } from 'aws-amplify';

✗ import { API } from '@aws-amplify/api';

Named export `API` for GraphQL and REST API interactions. While some categories have dedicated packages (e.g., `@aws-amplify/api`), the common practice for application code is to import from the main `aws-amplify` package.

This code demonstrates basic Amplify client-side configuration using `aws-exports.js` and examples for user authentication and GraphQL API interaction, which are common uses for Amplify in a JavaScript/TypeScript frontend.

import { Amplify } from 'aws-amplify'; import config from './aws-exports'; Amplify.configure(config); // Example: Authenticate a user async function signUp() { try { const { user } = await Amplify.Auth.signUp({ username: 'testuser', password: 'password123', attributes: { email: 'test@example.com' // optional } }); console.log('User signed up successfully:', user); } catch (error) { console.error('Error signing up:', error); } } // Example: Fetch data from a GraphQL API async function fetchData() { try { const apiData = await Amplify.API.graphql({ query: ` query ListTodos { listTodos { items { id name description } } } ` }); console.log('API Data:', apiData); } catch (error) { console.error('Error fetching data:', error); } } signUp(); // Or fetchData();

Debug

Known issues

gotchaThe package `amplify-frontend-javascript` is a CLI plugin and not meant for direct import into your application code. Application code should import from the `aws-amplify` client library.

fix

Ensure you are installing `aws-amplify` (e.g., `npm install aws-amplify`) for client-side usage, and `amplify-cli` (e.g., `npm install -g @aws-amplify/cli`) for backend provisioning.

affects: >=3.0.0

breakingAmplify CLI and client library versions (e.g., `aws-amplify@5` to `aws-amplify@6`) can introduce breaking changes, especially in authentication workflows, API client generation, and UI components. Always consult the migration guide for major version upgrades.

fix

Before upgrading `aws-amplify` or the `amplify-cli`, review the official AWS Amplify documentation for release notes and migration guides specific to your current and target versions.

affects: >=1.0.0

gotchaThe `aws-exports.js` configuration file generated by the CLI must be correctly imported and passed to `Amplify.configure()`. Changes to your Amplify backend (e.g., adding a new API or Auth category) require running `amplify push` and often regenerating `aws-exports.js`.

fix

After any `amplify push` operation, verify `aws-exports.js` is up-to-date and ensure your application code is importing the correct path for `aws-exports.js`.

affects: >=1.0.0

gotchaModule resolution issues (CommonJS vs. ESM) can arise in some JavaScript bundler configurations, especially in projects migrating to pure ESM or using older build tools. `aws-amplify` aims for universal compatibility but might require specific bundler configurations.

fix

Ensure your `tsconfig.json` (for TypeScript) and bundler configuration (Webpack, Rollup, Vite) are set up for proper ESM resolution, potentially requiring `moduleResolution: 'bundler'` or specific `plugins` for ESM/CJS interop.

affects: >=4.0.0

breakingRecent Amplify CLI versions (v14.x onwards) are migrating categories to AWS SDK v3. While `amplify-frontend-javascript` itself might not be directly affected, custom resources or functions that interact with AWS SDKs might experience breaking changes if not updated.

fix

For custom AWS Lambda functions or other custom resources managed by Amplify, ensure that any AWS SDK usage is compatible with v3. Review function code for deprecated SDK v2 calls and update to v3 if necessary.

affects: >=14.0.0

Errors

Common errors & fixes

No Amplify configuration found. Please configure Amplify in your app.

The `aws-exports.js` file was not imported, or `Amplify.configure()` was not called with the configuration object.

fix

Ensure `import config from './aws-exports'; Amplify.configure(config);` is present and correctly located in your application's entry point.

AuthError: Current user is not authenticated

An operation requiring an authenticated user (e.g., accessing protected API routes, storage) was attempted without a valid user session.

fix

Implement proper authentication flows (signup, signin, session checks) using `Amplify.Auth` methods before attempting protected operations. Check user login state with `Amplify.Auth.currentAuthenticatedUser()` or similar methods.

Type 'Observable<object>' is not assignable to type 'any'

Often seen in TypeScript projects when using older versions of Amplify's API category or when observables are not correctly handled, specifically with GraphQL subscriptions.

fix

Ensure you are using `aws-amplify` v5 or higher and have `@aws-amplify/api` installed if using subscriptions. Explicitly type the observables or cast them where appropriate, or use `async/await` for GraphQL queries/mutations.

Error: Command 'amplify add frontend' is not a valid amplify command.

The installed `amplify-cli` version is too old or the plugin for handling 'frontend' commands is missing/corrupted.

fix

Update the Amplify CLI to the latest version globally (`npm update -g @aws-amplify/cli`) and ensure all related frontend plugins are correctly installed/updated.

Upgrade

Version history

3.7.6latest on npm

Audit

Dependencies

@aws-amplify/amplify-cli-corerequiredCore functionalities for the Amplify CLI that this plugin integrates with.

@aws-amplify/amplify-function-plugin-interfacerequiredInterface for interacting with Amplify function category plugins, suggesting interaction with backend functions.

Agent activity

42 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/aws-amplify/amplify-cli ↗

packagehttps://www.npmjs.com/package/amplify-frontend-javascript ↗

homepagehttps://docs.amplify.aws ↗