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

Question

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"

score 4 · Answer 1 · answered Apr 08 '22 at 08:25

4

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';

answered Apr 08 '22 at 08:25

cobberboy

5,598
2
25
22

What error message where you getting that you needed to add this rule? Is Eslint where the error message is coming from? You can see that `styles.css` is being exported here: https://github.com/aws-amplify/amplify-ui/blob/main/packages/react/package.json#L27 Can you try upgrading the to the latest version? `npm install @aws-amplify/ui-react@latest` – Scott Rees May 10 '22 at 21:17
@ScottRees I was using the latest version at the time I commented. The error message was the same as OP's. At the time I checked in my node_modules folder and yes indeed the export was there but the error persisted. Sorry I can't test whether it persists now. – cobberboy May 11 '22 at 06:09
1

Its weird but only this solution worked for me. Tried everything, also tried issues solutions in their official github, they have mentioned to have fixed in latest versions, still had problem. these problem appears randomly. thanks @cobberboy – rahulspoudel Dec 18 '22 at 09:37

Scott Rees · Answer 2 · 2022-05-10T21:47:31.447

2

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

edited May 10 '22 at 21:47

answered Dec 22 '21 at 00:03

Scott Rees

134
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 22 '21 at 03:49
3

I have the same problem with aws-amplify v4.3.13 – Simon Orro Feb 07 '22 at 12:17
@SimonOrro What version of `@aws-amplify/ui-react` are you on? Can you try upgrading to the latest? – Scott Rees Mar 22 '22 at 16:49
I'm running into the same issue just trying to get an official AWS Workshop running https://catalog.us-east-1.prod.workshops.aws/workshops/bb080ee8-4722-4290-ac6e-d4cde0a65142/en-US/02-setup-web-application/02-add-authentication – GarrettJ Aug 26 '22 at 05:39

score 1 · Answer 3 · edited Mar 21 '22 at 13:29

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"
      }
    }
  ]
}

score 0 · Answer 4 · answered Dec 01 '22 at 05:29

0

I used the latest version of aws-amplify and still got the error on build. Changing .eslintrc worked.

answered Dec 01 '22 at 05:29

arooly

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 04 '22 at 12:20

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

4 Answers4