'Unable to resolve path to module '@aws-amplify/ui-react/styles.css'

I am getting the error:

Unable to resolve path to module '@aws-amplify/ui-react/styles.css'

I am using the amplify authenticator component shown in the following link https://ui.docs.amplify.aws/components/authenticator#quick-start

I had already my backend configured as always and is fine and working.

npx create-react-app exampleapp
npm start
amplify init
amplify add api
amplify push
npm install aws-amplify @aws-amplify/ui-react
amplify add auth
amplify pus

The app.js is configured as follows

import { Amplify } from 'aws-amplify';

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );

In general the application runs fine and is able to connect with the amplify backend. The problem is that it can not find the css style. It seems that is not in the'@aws-amplify/ui-react'. My Node version is 16.13.1. Also, I am using the last version of the packages at this moment in the package.json

"@aws-amplify/ui-react": "^2.1.5",
"aws-amplify": "^4.3.10"
cssreactjsamplify


Solution 1:[1]

Try upgrading aws-amplify to 4.3.11 or above and upgrade to the latest version of @aws-amplify/ui-react. This version is compatible with the latest version of create-react-app which uses Webpack 5. This issue was fixed in aws-amplify here: https://github.com/aws-amplify/amplify-js/pull/9358

Solution 2:[2]

I had the same issue. Changing my eslint setting worked for me.

Here is my .eslintrc

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    "plugin:testing-library/react",
    "plugin:import/recommended",
    "plugin:import/warnings",
    "plugin:storybook/recommended"
  ],
  "rules": {
    "import/no-unresolved": "off", //add
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  },
  "overrides": [
    {
      "files": ["*.stories.@(ts|tsx|js|jsx|mjs|cjs)"],
      "rules": {
        "storybook/hierarchy-separator": "error",
        "storybook/default-exports": "off"
      }
    }
  ]
}

Solution 3:[3]

When I initially saw @senju's answer (upvote it!) I thought, "that will just hide the problem". But no, in my case eslint was the cause of the problem.

Rather than @senju's solution of disabling warnings for all unresolved imports, I suggest just disabling it for the specific import with an eslint-specific comment:

// eslint-disable-next-line import/no-unresolved
import '@aws-amplify/ui-react/styles.css';

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Mabiyan
Solution 3 cobberboy

Related Questions