Not able to use this with Vite. How?

[fhareide]

I'm trying to use this package in a Vite project but get "Uncaught ReferenceError: process is not defined".

I have not found out how to use a version that work with Vite. Any help is much appreciated. And maybe it should be added to documentation?

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[magicmatatjahu]

@fhareide Hi! Thanks for the issue! Are you using Vite + React or Vite + another render lib/framework? Maybe there's a problem. How exactly are you using component - normal React component, component without parser or standalone component?

[fhareide]

Vite + react. I have tried all combinations I could think of. It's not totally clear to me how to set it up with the different methods.

[fhareide]

@magicmatatjahu Any news on this one?

[Ferror]

Hey! Wanted to let you know that I also struggle with the same problem. First thought it is the framework problem, but then I can't even make it work with webpack etc.

[Ferror]

@magicmatatjahu I used the next branch and created very simple usage for the Async API component and published it here. https://github.com/Ferror/asyncapi-component-vite The only thing that can be seen is an error below

Uncaught ReferenceError: process is not defined
    at node_modules/@apidevtools/json-schema-ref-parser/lib/util/url.js (url.js:3:29)
    at __require2 (chunk-6FBSFQRG.js?v=f184a0b1:18:50)
    at node_modules/@apidevtools/json-schema-ref-parser/lib/pointer.js (pointer.js:6:13)
    at __require2 (chunk-6FBSFQRG.js?v=f184a0b1:18:50)
    at node_modules/@apidevtools/json-schema-ref-parser/lib/ref.js (ref.js:5:17)
    at __require2 (chunk-6FBSFQRG.js?v=f184a0b1:18:50)
    at node_modules/@apidevtools/json-schema-ref-parser/lib/refs.js (refs.js:4:14)
    at __require2 (chunk-6FBSFQRG.js?v=f184a0b1:18:50)
    at node_modules/@apidevtools/json-schema-ref-parser/lib/index.js (index.js:4:15)
    at __require2 (chunk-6FBSFQRG.js?v=f184a0b1:18:50)

[meiyananthamp]

I am also facing the same issue.

[mr-nuno]

Any progress on this? Really want to migrate away from CRA.

[dansiemens1]

Also having this issue. CRA is no longer recommended by React so I imagine this will get more attention as time goes on.

Vite project but get "Uncaught ReferenceError: process is not defined".

To work around this part, I added to my vite.config.ts:

define: {
    'process.env': {},
},

However now I'm getting the error:

[constate] Component not wrapped within a Provider. constate.es.js:12:14

Example code:

const exampleContract = `
asyncapi: 2.6.0
info:
  title: Hello world application
  version: '0.1.0'
channels:
  hello:
    publish:
      message:
        payload:
          type: string
          pattern: '^hello .+$'
`;

export const ExampleComponent: FC = () => {
  return (
    <AsyncApiComponent schema={exampleContract} />
  );
};

Any further investigation done into this problem? @magicmatatjahu

[edwmurph]

i'm hitting this same issue and was able to workaround it with the following diff:

diff --git a/client/components/asyncapi.jsx b/client/components/asyncapi.jsx
index 7ffefd5..5a69107 100644
--- a/client/components/asyncapi.jsx
+++ b/client/components/asyncapi.jsx
@@ -1,5 +1,18 @@
+import { useEffect } from 'react';
+import AsyncApiStandalone from '@asyncapi/react-component/browser/standalone';
+
+// eslint-disable-next-line max-len
+const schema = '{"asyncapi":"2.4.0","info":{"title":"Account Service","version":"1.0.0","description":"This service is in charge of processing user signups"},"channels":{"user/signedup":{"subscribe":{"message":{"$ref":"#/components/messages/UserSignedUp"}}}},"components":{"messages":{"UserSignedUp":{"payload":{"type":"object","properties":{"displayName":{"type":"string","description":"Name of the user"},"email":{"type":"string","format":"email","description":"Email of the user"}}}}}}}';
+
 export default function AsyncAPI() {
+  useEffect( () => {
+    AsyncApiStandalone.render(
+      { schema, config: {} },
+      document.getElementById('asyncapi-component')
+    );
+  }, [] );
+
   return (
-    <div>asyncapi</div>
+    <div id='asyncapi-component'/>
   );
 }
diff --git a/client/index.jsx b/client/index.jsx
index cb26f0d..7fdba90 100644
--- a/client/index.jsx
+++ b/client/index.jsx
@@ -3,6 +3,7 @@ import 'primereact/resources/primereact.min.css';
 import 'primeicons/primeicons.css';
 import 'primeflex/primeflex.css';
 import 'swagger-ui-react/swagger-ui.css';
+import '@asyncapi/react-component/styles/default.css';
 import './global.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
diff --git a/package.json b/package.json
index 7fcb900..12abc35 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "lint:fix": "eslint . --ext .mjs,.jsx --fix"
   },
   "dependencies": {
+    "@asyncapi/react-component": "1.0.0-next.48",
     "@aws-sdk/client-s3": "3.363.0",
     "@koa/router": "12.0.0",
     "dotenv": "16.3.1",

but i don't think the styling of the render looks good so i probably won't move forward with asyncapi documentation at this time

[stewartmoreland]

Encountering the same error. Any updates?

Vite v4.3.9
React v18.2.0
Node v18.16.1

[mr-nuno]

Maybe all of you already has figured this out but you can use the standalone version of the component with vite.
"@asyncapi/react-component": "^1.0.0-next.44",

./src/global.d.ts
declare module '@asyncapi/react-component/browser/standalone';

./src/components/AsyncApiSpecification.tsx
export const AsyncApiSpecification: React.FC = () => { 
    useEffect(() => {
                    AsyncApiStandalone.render({
                        schema: '<specification-data>',
                        config: {
                          schemaID: 'custom-spec',
                          show: {
                            operations: true,
                            errors: true,
                          },
                        },
                      }, document.getElementById('asyncapi'));
    }, []);

    return (
        <div id="asyncapi"></div>    
    );
}

[dansiemens1]

@mr-nuno's answer is almost complete. This will display the asyncapi doc, but without any formatting. You need to go one step further to inject the CSS.

./src/components/AsyncApiSpecification.tsx

import asyncApiCss from '@asyncapi/react-component/styles.default.min.css'

...

return (
  <link rel='stylesheet' type='text/css' href={asyncApiCss} />
  <div id="asyncapi"></div>
);

[mr-nuno]

correct @dansiemens1, sorry about that :-)

[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 ❤️