[X] I have searched for existing issues that already report this problem, without success.
Liquid version
@emdgroup-liquid/liquid@4.7.1
Framework bindings
React
Current behavior
Unpopulated <LdBreadcrumbs /> component shows an error message (TypeError: Cannot set properties of undefined (setting 'current')) using the React binding and results in a crash using NextJS.
Suspected root of the issue:
/* due to length === 0 this ends up being crumbs[-1] */
crumbs[crumbs.length - 1].current = true
Fail gently, and possibly show an error message in the console, similar to how some libraries (such as MSW) handle these. Added a small example warning message in the sandbox:
Steps to reproduce
Set up a React-based project (or use the provided sandbox from the documentation)
Update Liquid version to latest (@emdgroup-liquid/liquid@4.7.1)
Import and combine the necessary components to build a breadcrumb trail
import {
LdBreadcrumbs,
LdCrumb,
} from '@emdgroup-liquid/liquid/dist/react'
Add breadcrumbs to any page or component within the application as described in the documentation
Remove the crumbs and leave the <LdBreadcrumbs /> empty
Prerequisites
Liquid version
@emdgroup-liquid/liquid@4.7.1
Framework bindings
React
Current behavior
Unpopulated
<LdBreadcrumbs />
component shows an error message (TypeError: Cannot set properties of undefined (setting 'current')
) using the React binding and results in a crash using NextJS.Suspected root of the issue:
Link to the code.
Expected behavior
Fail gently, and possibly show an error message in the console, similar to how some libraries (such as MSW) handle these. Added a small example warning message in the sandbox:
Steps to reproduce
@emdgroup-liquid/liquid@4.7.1
)<LdBreadcrumbs />
emptyCode reproduction URL
https://stackblitz.com/edit/github-w4j4rt?file=pages/index.tsx
Additional information
The issue is present wherever the
<ld-breadcrumbs>
component is used, not specific to React, but has been found using a React-based framework.