Skip to content

@aws-amplify/ui-react and @aws-amplify/ui-react-liveness should export ./dist/styles.css for Metro compatibility #6956

@ashuvssut

Description

@ashuvssut

On which framework/platform would you like to see this feature implemented?

React

Which UI component is this feature-request for?

Liveness

Please describe your feature-request in detail.

I use liveness React SDK for my react native (expo) mobile app.

  • I use FaceLivenessDetector in a webview.
  • That webview is created using Expo DOM components

    Expo DOM components lets developers use a React Native WebView inside our Native app.
    Using that WebView, i can use @aws-amplify/ui-react-liveness for implementing FaceLivenessDetector in it.

    • For example, checkout how we can use 11labs Conversational AI's React SDK in our Expo native app's webview by using Expo Dom components.
    • We can use Secure context Web APIs like navigator.mediaDevices if you start your expo metro dev server with --tunnel flag. That means, we can use FaceLivenessDetector safely here because camera access will be present

When I import the documented CSS entrypoints:

import '@aws-amplify/ui-react/styles.css';
import '@aws-amplify/ui-react-liveness/styles.css';

Metro internally resolves these to ./dist/styles.css and emits warnings because that subpath is not listed in the packages' exports field:

WARN  Attempted to import the module "…/node_modules/styles.css" which is not listed
in the "exports" of "…/@aws-amplify/ui-react" under the requested subpath
"./dist/styles.css". Falling back to file-based resolution. Consider updating the
call site or asking the package maintainer(s) to expose this API.

WARN  Attempted to import the module "…/node_modules/styles.css" which is not listed
in the "exports" of "…/@aws-amplify/ui-react-liveness" under the requested subpath
"./dist/styles.css". Falling back to file-based resolution. …

Things still work via fallback, but the warnings indicate a gap in the export map that affects all Metro-based consumers of these packages.

Please describe a solution you'd like.

Add ./dist/styles.css as an export alias in both @aws-amplify/ui-react and @aws-amplify/ui-react-liveness. I confirmed this locally — adding the entry to package.json eliminated the warnings:

"exports": {
  ".": {
    "types": "./dist/types/index.d.ts",
    "import": "./dist/esm/index.mjs",
    "require": "./dist/index.js"
  },
  "./styles.css": "./dist/styles.css",
  "./dist/styles.css": "./dist/styles.css"  // ← add this
},
"browser": {
  "./styles.css": "./dist/styles.css",
  "./dist/styles.css": "./dist/styles.css"  // ← mirror here too
}

This is a small, non-breaking addition that improves compatibility for Metro/Expo consumers without changing anything for existing web users.

We love contributors! Is this something you'd be interested in working on?

  • 👋 I may be able to implement this feature request.
  • ⚠️ This feature might incur a breaking change.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions