Dependency mismatch

[cnmoise]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

yarn build

What browsers are you seeing the problem on?

Brave Pr

Which region are you seeing the problem in?

No response

Please describe your bug.

I just installed the latest version of
"@aws-amplify/ui-react": "^5.3.1",
coming from 3.6.0
And some of the elements are not working in my React/Typescript codebase
<View
as="div"
alignContent="center"
ariaLabel="View example"
backgroundColor="var(--amplify-colors-white)"
margin="10% 0% 0% 0%"

But some of the properties don’t exist anymore seemingly
Property 'as' does not exist on type 'IntrinsicAttributes & BaseViewProps'.

Property 'alignContent' does not exist on type 'IntrinsicAttributes & BaseViewProps'.
Am I missing some typescript dependency? Am I looking at out of date docs? https://ui.docs.amplify.aws/react/components/view

What's the expected behaviour?

The attributes should not cause any errors.

Help us reproduce the bug!

Use the following package.json

{
  "name": "admin-web-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/pubsub": "^5.1.13",
    "@aws-amplify/ui-react": "^5.3.1",
    "@cloudscape-design/components": "^3.0.341",
    "@cloudscape-design/global-styles": "^1.0.1",
    "@tanstack/react-query": "^4.14.6",
    "@tanstack/react-query-devtools": "^4.14.8",
    "@testing-library/jest-dom": "^5.14.1",
    "@types/node": "^18.11.9",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/uuid": "^9.0.4",
    "amazon-cognito-identity-js": "^5.2.12",
    "aws-amplify": "^4.3.43",
    "date-fns": "^2.30.0",
    "i18next": "^22.4.15",
    "i18next-http-backend": "^2.2.0",
    "jotai": "^1.9.2",
    "jsdoc": "^4.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^12.2.0",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.1.1",
    "typescript": "^4.4.2",
    "uuid": "^9.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "lint": "eslint .",
    "test": "react-scripts test",
    "jest": "jest --verbose=true",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@casualbot/jest-sonar-reporter": "^2.2.7",
    "@storybook/babel-plugin-require-context-hook": "^1.0.1",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^29.5.1",
    "@typescript-eslint/eslint-plugin": "^5.58.0",
    "@typescript-eslint/parser": "^5.58.0",
    "core-js": "^3.30.1",
    "eslint": "^8.38.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-import-resolver-typescript": "^3.5.5",
    "eslint-plugin-header": "^3.1.1",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsdoc": "^41.1.1",
    "eslint-plugin-json": "^3.1.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-yaml": "^0.5.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "jest-junit": "^16.0.0"
  }
}

[esauerbo]

Hey @cnmoise thanks for creating an issue for this. Strangely I haven't been able to replicate your error, I'm using your package.json and I was able to get this component to show up in the Brave browser.

    <View
      as="div"
      alignContent="center"
      ariaLabel="View example"
      backgroundColor="var(--amplify-colors-white)"
      margin="10% 0% 0% 0%"
    >
      Hello world!
    </View>

Where are you seeing this error? (IDE, build etc) Also what IDE are you using (if any)?

[reesscot]

@cnmoise Are you still having this issue?

[calebpollman]

@cnmoise Going to close this issue since we have not heard back from you but please let us know if you are still having problems and we can re-open the issue