Amplify-js: Type 'Props["usernameAttributes"]' cannot be used to index type '{ [UsernameAttributes.EMAIL]: string; [UsernameAttributes.PHONE_NUMBER]: string; [UsernameAttributes.USERNAME]: string; }'. TS2536

[johncblandii]

Describe the bug

React production builds are failing with the following error:

yarn run v1.17.3
$ cp public/index.tpl.html public/index.html
$ react-scripts build
Creating an optimized production build...
Failed to compile.

/usr/app/node_modules/aws-amplify-react/dist/Auth/AuthPiece.d.ts
TypeScript error in /usr/app/node_modules/aws-amplify-react/dist/Auth/AuthPiece.d.ts(26,25):
Type 'Props["usernameAttributes"]' cannot be used to index type '{ [UsernameAttributes.EMAIL]: string; [UsernameAttributes.PHONE_NUMBER]: string; [UsernameAttributes.USERNAME]: string; }'.  TS2536

    24 |     onPhoneNumberChanged(phone_number: any): void;
    25 |     renderUsernameField(theme: any): JSX.Element;
  > 26 |     getUsernameLabel(): {
       |                         ^
    27 |         [UsernameAttributes.EMAIL]: string;
    28 |         [UsernameAttributes.PHONE_NUMBER]: string;
    29 |         [UsernameAttributes.USERNAME]: string;

To Reproduce
Steps to reproduce the behavior:

1. docker build -t client:latest -f ./client/Dockerfile-release ./client

package.json

{
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "prebuild": "cp public/index.tpl.html public/index.html",
    "build": "react-scripts build",
    "test": "react-scripts test --reporters=default --reporters=jest-junit",
    "pretest:cov": "mkdir -p ../reports/coverage/client",
    "test:cov": "CI=true yarn test --all --coverage",
    "posttest:cov": "cp -r coverage/* ../reports/coverage/client",
    "eject": "react-scripts eject",
    "lint": "tslint -p tsconfig.json -c tslint.json"
  },
  "dependencies": {
    "@aws-amplify/core": "^1.2.2",
    "@material-ui/core": "^4.5.1",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/lab": "^4.0.0-alpha.28",
    "@types/node-fetch": "^2.5.2",
    "@types/zen-observable": "^0.8.0",
    "ag-grid-community": "^21.2.2",
    "ag-grid-enterprise": "^21.2.2",
    "ag-grid-react": "^21.2.2",
    "apollo-boost": "^0.4.3",
    "apollo-link-context": "^1.0.19",
    "apollo-link-ws": "^1.0.19",
    "autosuggest-highlight": "^3.1.1",
    "aws-amplify": "^1.2.2",
    "aws-amplify-react": "^2.5.2",
    "axios": "^0.19.0",
    "babel-jest": "^24.9.0",
    "bootstrap": "^4.3.1",
    "faker": "^4.1.0",
    "geolib": "^3.0.4",
    "graphql": "^14.5.8",
    "jss": "10.0.0",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.15",
    "mixin-deep": "^2.0.1",
    "moment": "^2.24.0",
    "moment-range": "^4.0.2",
    "react": "^16.10.2",
    "react-apollo": "^3.1.3",
    "react-autosuggest": "^9.4.3",
    "react-dom": "^16.10.2",
    "react-redux": "^7.1.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "reactstrap": "^8.0.0",
    "redux": "^4.0.1",
    "redux-data-structures": "^0.1.6",
    "redux-thunk": "^2.3.0",
    "request-promise-native": "^1.0.7",
    "subscriptions-transport-ws": "^0.9.16",
    "typescript": "3.6.4",
    "yarn": "^1.19.1"
  },
  "resolutions": {
    "mixin-deep": "^1.3.2"
  },
  "devDependencies": {
    "@types/autosuggest-highlight": "^3.1.0",
    "@types/graphql": "^14.5.0",
    "@types/jest": "24.0.19",
    "@types/jwt-decode": "^2.2.1",
    "@types/node": "^12.7.12",
    "@types/react": "^16.9.7",
    "@types/react-autosuggest": "^9.3.11",
    "@types/react-dom": "16.9.2",
    "@types/react-redux": "^7.1.4",
    "@types/react-router-dom": "^5.1.0",
    "@types/reactstrap": "^8.0.5",
    "@types/redux-devtools": "^3.0.47",
    "@types/request-promise-native": "^1.0.17",
    "@types/ws": "^6.0.1",
    "@types/zen-observable": "^0.8.0",
    "jest": "24.9.0",
    "jest-junit": "^6.3.0",
    "redux-devtools": "^3.5.0",
    "redux-devtools-extension": "^2.13.8",
    "tslint": "5.20.0",
    "ts-jest": "^24.1.0"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not ie <= 11",
      "not op_mini all"
    ],
    "development": []
  },
  "jest": {
    "coverageReporters": [
      "html"
    ],
    "transform": {
      "^.+\\.(t|j)s$": "ts-jest"
    }
  },
  "jest-junit": {
    "output": "../reports/junit-client.xml",
    "usePathForSuiteName": "true"
  }
}

Expected behavior

Dev builds work as expected. They do not have a problem during the build or run process.

Release builds should work.

Screenshots

N/A

Desktop (please complete the following information):

• OS: Docker (for Mac and via Jenkins)
• Browser: N/A

Smartphone (please complete the following information):

N/A

Amplify context

• Framework: React
• Versions of Amplify:

"@aws-amplify/core": "^1.2.2",
"aws-amplify": "^1.2.2",
"aws-amplify-react": "^2.5.2",

Additional context

Dockerfile used to build it

# Build the base image from the source code
FROM node:12 as build

WORKDIR /usr/app

COPY package*.json ./

RUN yarn

COPY . .

ARG CONFIGURATION=prod

RUN yarn build

# Create the final image
FROM nginx:1.17.4-alpine

# Copy the default files
COPY rootfs/ /

# This is the default nginx location for files
WORKDIR /usr/share/nginx/html

# Copy the dist folder contents for the portal into the WORKDIR
COPY --from=build /usr/app/build .

EXPOSE 80

CMD ["/app/entrypoint.sh"]

Sample code

N/A. Cannot get beyond the build process.

_You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app._

[johncblandii]

I tried this config with typescript 3.6.3 and it failed as well.

[Amplifiyer]

@johncblandii, I tried to reproduce with your docker file with a typescript react app (created with create-react-app) but I was not able to reproduce it. The prod builds were always succeeding

$ docker build -t client:latest -f ./client/Dockerfile-release .
Sending build context to Docker daemon  356.7MB
Step 1/12 : FROM node:12 as build
...
Step 7/12 : RUN yarn build
 ---> Running in ee1bf68ae072
yarn run v1.19.1
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  547.88 KB  build/static/js/2.22711e23.chunk.js
  3.63 KB    build/static/css/2.e975185d.chunk.css
  900 B      build/static/js/main.62c26d53.chunk.js
  790 B      build/static/js/runtime-main.f5f072f4.js
  418 B      build/static/css/main.dfca195d.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://bit.ly/CRA-deploy

Done in 28.52s.
Removing intermediate container ee1bf68ae072
 ---> d75ef39a5cee
Step 8/12 : FROM nginx:1.17.4-alpine
 ---> dfc78cd150cf
Step 9/12 : WORKDIR /usr/share/nginx/html
 ---> Running in 1e3f7c782910
Removing intermediate container 1e3f7c782910
 ---> cfe0cee49b5c
Step 10/12 : COPY --from=build /Users/pravgupt/Workspace/sampleapp/amplify-js-samples-staging/samples/react/auth/with-authenticator-typescript/build .
 ---> 5f6bea4ccbf9
Step 11/12 : EXPOSE 80
 ---> Running in 71e87c4ec08b
Removing intermediate container 71e87c4ec08b
 ---> 3068eee5e64c
Step 12/12 : CMD ["/app/entrypoint.sh"]
 ---> Running in ecd3691e3cab
Removing intermediate container ecd3691e3cab
 ---> 88216682ffef
Successfully built 88216682ffef
Successfully tagged client:latest

We have added some typings to avoid some unrelated compilation issues in #4226, can you please try with the latest release of aws-amplify-react and a clean build and let us know if you are facing the same issue?

If yes, can you provide code samples where you are using aws-amplify-react components (withAuthenticator or Authenticator) and where you are making Auth category calls?

[jsDotCr]

Hi! I'm facing this issue as well. I've set up a repo and the minimal setup to reproduce it: https://github.com/jsDotCr/amplify-react-types-bug
I am using next and the auth part of amplify only (modular) but I doubt the problem is there since it's failing when running tsc.

Please note: the error only appears when tsconfig.json has strict: true.
Also, "skipLibCheck": true ~fixes~ hides the issue.

node_modules/aws-amplify-react/lib/Auth/AuthPiece.d.ts:26:25 - error TS2536: Type 'Props["usernameAttributes"]' cannot be used to index type '{ [UsernameAttributes.EMAIL]: string; [UsernameAttributes.PHONE_NUMBER]: string; [UsernameAttributes.USERNAME]: string; }'.

 26     getUsernameLabel(): {
                            ~
 27         [UsernameAttributes.EMAIL]: string;
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
 29         [UsernameAttributes.USERNAME]: string;
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 30     }[Props["usernameAttributes"]];
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error.

I'm using [email protected] with [email protected]

[Amplifiyer]

I've fixed this issue so you should not get this error anymore but please note that amplify library is not strictly typed currently, we are looking for ways to improve types so that one day we can enable "strict": true in the library.