asyncapi-react: React component does not work when exported from node_modules/@asyncapi/web-component/lib/asyncapi-web-component.js

Description I am trying to use react component in my nodeJs (ejs) application.

<script src="<%= rootPath %>/vendors/asyncapi/web-component/lib/asyncapi-web-component.js"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

ReactDOM.render(
            React.createElement(AsyncApiWebComponent, {
                      schema,
                    }
            ),
            document.getElementById('swagger-ui')
    );

Am I missing something? I am mostly back-end developer and do not have much experience with react. Any suggestions would be appreciated.

Thank you so much

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 17 (7 by maintainers)

Most upvoted comments

I am extremely glad that schemaUrl is in demand among people. 😁

aeworxet on Jan 24, 2021

@magicmatatjahu thank you so much. schemaUrl works like a charm with "@asyncapi/web-component": "^0.19.0" Thanks again @derberg @magicmatatjahu and have a great weekend 😃

rols2015 on Jan 22, 2021

@magicmatatjahu thank you. I tried your code yeterday with no luck. I found a better solution using schema.url The below code works fine for me, however when I tried schemaUrl it was ignored. The problem related with empty url was related that code was executed before url was specified. (defer attribute)

    function renderAsyncApi(){
      var element = document.createElement("asyncapi-component");
      element.setAttribute('style', 'width: 100%');
      element.setAttribute('cssImportPath', '<%= rootPath %>/vendors/asyncapi/react-component/lib/styles/fiori.css');
      element.setAttribute('schema', '{"url":"https://myhost.images/c8389094-3b6b-4862-b7f8-76acffc08bef.json"}');
      element.setAttribute('schemaFetchOptions', '{"method":"GET","mode":"cors"}');
      document.getElementById('swagger-ui').appendChild(element);
    }

rols2015 on Jan 22, 2021

@rols2015 great!

The below code works fine for me, however when I tried schemaUrl it was ignored.

schemaUrl is added today in this commit https://github.com/asyncapi/asyncapi-react/commit/aa0a6da813dc45d0d8c400d104895b7c3a5e3040 If you could, try schemaUrl with version 0.19.0 of our component 😃

EDIT: I see your previous comments, sorry 😄

magicmatatjahu on Jan 22, 2021