"Error: Cannot read property '0' of undefined" when using react-component with NextJS

[acelaya]

Description

I'm trying to use this component inside a NextJS application. The component looks like this:

import React, { FunctionComponent } from 'react';
import dynamic from 'next/dynamic';

const AsyncApi = dynamic(import('@asyncapi/react-component'), { ssr: false });

const AsyncApiContainer: FunctionComponent = () => (
  <AsyncApi
    schema={{ url: 'https://raw.githubusercontent.com/shlinkio/shlink/v2.4.1/docs/async-api/async-api.json' }}
    config={{ showErrors: process.env.NODE_ENV !== 'production' }}
  />
);

export default AsyncApiContainer;

I can see the url being loaded in the browser developer tools, but once loaded I see this error:

I have also tried hardcoding the spec in the schema property, with the same result, so I think I may have some invalid property somewhere.

However, if I test that schema in the playground https://playground.asyncapi.io/, it doesn't throw any error and everything works.

I also see this warning in the browser's console, but I can't confirm it is related.

Expected result

The component properly loads in the UI, with no errors

Actual result

Error: Cannot read property '0' of undefined is displayed

Steps to reproduce

Use the code snippet above on a NextJS app

[acelaya]

I have tried with the bare minimum component, which is this, and it also throws the same error.

<AsyncApi schema={{ asyncapi: '2.0.0' }} config={{ showErrors: process.env.NODE_ENV !== 'production' }} />

[derberg]

I tested your schema with playground using latest version of react component, and it works fine https://asyncapi.github.io/asyncapi-react/

Have you seen the problem we have with next.js #177 ?

[acelaya]

Have you seen the problem we have with next.js #177 ?

Yes, but o think it's a different issue. In fact, I have commented there too.

I tested your schema with playground using latest version of react component, and it works fine https://asyncapi.github.io/asyncapi-react/

If it works there, then maybe the issue is because of the "dynamic import" workaround needed for NextJS.

I'll try on a different react app.

Do you know if there's any way I can debug what's the object from which is trying to read the property 0?

[derberg]

The only quick idea I have is that maybe we have a bug that we expect you to have Servers Object 🤷‍♂️ and you do not have it (you do not have to have if of course) but initially we might assume it is standard and everybody has one. Add it to your file and check out, or just test your code against https://raw.githubusercontent.com/asyncapi/asyncapi/2.0.0/examples/2.0.0/streetlights.yml

otherwise, best if you share your project somewhere on GitHub and we can jump there maybe 🤔

[derberg]

oh, wait, I'm stupid with Server Object 😄 it would not work with react playground then anyway 🤦

[magicmatatjahu]

I made a codesandbox app with your @acelaya schema and everything is good in pure browser-side react app https://codesandbox.io/s/asyncapi-react-component-in-action-forked-ik0ud?file=/src/index.js I am wondering, but probably that as you wrote, problem is with dynamic import. Do you have any objections to use our web-component as a workaround? Of course, we will investigate problem and when we fix it, we'll ping you :)

[acelaya]

Yep, I was also testing that. It works just fine on a create-react-app project, but using create-next-app + this dynamic thing, it does not work.

I'll try to investigate a bit more to see if I can find out what's the root cause. Maybe I can report it to NextJS if so.

The weird thing is that I was using @kyma-project/asyncapi-react with the same dynamic approach up until now, with no issues so far. If I'm not worng, that's how this library used to be called.

I'm also updating from NextJS 9 to 10 at the same time, so maybe that's the problem. I'll try other combinations and come back to you with my findings.

[derberg]

@acelaya awesome, waitin for news.

Regarding the component under the old scope, yes, you remember the name correctly, we changed it just recently. Right before switching scopes, we released version 0.16 with this https://github.com/asyncapi/asyncapi-react/pull/176/files. You can try @kyma-project/asyncapi-react prior 0.16 and with 0.16, just to make sure @kyma-project/asyncapi-react was always working well.

[magicmatatjahu]

@acelaya Do you remember old integration stuck in your app, I mean version of next and version of @kyma-project/asyncapi-react? It will be very helpfull for investigation (because you wrote that previous version worked). I created app with next: 9.5.5 and @kyma-project/asyncapi-react: 0.14.0 and I got this same error as you. I will try with another versions.

[acelaya]

The project is currently using these dependencies https://github.com/shlinkio/shlink-api-spec-ui/blob/v1.4.1/package.json

So, NextJS 9.3 and @kyma-project/asyncapi-react 0.5

I was updating all dependencies at once though. This afternoon I'll try other combinations to see when it break.

The project is running here https://api-spec.shlink.io/async-api/

[acelaya]

So, I have tested all minor versions of @kyma-project/asyncapi-react, since 0.5, in combination with NextJS 9.3, and only the first two seem to work. The rest throw different errors:

• Next 9.3 + @kyma-project/asyncapi-react 0.5 -> Works
• Next 9.3 + @kyma-project/asyncapi-react 0.6 -> Works
• Next 9.3 + @kyma-project/asyncapi-react 0.7 -> TypeError: Cannot read property 'scroll' of undefine (in Toggle component)
• Next 9.3 + @kyma-project/asyncapi-react 0.8 -> TypeError: Cannot read property 'scroll' of undefine (in Toggle component)
• Next 9.3 + @kyma-project/asyncapi-react 0.9 -> TypeError: Cannot read property 'scroll' of undefine (in Toggle component)
• Next 9.3 + @kyma-project/asyncapi-react 0.10 -> Module not found: Can't resolve 'fs' in '/shlink-api-spec/node_modules/webapi-parser'
• Next 9.3 + @kyma-project/asyncapi-react 0.11 -> Module not found: Can't resolve 'fs' in '/shlink-api-spec/node_modules/webapi-parser'
• Next 9.3 + @kyma-project/asyncapi-react 0.12 -> Module not found: Can't resolve 'fs' in '/shlink-api-spec/node_modules/webapi-parser'
• Next 9.3 + @kyma-project/asyncapi-react 0.13 -> Error: Cannot read property '0' of undefined
• Next 9.3 + @kyma-project/asyncapi-react 0.14 -> Error: Cannot read property '0' of undefined
• Next 9.3 + @kyma-project/asyncapi-react 0.15 -> Error: Cannot read property '0' of undefined

I'll try next all those with NextJS 10, but I think the result will be the same.

[acelaya]

Yep, same result with NextJS 10.

I have tried to check what changed between 0.12 and 0.13, where this error seems to start appearing, but I can't really tell by the diff v0.12.0...v0.13.2

Also, it could be that it was introduced earlier, but some of the other errors actually hid it. Or even the other way around.

Any ideas? Do you know what could have changed in those versions?

[magicmatatjahu]

@acelaya Thanks for info! I made dummy debug by console.log to check what's wrong and realized that problem is with this line in @asyncapi/parser https://github.com/asyncapi/parser-js/blob/master/lib/parser.js#L150 and "Error: Cannot read property '0' of undefined" is from above try{} catch{}. err object hasn't errors array so from there JS cannot read 0 index. Between v0.12.0...v0.13.2 versions we updated @asyncapi/parser package and inside this package we bumped @apidevtools/json-schema-ref-parser package (it's used for deference in schema and I know between those versions was breaking change and probably this is a major problem). I also created draft configuration for webpack, similar like in our web-component, but then if I load component by dynamic-import I have an error about minification throwed by react. In other case rollup throws errors about using internal node-native packages like fs, stream etc (used also in @apidevtools/json-schema-ref-parser package)... I'm still wondering how web-component works. Also I'm not expert for NextJS and don't know what actually dynamic-import works. Creating minified parser only for browser (without node-native modules) should helps. Sorry for problems. Do you have any objections to use web-component as a workaround?

I will also create small PR to console.error errors throwed by parser, because at the moment we only intercept error and show it in component and as we see this is not a good idea for debuging.

[acelaya]

Thanks for checking this @magicmatatjahu

I'll try with the web-component and see if it works.

I'll also try to dig a bit further later on the next/dynamic component, to see if I can figure out how it works.

Also, since you say you console.logged the error in @asyncapi/parser, were you able to see what was the error in the first place? The one that does not contain the errors property.

[magicmatatjahu]

@acelaya

and this error occurred inside @apidevtools/json-schema-ref-parser lib. It seems like NextJS treates url variable like native URL variable (with constructor) in dynamic-import. web-component somehow gets around it.

[derberg]

@acelaya hey, so how did it end up on your side? you use web-component or?

[acelaya]

I'm afraid I didn't get to try.

I think I started but I found some blocker. Not sure what was it though, it's been a while.

I'll give it another try.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[magicmatatjahu]

@acelaya Hello! Sorry for waiting, but please check this comment #177 (comment) It should fix your problem. Let us know if everything is ok. If you have questions, feel free to ask. :)

[acelaya]

Thanks @magicmatatjahu. I'm testing the solution in the comment, and it's looking good so far 🙂. Thanks!