Prototype kit errors

[andoyle]

Hey folks, I've been using the new prototyping kit lately and getting some errors that block me from continuing my work.

Not sure if it's me, CodeSandbox or Paste that's the problem. I don't know how to fix them anyway. Anyone else having these issues?

CodeSandbox:
https://6jzih.sse.codesandbox.io/

Couple of screenshots:

Console errors today:
Warning: Prop aria-labelledby` did not match. Server: "LogoTwilioIcon-33" Client: "LogoTwilioIcon-1"
in svg (created by LogoTwilioIcon)
in span (created by Context.Consumer)
in Box (created by IconWrapper)
in IconWrapper (created by LogoTwilioIcon)
in LogoTwilioIcon (at MastheadLogo.js:22)
in a (created by Context.Consumer)
in Box (at MastheadLogo.js:16)
in Link (at MastheadLogo.js:15)
in span (created by Context.Consumer)
in Box (created by MediaFigure)
in MediaFigure (at MastheadLogo.js:14)
in span (created by Context.Consumer)
in Box (created by MediaObject)
in MediaObject (at MastheadLogo.js:13)
in MastheadLogo (at Masthead/index.js:13)
in div (created by Context.Consumer)
in Box (at Masthead/index.js:12)
in div (created by Context.Consumer)
in Box (at Masthead/index.js:11)
in header (created by Context.Consumer)
in Box (at MastheadContainer.js:7)
in MastheadContainer (at Masthead/index.js:10)
in Masthead (at _app.js:31)
in div (created by Context.Consumer)
in Styled(div) (created by Provider)
in er (created by Provider)
in Provider (at _app.js:17)
in MyApp
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root
Warning: Each child in a list should have a unique "key" prop.

Check the render method of SideNavList. See https://fb.me/react-warning-keys for more information.
in SideNavDisclosure (at SideNavList.js:16)
in SideNavList (at Sidebar/index.js:14)
in nav (created by Context.Consumer)
in Box (at SideNav.js:7)
in SideNav (at Sidebar/index.js:13)
in div (created by Context.Consumer)
in Box (at SidebarContainer.js:9)
in SidebarContainer (at Sidebar/index.js:12)
in SideBar (at _app.js:33)
in div (created by Context.Consumer)
in Box (at SiteBody.js:6)
in SiteBody (at _app.js:32)
in div (created by Context.Consumer)
in Styled(div) (created by Provider)
in er (created by Provider)
in Provider (at _app.js:17)
in MyApp
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root
Warning: Failed prop type: Invalid prop aria-expanded of type boolean supplied to ForwardRef(_c), expected string.
Warning: validateDOMNesting(...):

cannot appear as a descendant of

.
in ol (created by Context.Consumer)
in Text (created by List)
in List (created by OrderedList)
in OrderedList (at pages/index.js:56)
in p (created by Context.Consumer)
in Text (created by Paragraph)
in Paragraph (at pages/index.js:54)
in article (created by Context.Consumer)
in Box (created by Card)
in Card (at pages/index.js:45)
in div (created by Context.Consumer)
in Box (created by Stack)
in div (created by Context.Consumer)
in Box (created by Stack)
in Stack (at pages/index.js:44)
in Home (at _app.js:35)
in main (created by Context.Consumer)
in Box (at SiteMain.js:9)
in SiteMain (at _app.js:34)
in div (created by Context.Consumer)
in Box (at SiteBody.js:6)
in SiteBody (at _app.js:32)
in div (created by Context.Consumer)
in Styled(div) (created by Provider)
in er (created by Provider)
in Provider (at _app.js:17)
in MyApp
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root
Warning: validateDOMNesting(...):

cannot appear as a descendant of

.
in p (created by Context.Consumer)
in Text (created by Paragraph)
in Paragraph (at pages/index.js:126)
in li (created by Context.Consumer)
in Text (created by ListItem)
in ListItem (at pages/index.js:124)
in ol (created by Context.Consumer)
in Text (created by List)
in List (created by OrderedList)
in OrderedList (at pages/index.js:113)
in p (created by Context.Consumer)
in Text (created by Paragraph)
in Paragraph (at pages/index.js:111)
in article (created by Context.Consumer)
in Box (created by Card)
in Card (at pages/index.js:101)
in div (created by Context.Consumer)
in Box (created by Stack)
in div (created by Context.Consumer)
in Box (created by Stack)
in Stack (at pages/index.js:44)
in Home (at _app.js:35)
in main (created by Context.Consumer)
in Box (at SiteMain.js:9)
in SiteMain (at _app.js:34)
in div (created by Context.Consumer)
in Box (at SiteBody.js:6)
in SiteBody (at _app.js:32)
in div (created by Context.Consumer)
in Styled(div) (created by Provider)
in er (created by Provider)
in Provider (at _app.js:17)
in MyApp
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root
Warning: validateDOMNesting(...):

cannot appear as a descendant of

.
in ol (created by Context.Consumer)
in Text (created by List)
in List (created by OrderedList)
in OrderedList (at pages/index.js:113)
in p (created by Context.Consumer)
in Text (created by Paragraph)
in Paragraph (at pages/index.js:111)
in article (created by Context.Consumer)
in Box (created by Card)
in Card (at pages/index.js:101)
in div (created by Context.Consumer)
in Box (created by Stack)
in div (created by Context.Consumer)
in Box (created by Stack)
in Stack (at pages/index.js:44)
in Home (at _app.js:35)
in main (created by Context.Consumer)
in Box (at SiteMain.js:9)
in SiteMain (at _app.js:34)
in div (created by Context.Consumer)
in Box (at SiteBody.js:6)
in SiteBody (at _app.js:32)
in div (created by Context.Consumer)
in Styled(div) (created by Provider)
in er (created by Provider)
in Provider (at _app.js:17)
in MyApp
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root`

[TheSisb]

Hi thanks for reporting this @andoyle,

I added a ticket to investigate in our backlog: https://issues.corp.twilio.com/browse/DSYS-2721. We'll report back when it is fixed.

[andoyle]

Thanks @TheSisb

[SiTaggart]

Hmmmm for what it's worth, when I opened the sandbox I didn't see any errors at all. Even clicking around and going from page to page. I think I clicked everything.

One thing to try if you haven't already is you switch the icon imports from esm to cjs. /esm/ to /cjs/

I've started to notice Next, even locally, isn't too hot on esm hot module reloading when developing.

[andoyle]

Thanks for taking a look! It's been happening sporadically so it's hard to put my finger on when/why it's happening.

I'll try the icon imports and see if that improves things.

[andoyle]

I changed the icon imports and that seemed to work but then I started getting the 117 error again.

A couple of things I noticed this time:

1. It didn't seem to like having components imported that aren't used within the page. This hasn't been an issue before but removing those imports seemed to help.
2. For some reason it didn't like a particular token I was using space60 - video below

117error-sm.mov

[gloriliale]

Hi @andoyle! We still have this as a ticket in our backlog, but we made some small updates and I was wondering if they've affected the the errors you encountered- have you had these same errors in the past two weeks?

[andoyle]

Hey @gloriliale I haven't noticed them as much lately. The odd time I get the -117 error but resolves itself after a refresh. No issue with the icons since changing the path.

Definitely not blocking me like it was a couple of weeks back.