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