Uncaught TypeError: Cannot read properties of undefined (reading 'alloc') when using react with Vite

[MateuszPe]

Description

I am trying to use React component for rendering documentation. I cannot use it due to the problem with missing modules.
I created new application with create react app (I am aware that it is deprecated)

npm create vite@latest asyncApiProject -- --template react-ts

Then I installed asyncapi-react:

npm install --save @asyncapi/react-component   

I tried to use v20.13.1 or v18.20.3

package.json content:

{
  "name": "asyncapiproject",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@asyncapi/react-component": "2.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

Expected result

Application renders provided anyncapi definition.

Actual result

@asyncapi_react-component.js?v=ea97b21d:135394 Uncaught TypeError: Cannot read properties of undefined (reading 'alloc')
    at newBuffer (@asyncapi_react-component.js?v=ea97b21d:135394:25)
    at new BufferPool (@asyncapi_react-component.js?v=ea97b21d:135569:20)
    at node_modules/avsc/lib/utils.js (@asyncapi_react-component.js?v=ea97b21d:135390:16)
    at __require (chunk-G3QFXGXG.js?v=3b89d513:12:50)
    at node_modules/avsc/lib/types.js (@asyncapi_react-component.js?v=ea97b21d:136094:17)
    at __require (chunk-G3QFXGXG.js?v=3b89d513:12:50)
    at node_modules/avsc/etc/browser/avsc-types.js (@asyncapi_react-component.js?v=ea97b21d:138785:18)
    at __require (chunk-G3QFXGXG.js?v=3b89d513:12:50)
    at node_modules/avsc/etc/browser/avsc-services.js (@asyncapi_react-component.js?v=ea97b21d:141343:21)
    at __require (chunk-G3QFXGXG.js?v=3b89d513:12:50)

Steps to reproduce

1. Create application with npm create vite@latest asyncApiProject -- --template react-ts
2. Install asyncapi-react with npm install --save @asyncapi/react-component
3. Create new component AsyncApi.tsx:

import AsyncApiComponent from "@asyncapi/react-component"
import React from "react";

export const AsyncApi = () => {
    return <>
        <AsyncApiComponent schema={schema} />
    </>
}

const schema = `
asyncapi: '2.0.0'
info:
  title: Example
  version: '0.1.0'
channels:
  example-channel:
    subscribe:
      message:
        payload:
          type: object
          properties:
            exampleField:
              type: string
            exampleNumber:
              type: number
            exampleDate:
              type: string
              format: date-time
`;

4. Add newely created component to your application. e.g. to main App.tsx component.
5. Run application with npm run dev and try to render react component with asyncapi.

Troubleshooting

• I tried to use version v1.4.x and v2.0.0

[derberg]

Not much experience with vite here. We're you able to identify where is the issue coming from?

[rk3592]

you should use standalone component to fix this. We fixed in that approach only

[toshihirosatojp]

you should run "npm install buffer" to resolve this issue

[ManikantaMandala]

you should run "npm install buffer" to resolve this issue

This doesn't solve the issue for me

[ManikantaMandala]

you should use standalone component to fix this. We fixed in that approach only

With the standalone component is it not working for me

I'm getting

util.debuglog is not a function

but the util.debuglog is native function of Node.js
and I can use that in other file, same project

[catosaurusrex2003]

@MateuszPe
I think the issue here is that you are importing it from

import AsyncApiComponent from "@asyncapi/react-component"

instead import it from

import AsyncApiComponent from "@asyncapi/react-component/browser";

also dont forget to import the css

import "@asyncapi/react-component/styles/default.min.css";

source:- the setup in this is similar to what nextjs has. just the dynamic import part is specific to nextjs.

My App.tsx in vite for reference.

import "@asyncapi/react-component/styles/default.min.css";
import AsyncApiComponent from "@asyncapi/react-component/browser";

export const AsyncApi = () => {
  return (
    <>
      <AsyncApiComponent schema={schema} />
    </>
  );
};

const schema = `
asyncapi: '2.0.0'
info:
  title: Example
  version: '0.1.0'
channels:
  example-channel:
    subscribe:
      message:
        payload:
          type: object
          properties:
            exampleField:
              type: string
            exampleNumber:
              type: number
            exampleDate:
              type: string
              format: date-time
`;

function App() {
  return <AsyncApi />;
}

export default App;

---

Edit: i didnt notice it. but @rk3592 mentioned the same thing above.

you should use standalone component to fix this. We fixed in that approach only

the standalone component is found in the import path i have specified above

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️