solidjs / solid-refresh

MIT License
86 stars 18 forks source link

Context Provider - HMR Reload #24

Closed cbs-l closed 11 months ago

cbs-l commented 2 years ago

Describe the bug

When wrapping a context provider in another component with a store there is an issue where the following error would be thrown in the console.

nested.tsx:4 Uncaught (in promise) TypeError: useCounter is not a function or its return value is not iterable
    at Nested (nested.tsx:4:45)
    at @solid-refresh:10:42
    at untrack (dev.js:421:12)
    at Object.fn (@solid-refresh:10:28)
    at runComputation (dev.js:691:22)
    at updateComputation (dev.js:676:3)
    at createMemo (dev.js:238:10)
    at hmrCompWrapper (@solid-refresh:7:20)
    at dev.js:515:12
    at untrack (dev.js:421:12)

If you make changes to nested or the app file HMR works correctly. However wrapping the Context Provider seems to create some issue with HMR.

You can unwrap the Counter Provider and then HMR seems to work fine. Only when wrapping does this seem to be an issue.

To reproduce use the code from the following on your local machine and just run dev and make changes to the counter file after you have loaded the page beforehand:

https://www.solidjs.com/tutorial/stores_context?solved

image

Your Example Website or App

https://www.solidjs.com/tutorial/stores_context?solved

Steps to Reproduce the Bug or Issue

  1. Create repo local solid instance and use the files from: https://www.solidjs.com/tutorial/stores_context?solved
  2. Load up on localhost:3000
  3. Change something in the counter file
  4. View console log in the browser

Expected behavior

As the user I would expect this to either load up the initial state or previous.

Screenshots or Videos

No response

Platform

Additional context

No response

skyrpex commented 2 years ago

An interesting behavior is that the components that call useContext() receive an undefined context once, but then they re-render with the proper context. In the following example, I had three components that use the context (and log it to the console). Upon changing the source code once, they rendered twice as follows:

image
jessegood commented 2 years ago

This is the same issue as https://github.com/solidjs/solid-refresh/issues/15

ryansolid commented 11 months ago

This issue appears to be fixed. Please create a new issue if you encounter it again.