aws / aws/aws-encryption-sdk-javascript
Buffer.alloc is not a function (Node.js func inside Browser context issue)
- Ngôn ngữ chính
- TypeScript
- Star
- 260
- Fork
- 68
- Merge trung bình
- 22 giờ 19 phút
- Pull request đã merge (30 ngày)
- 2
Mô tả
### 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
[//]: # (NOTE: If you believe this might be a security issue, please email aws-security@amazon.com instead of creating a GitHub issue. For more details, see the AWS Vulnerability Reporting Guide: https://aws.amazon.com/security/vulnerability-reporting/ )
Local project details:
```JSON
{
"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"
}
}
```
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu bằng cách tái hiện lỗi trình duyệt từ build_cryptographic_materials_cache_key_helpers.ts ở dòng 15, sử dụng CodeSandbox được liên kết và thiết lập Vite đã báo cáo. Truy tìm dependency nào cung cấp Buffer và xác định ranh giới bundling cho trình duyệt; hoàn tất khi bản build cho trình duyệt khởi tạo mà không có lỗi Buffer.alloc hoặc khi có một cấu hình được hỗ trợ và được tài liệu hóa.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- node.js, typescript, vite
- Lĩnh vực
- build-system, frontend, web-dev
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Cần làm rõ
- Mức phù hợp với người mới
- 35/100