Amplify-js: CSS stylesheets missing when using withAuthenticator from the aws-amplify-react package version 4.1.7

[matyashlavacek]

Describe the bug
CSS stylesheets missing when using withAuthenticator from the aws-amplify-react package version 4.1.7

To Reproduce
Steps to reproduce the behavior:

1. npx create-react-app my-app && cd my-app
2. npm i aws-amplify [email protected]
3. Configure:

import { withAuthenticator } from 'aws-amplify-react';
import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

1. Wrap React App component with withAuthenticator

export default withAuthenticator(App);

1. npm run start
2. Open http://localhost:3000/

Expected behavior
Full blown AWS login UI appears.

Instead just pure HTML appears.

Screenshots
Expected:

Actual:

Environment

$ npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages
npx: installed 1 in 0.925s

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 1.13 GB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.16.2 - /opt/local/bin/node
    npm: 6.14.4 - /opt/local/bin/npm
  Browsers:
    Brave Browser: 80.1.5.112
    Chrome: 81.0.4044.113
    Firefox: 74.0.1
    Safari: 13.0.5
  npmPackages:
    @testing-library/jest-dom: ^5.5.0 => 5.5.0 
    @testing-library/react: ^10.0.2 => 10.0.2 
    @testing-library/user-event: ^10.0.2 => 10.0.2 
    aws-amplify: ^3.0.8 => 3.0.8 
    aws-amplify-react: ^4.1.7 => 4.1.7 
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-scripts: 3.4.1 => 3.4.1 
  npmGlobalPackages:
    aws-cdk: 1.31.0
    gatsby-cli: 2.11.4
    generator-cosappsync: 0.9.0
    npm-check-updates: 4.1.2
    npm: 6.14.4
    surge: 0.21.3
    yo: 3.1.1

Additional context
Not sure with what specific version did this issue appear the first time.

When I install aws-amplify-react version 3.1.9 in the same project, the UI appears as expected.

[ashika01]

@matyashlavacek As of [email protected], the Authenticator is not styled. To include default styling in JavaScript, add this line before Amplify.configure:

import '@aws-amplify/ui/dist/style.css';

Are you doing this? Its probably what you are missing

Its in the docs https://aws-amplify.github.io/docs/js/react#add-auth under auth for react.

[rrrix]

I think this is a _NEW / breaking_ change from previous versions (3.x to 4.x).

I've been staring at this un-styled ugly UI for a couple of weeks (I think) and finally started looking around.

The withAuthenticator HoC previously "just worked" and didn't need this extra CSS import.

Is there a way for the withAuthenticator to be like, smart about this and import the CSS by default if no other CSS imported?

[rrrix]

@ashika01 thanks for the link to that documentation!

I was entirely confused since I was looking at the _other_ withAuthenticator documentation ...
Using withAuthenticator HOC
... since that's where Google sent me when searching for withAuthenticator.

Unfortunately that page has no mention anywhere of the new 4.x.x behavior requiring the CSS import. It _does_ mention some vague things about using a Theme but doesn't provide any practical examples of what a theme would actually look like.

It would be great if the same tidbit regarding the breaking 4.x.x change requiring an additional CSS import were also on that page next to the other examples.

[matyashlavacek]

@matyashlavacek As of [email protected], the Authenticator is not styled. To include default styling in JavaScript, add this line before Amplify.configure:

import '@aws-amplify/ui/dist/style.css';

Are you doing this? Its probably what you are missing

Its in the docs https://aws-amplify.github.io/docs/js/react#add-auth under auth for react.

Ah I see, I was using [email protected] before, which had the CSS included. I found out about the withAuthenticator HOC in the same place in the docs as @rrrix did. It would be nice to include it into these docs too indeed. Thanks for the info! @ashika01

[deanbutler71]

Thanks a million, that was breaking my heart, If I want to now customise this login page to match the rest of my site/app, add logos etc, is this easy enough to customise? Can anyone point me in the right direction to do this? Creating first gatsby site, would appreciate any help. thanks!

[mark-hayward]

This seems like a big breaking change. Had me stumped for ages.
I didn't expect such a breaking change from AWS.