Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MateuszPe opened this issue Jun 3, 2024 · 6 comments
Labels
Hacktoberfest Label issues as available for participants of https://hacktoberfest.digitalocean.com

Comments

@MateuszPe
Copy link

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
`;

  1. Add newely created component to your application. e.g. to main App.tsx component.
  2. 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
Copy link
Member

derberg commented Jun 20, 2024

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

@rk3592
Copy link

rk3592 commented Jul 3, 2024

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

@AceTheCreator AceTheCreator added the Hacktoberfest Label issues as available for participants of https://hacktoberfest.digitalocean.com label Sep 30, 2024
@toshihirosatojp
Copy link

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

@ManikantaMandala
Copy link
Contributor

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

This doesn't solve the issue for me

@ManikantaMandala
Copy link
Contributor

ManikantaMandala commented Oct 1, 2024

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
Copy link
Contributor

catosaurusrex2003 commented Oct 16, 2024

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Hacktoberfest Label issues as available for participants of https://hacktoberfest.digitalocean.com
Projects
None yet
Development

No branches or pull requests

7 participants