React Native - Unable to resolve “@aws-amplify/ui/dist/style.css”

[dperconti]

** Which Category is your question related to? **
react-native & @aws-amplify/ui

** What AWS Services are you utilizing? **
Amplify & Cognito

** Provide additional details e.g. code snippets **

I'm attempting to customize the AWS Amplify UI signin/signup process by following this article. Every time I import anything from aws-amplify-react I receive this error:

Unable to resolve "@aws-amplify/ui/dist/style.css" from "node_modules/aws-amplify-react/dist/Amplify-UI/Amplify-UI-Components-React.js"

I've tried installing @aws-amplify/ui specifically, along with other combinations of aws-amplify versions. Here's the relevant part of my package.json:

...
"aws-amplify": "^1.1.25",
"aws-amplify-react": "^2.3.5",
"aws-amplify-react-native": "^2.1.9",
...

And the versions of the specific UI & auth that I've tried:

"@aws-amplify/auth": "^1.2.21",
"@aws-amplify/ui": "^1.0.2",

Here is the import statement:

import { ConfirmSignIn, ConfirmSignUp, ForgotPassword, RequireNewPassword, SignIn, SignUp, VerifyContact, withAuthenticator } from 'aws-amplify-react';

Any help on resolving this issue is greatly appreciated.

[alebiavati]

Hi @dperconti, thanks for using AWS Amplify!

It looks like you are using both aws-amplify-react and aws-amplify-react-native. The aws-amplify-react module is not meant to be used with React Native. This is because CSS cannot be parsed in RN.

Please follow this guide to pass a theme object to the authenticator component to customize styling.

[kay-is]

To use this with Expo, which allows Web and Android/iOS builds, I installed aws-amplify-react and aws-amplify-react-native and created two files:

//aws-amplify-react.js
export * from "aws-amplify-react-native";

//aws-amplify-react.web.js
export * from "aws-amplify-react";

With this setup I just have to do import ... from "./aws-amplify-react" and get the right implementation.

Now, I just have to hope they have the same interfaces, haha.

[AmmarKureja]

When I use aws-amplify-react and withAuthenticator in my react app. it throws the following error. Shouldn't it pick the CSS automatically? when I manually add the CSS path into my webpack css-loader, it works. However, when I build my app in the AWS Codebuild it throws the same error again. Please help.

[MichalCzerwonka]

When I use aws-amplify-react and withAuthenticator in my react app. it throws the following error. Shouldn't it pick the CSS automatically? when I manually add the CSS path into my webpack css-loader, it works. However, when I build my app in the AWS Codebuild it throws the same error again. Please help.

The same for me.

[ericclemmons]

To be clear, there is an issue with importing .css files that's being addressed, but when using React Native, use aws-amplify-react-native, not aws-amplify-react due to implementation differences.

[sammartinez]

Resolving issue as this is solved in version 3 of Amplify. Please review what @ericclemmons statement is above and please let us know if you are still experiencing this issue. Thanks!

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.