Description
Problem:
It seems that the library doesn't really work with Vite? I'm trying to a setup encryption decryption class in one of my apps, and I'm getting weird errors in the browser after initialising the code.
Locally I'm getting
build_cryptographic_materials_cache_key_helpers.ts:15 Uncaught TypeError: Buffer.alloc is not a function
at build_cryptographic_materials_cache_key_helpers.ts:15:28
(anonymous) @ build_cryptographic_materials_cache_key_helpers.ts:15
I've also tried creating a Codesandbox to quickly reproduce the issue: https://codesandbox.io/p/sandbox/flamboyant-kowalevski-cmgymq
But it seems we're getting a different error.
Both errors are linked to using Node packages inside the Browser context (which doesn't work). I think some of the dependencies of this package import those and thus it fails.
Solution:
I'm not sure
Out of scope:
Someone else had this issue but posted the issue in the wrong place: https://crypto.stackexchange.com/questions/106579/issue-with-aws-encryption-sdk-for-javascript-in-browser-buffer-is-not-defined
Local project details:
{
"name": "patch-my-week",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"generate:component": "plop --cwd ./config/plop --dest ."
},
"dependencies": {
"@aws-amplify/ui-components": "^1.9.6",
"@aws-crypto/client-browser": "^4.0.0",
"@radix-ui/react-popover": "0.1.6",
"@radix-ui/react-progress": "^0.1.4",
"@react-aria/interactions": "^3.10.0",
"@react-aria/menu": "^3.10.0",
"@react-stately/collections": "^3.9.0",
"@react-stately/tree": "^3.7.0",
"@reduxjs/toolkit": "^1.9.3",
"@tippyjs/react": "^4.2.6",
"@types/luxon": "^2.3.2",
"aws-amplify": "^4.3.27",
"classnames": "^2.3.1",
"formik": "^2.2.9",
"framer-motion": "^6.4.3",
"lodash": "^4.17.21",
"phosphor-react": "^1.4.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-redux": "^8.0.5",
"react-router-dom": "6",
"react-toastify": "^9.0.5",
"styled-components": "^5.3.5",
"styled-system": "^5.1.5",
"yup": "^0.32.11"
},
"devDependencies": {
"@babel/eslint-parser": "^7.18.2",
"@honkhonk/vite-plugin-svgr": "^1.1.0",
"@redux-devtools/core": "^3.13.1",
"@types/eslint": "^8.4.5",
"@types/lodash": "^4.14.182",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/styled-components": "^5.1.25",
"@types/styled-system": "^5.1.15",
"@typescript-eslint/eslint-plugin": "^5.30.5",
"@typescript-eslint/parser": "^5.30.5",
"@vitejs/plugin-react": "^1.3.0",
"eslint": "^8.19.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-typescript": "^3.2.4",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"luxon": "^2.4.0",
"plop": "^3.1.1",
"prettier": "^2.7.1",
"sass": "^1.53.0",
"typescript": "^4.6.3",
"vite": "^2.9.9",
"vite-plugin-eslint": "^1.6.1",
"vite-plugin-svgr": "^2.2.0"
}
}