[bug]: Uncaught Invariant Violation: You must pass a component to the function returned by connect. Instead received undefined

[brendanfalkowski]

Describe the bug
A clear and concise description of what the bug is.

Occasionally, with a dev server running like yarn run watch:falkowski a code change forcing a hot-reload will trigger this error:

Uncaught Invariant Violation: You must pass a component to the function returned by connect. Instead received undefined

Which traces into the client.js file (I think, will update if I see it again).

Hard refreshes don't fix it, but quitting and restarting the watcher works (every time). Everything is fine for a while, then it'll randomly happen later. Not sure why.

To Reproduce
Steps to reproduce the behavior:

Not sure exactly. Have a watcher running, and write code. It only happens during a hot-reload (not launching a server).

Expected behavior
Hot-reloading stays hot and reloading.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Reference to Slack thread: https://magentocommeng.slack.com/archives/C71HNKYS2/p1566412835381800?thread_ts=1566411734.381300&cid=C71HNKYS2

For me, it occurred working on the create-account route.

In Slack, others mentioned it seems to occur on Root Components.

Possible solutions
Add any ideas about possible solutions to the problem here.

Please complete the following device information:

• Magento Version: 2.3.2
• PWA Studio Version: August 12 (am) 2019
• NPM version npm -v: 6.9.0
• Node Version node -v: 10.16.1

Please let us know what packages this bug is in regards to:

• venia-concept
• venia-ui
• pwa-buildpack
• peregrine
• pwa-devdocs
• upward-js
• upward-spec

[brendanfalkowski]

Possibly related to circular dependency or wrong default import between components: https://haodong.io/redux-testing-invariant-violation-error

[sirugh]

To add to this, I was also getting this error when changing ProductFullDetail which is imported by Product, a RootComponent.

[brendanfalkowski]

Just reproduced it, here's the error:

And exactly what I did beforehand:

1. Restarted my watcher.
2. Page loaded fine.
3. Edited packages/ce/src/components/CreateAccountPage/createAccountPage.js
4. Code change: added our <Heading> component as an import, and used it to add an H2.
5. Saved.
6. Hot-reloader hanged.

[zetlen]

This is maybe a harder problem to solve, but it's probably solvable with some carefully chosen breakpoints. You'll need:

• The Chrome debugger
• The React developer tool extension

[brendanfalkowski]

Retested after updating to PWA Studio 4.0.0 + dependencies in our project. The errors are slightly more informative now (probably the React version bump), but the issue still occurs.

The workaround (just restart the watch process) is fast enough that I probably can't justify tracing it short-term until patience hits zero.

[zetlen]

Thanks for the update. This might be an incompatibility between Redux connect() and lazy-loaded React classes. This shouldn't normally happy, because connect() should be called synchronously at class definition. But if you need to late-bind connect(), I found this article with a method:

https://medium.com/front-end-weekly/the-power-of-redux-and-react-lazy-bdeb21028f43

[tjwiebell]

@brendanfalkowski - Sounds like this is low priority for you, but was curious if you could help with some additional repro detail. This error looks familiar, but I haven't seen it pop up in the last couple weeks, so I'm curious if it was resolved by a component re-factor in the latest develop line.

[brendanfalkowski]

@tjwiebell — If I'm roughing out UI for 6 hours, hot-reload errors probably cause me to restart the watch process 25-75x. Most days I probably lose 10-20 minutes to restarting the build.

The workaround is easy and always works (restart the build) so it's high-annoyance but low-priority for me to spend time on — only because it looks like tooling's domain and looks like a rabbit hole.

Over PWA 2.x, 3.x, and 4.x the errors logged to devtools have changed, but the behavior causing it has always been similar. I just can't justify the time to chase each variant when I know restarting the build gets me back to work, and it'll probably change in PWA 5.x or maybe get fixed forever.

My current MO is getting modules into QA, and this problem seems (so far) to only affect the watch command (i.e. developers) and not the stage command (i.e. users). So I'm choosing to be patient with it.

I can reproduce the two most common errors at the drop of a hat by simple combinations of adding an import, using an unused import, or removing an import while the watcher is running.

I've just learned to stop the watcher, add my imports, use them, then restart the watcher when I'm roughing out UIs. That's the good DevEx currently.

Attached two videos showing the most common issue (memory leak):
https://share.getcloudapp.com/12uEjmP4

And a new one I haven't seen before:
https://share.getcloudapp.com/WnuAW9kQ

[sirugh]

@brendanfalkowski is that second video one of you editing a RootComponent?

I tried making almost identical changes to the Product RootComponent and I could not get it to throw in the same manner :(

Edit:

I was able to repro the staticContext error with the changes from this comment (using a Button instead of Heading. Steps listed below. Interestingly though, after checking out the changes to our Routing and making the below changes, I no longer see an error but I see what is basically a non-functional page.

Specifically:

1. Navigate to /create-account
2. Open createAccountPage.js
3. Add import Button from '../Button' and <Button>Foo</Button>
4. Save above changes and the error should display.

react-dom.development.js?7020:545 Warning: React does not recognize the `staticContext` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `staticcontext` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in button (created by Button)
    in Button (created by Context.Consumer)
    in Route (created by App)
    in Switch (created by App)
    in Suspense (created by App)
    in div (created by Main)
    in main (created by Main)
    in Main (created by App)
    in HeadProvider (created by VeniaHeadProvider)
    in VeniaHeadProvider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by AppContainer)
    in AppContainer
    in ToastContextProvider (created by contextProvider_ContextProvider)
    in WindowSizeContextProvider (created by contextProvider_ContextProvider)
    in CheckoutContextProvider (created by ConnectFunction)
    in ConnectFunction (created by PeregrineContextProvider)
    in CartContextProvider (created by ConnectFunction)
    in ConnectFunction (created by PeregrineContextProvider)
    in CatalogContextProvider (created by ConnectFunction)
    in ConnectFunction (created by PeregrineContextProvider)
    in UserContextProvider (created by ConnectFunction)
    in ConnectFunction (created by PeregrineContextProvider)
    in AppContextProvider (created by ConnectFunction)
    in ConnectFunction (created by PeregrineContextProvider)
    in ErrorContextProvider (created by ConnectFunction)
    in ConnectFunction (created by PeregrineContextProvider)
    in PeregrineContextProvider (created by contextProvider_ContextProvider)
    in contextProvider_ContextProvider
    in Route (created by MagentoRouter)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by MagentoRouter)
    in MagentoRouter (created by VeniaAdapter)
    in Provider (created by VeniaAdapter)
    in ApolloProvider (created by VeniaAdapter)
    in VeniaAdapter

[sirugh]

Looks like the staticContext warning is "resolved" in #1966 except it still breaks (shows a shell of button and no text).

[brendanfalkowski]

Both videos are editing a root component (brendan.js) but similar errors occur when adding/using imports for any component in my experience.

The "hot-reload leads to empty shell w/ header/footer but no content and no console/devtools errors" issue happens sometimes too. I haven't paid enough attention to spot the sequence that causes it though.

[sirugh]

@brendanfalkowski check out the PR. 🙏 Hoping it fixes the issue for ya!