{"id":14420,"library":"amplify-frontend-javascript","title":"Amplify CLI JavaScript Frontend Plugin","description":"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.","status":"active","version":"3.7.6","language":"javascript","source_language":"en","source_url":"https://github.com/aws-amplify/amplify-cli","tags":["javascript","graphql","appsync","aws"],"install":[{"cmd":"npm install amplify-frontend-javascript","lang":"bash","label":"npm"},{"cmd":"yarn add amplify-frontend-javascript","lang":"bash","label":"yarn"},{"cmd":"pnpm add amplify-frontend-javascript","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core functionalities for the Amplify CLI that this plugin integrates with.","package":"@aws-amplify/amplify-cli-core","optional":false},{"reason":"Interface for interacting with Amplify function category plugins, suggesting interaction with backend functions.","package":"@aws-amplify/amplify-function-plugin-interface","optional":false}],"imports":[{"note":"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.","wrong":"const Amplify = require('aws-amplify');","symbol":"Amplify","correct":"import { Amplify } from 'aws-amplify';"},{"note":"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.","wrong":"import Auth from 'aws-amplify/lib/Auth';","symbol":"Auth","correct":"import { Auth } from 'aws-amplify';"},{"note":"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.","wrong":"import { API } from '@aws-amplify/api';","symbol":"API","correct":"import { API } from 'aws-amplify';"}],"quickstart":{"code":"import { Amplify } from 'aws-amplify';\nimport config from './aws-exports';\n\nAmplify.configure(config);\n\n// Example: Authenticate a user\nasync function signUp() {\n  try {\n    const { user } = await Amplify.Auth.signUp({\n      username: 'testuser',\n      password: 'password123',\n      attributes: {\n        email: 'test@example.com' // optional\n      }\n    });\n    console.log('User signed up successfully:', user);\n  } catch (error) {\n    console.error('Error signing up:', error);\n  }\n}\n\n// Example: Fetch data from a GraphQL API\nasync function fetchData() {\n  try {\n    const apiData = await Amplify.API.graphql({\n      query: `\n        query ListTodos {\n          listTodos {\n            items {\n              id\n              name\n              description\n            }\n          }\n        }\n      `\n    });\n    console.log('API Data:', apiData);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n}\n\nsignUp(); // Or fetchData();\n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=3.0.0"},{"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.","message":"Amplify 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.","severity":"breaking","affected_versions":">=1.0.0"},{"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`.","message":"The `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`.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Module 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.","severity":"gotcha","affected_versions":">=4.0.0"},{"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.","message":"Recent 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.","severity":"breaking","affected_versions":">=14.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import config from './aws-exports'; Amplify.configure(config);` is present and correctly located in your application's entry point.","cause":"The `aws-exports.js` file was not imported, or `Amplify.configure()` was not called with the configuration object.","error":"No Amplify configuration found. Please configure Amplify in your app."},{"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.","cause":"An operation requiring an authenticated user (e.g., accessing protected API routes, storage) was attempted without a valid user session.","error":"AuthError: Current user is not authenticated"},{"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.","cause":"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.","error":"Type 'Observable<object>' is not assignable to type 'any'"},{"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.","cause":"The installed `amplify-cli` version is too old or the plugin for handling 'frontend' commands is missing/corrupted.","error":"Error: Command 'amplify add frontend' is not a valid amplify command."}],"ecosystem":"npm"}