Skip to content

Buffer.alloc is not a function (Node.js func inside Browser context issue) #1192

Description

@torgeadelin

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"
  }
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions