CODEWITHSUNDEEP
cssreactjsamazon-web-servicesaws-amplify
Juan Andres
Juan Andres

Reputation: 121

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"

Upvotes: 12

Views: 8067

Answers (4)

arooly
arooly

Reputation: 1

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

Upvotes: 0

Scott Rees
Scott Rees

Reputation: 134

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

Upvotes: 2

cobberboy
cobberboy

Reputation: 6215

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

Upvotes: 5

Senju
Senju

Reputation: 11

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

Upvotes: 1

Related Questions