Closed nam-truong-le closed 1 month ago
After some packages are updated, it's working now:
{
"name": "aws-amplify-gen2",
"version": "0.3.0",
"private": true,
"scripts": {
"dev": "NODE_ENV=development next dev -p 3999",
"build": "next build",
"start": "next start",
"lint": "next lint",
"format": "prettier --write .",
"format:check": "prettier --check .",
"sandbox": "env-cmd -f .env.development ampx sandbox --stream-function-logs --profile vs2 --identifier truong",
"sandbox:delete": "ampx sandbox delete --profile vs2 --identifier truong"
},
"dependencies": {
"@aws-amplify/adapter-nextjs": "1.2.18",
"@aws-amplify/ui-react": "6.3.1",
"@aws-amplify/ui-react-storage": "3.3.2",
"@emotion/react": "11.13.3",
"@emotion/styled": "11.13.0",
"@fontsource/roboto": "5.1.0",
"@mui/icons-material": "6.1.0",
"@mui/material": "6.1.0",
"@mui/material-nextjs": "6.1.0",
"@mui/types": "7.2.16",
"@paypal/paypal-js": "8.1.2",
"@paypal/react-paypal-js": "8.7.0",
"@reduxjs/toolkit": "2.2.7",
"@vietnamvisa/vs2-react": "1.6.11",
"aws-amplify": "6.6.1",
"crypto-random-string": "5.0.0",
"dayjs": "1.11.13",
"lodash.concat": "4.5.0",
"lodash.difference": "4.5.0",
"lodash.filter": "4.6.0",
"lodash.groupby": "4.6.0",
"lodash.sortby": "4.7.0",
"lodash.sum": "4.0.2",
"lodash.sumby": "4.6.0",
"lodash.truncate": "4.4.2",
"next": "14.2.11",
"react": "^18",
"react-dom": "^18",
"react-redux": "9.1.2",
"schema-dts": "1.1.2"
},
"devDependencies": {
"@aws-amplify/backend": "1.2.1",
"@aws-amplify/backend-cli": "1.2.6",
"@types/lodash.concat": "4.5.9",
"@types/lodash.difference": "4.5.9",
"@types/lodash.filter": "4.6.9",
"@types/lodash.groupby": "4.6.9",
"@types/lodash.sortby": "4.7.9",
"@types/lodash.sum": "4.0.9",
"@types/lodash.sumby": "4.6.9",
"@types/lodash.truncate": "4.4.9",
"@types/node": "20.16.5",
"@types/react": "18.3.6",
"@types/react-dom": "18.3.0",
"ampx": "0.2.1",
"aws-cdk": "2.158.0",
"env-cmd": "10.1.0",
"eslint": "8.57.1",
"eslint-config-next": "14.2.11",
"eslint-config-prettier": "8.10.0",
"prettier": "3.3.3",
"typescript": "5.6.2"
},
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
"packageManager": "pnpm@9.10.0+sha512.73a29afa36a0d092ece5271de5177ecbf8318d454ecd701343131b8ebc0c1a91c487da46ab77c8e596d6acf1461e3594ced4becedf8921b074fbd8653ed7051c"
}
Hello @nam-truong-le, glad to hear this issue was resolved by updating packages. This would be the recommended fix, as the FileUploader missing styling was a bug that was fixed in the latest release.
I'm going to close this issue as resolved.
Before creating a new issue, please confirm:
On which framework/platform are you having an issue?
React
Which UI component?
Storage
How is your app built?
amplify gen2 nextjs template
What browsers are you seeing the problem on?
Chrome
Which region are you seeing the problem in?
Frankfurt
Please describe your bug.
Hi, I import amplify css like this:
Looks like it's working, Authenticator looks good:
But the FileUploader doesn't look like what I see in amplify ui docs. Can you have a look? Thank you:
What's the expected behaviour?
FileUploader should like this https://ui.docs.amplify.aws/react/connected-components/storage/fileuploader
Help us reproduce the bug!
I use https://github.com/aws-samples/amplify-next-template to generate my app.
Code Snippet
Console log output
No response
Additional information and screenshots