AWS Amplify UI React Styles not importing

Question

Unable to import styles from node_modules.

Using "@aws-amplify/ui-react": "^2.1.0"

Answer 1

This was resolved in the @aws-amplify/ui-react version 2.1.6 above. See ui-react changelog

To fix this error, upgrade to the latest version of @aws-amplify/ui-react

npm install @aws-amplify/ui-react@latest

Answer 2

To import styles from node_modules in AWS Amplify, you can follow these steps:)

Install the desired npm package: If the styles you want to import are available as an npm package, you need to install it first. You can do this by running the following command in your project directory (replace package-name with the actual package name):

npm install package-name

Import styles in your application: Once the package is installed, you can import the styles in your application code. The specific import method may vary depending on the package and the type of styles (e.g., CSS, SCSS, etc.).

For example, if the package contains a CSS file that you want to use, you can import it in your JavaScript or CSS file as follows:

In JavaScript (e.g., index.js or App.js):

import 'package-name/dist/styles.css';

In CSS (e.g., styles.css):

@import '~package-name/dist/styles.css';

Note the use of the tilde (~) before the package name when importing from the node_modules directory.

You need to ensure the styles are bundled. Depending on your project setup and build tools, you might need to ensure that the imported styles get properly bundled into your final build. If you're using Create React App, Next.js, or other similar frameworks, the styles should be automatically included in the build process.

Then, you can deploy your application to AWS Amplify: After importing the styles and ensuring they are correctly bundled, you can deploy your application to AWS Amplify. If you are using the Amplify CLI, simply run amplify publish in your project directory, and Amplify will take care of deploying your application to the cloud.