`getNode` returns undefined after HMR runs

Reproduction

N/A

Describe the bug

This is unfortunately not reproducible in the playground as it depends on scenarios you can’t hit there, but I’ve run into this same issue in two different instances now.

In one case I see this any time Vite does a HMR on my starter project that uses the stepPlugin from this multi-step form example. I’ve reproduced it using @andrew-boyd’s example as-is and with my own modified version of the plugin. In both cases the call to getNode in the code that tries to walk nodes to trigger validation returns undefined. This does not happen with a full page refresh, only after a dev HMR.

The other case I am seeing the same thing is when trying to package and load this as a Vue component built with Vite’s library mode. This is experimental as well but just looking for a good way to make this reusable across other projects, so I was able to package and deploy it without issue, and it loads the initial form without issue, but as soon as I click the Next button and it tries to walk the nodes we hit the undefined response from getNode again (this time without any HMR). Note that I’ve validated the node name it’s looking for is correct.

That project is here: https://github.com/totalhack/formkit-multistep

You can do an npm install of formkit-multistep into a project, add import { FormKitMultiStep } from 'formkit-multistep' into your App.vue, and then pass it a schema prop as is done in my modified version of the multi-step form example – see this for a dev example within the formkit-mulistep repo, but note that that won’t reproduce it because its loading FormKitMultiStep from the local component instead of the npm module. Perhaps this is some ESM issue like what’s described in this issue?

Is there perhaps some pre-req step required to ensure whatever getNode is doing under the hood has knowledge of all nodes, which perhaps is not running (or getting cleared out) on HMR? Not sure if the ESM thing is a separate issue.

EDIT: I stepped through this a bit with the debugger and confirmed the global registry is empty after HMR. Perhaps something needs to recreate/reinit the nodes on a hot reload?

Environment

• OS: Mac OS • Browser: Chrome / Firefox • Version: Latest

[justin-schroeder]

Perfect, thanks for the repro. Yeah interesting, looks like HMR is messing with it somehow. If I was to guess, I’m betting that HMR mounts the new component before unmounting the old one, so when the old one unmounts it takes the reference out of the registry with it.

Not sure what the best way around that is, but its worth looking into for sure.

[totalhack]

Hey @justin-schroeder, just wanted to let you know I at least have a very lightly tested workaround that addresses the HMR situation, though not by fixing any underlying issue with getNode.

Basically instead of using getNode, in the useSteps.js plugin I tracked the node objects for the steps. This is updated in version 0.0.2 of https://github.com/totalhack/formkit-multistep so I can keep playing around without hitting the HMR issue at least.

// in stepPlugin:
steps[node.name].node = node;

// in the code that looks for step nodes to validate
const node = steps[currentStep].node

Surprisingly I still get the undefined node issue when loading this from an npm-installed component even with the new approach. Any known issues I should be aware of with packaging formkit as part of a vue component? I added more debug prints (into v0.0.3) and when the component is loaded from the npm module the useSteps plugin init never seems to get called. I know the code is there from inspecting the dist build files, and get some prints on clicking Next from functions within useSteps before it hits the undefined node issue, but the plugin is never initialized so the latter is not surprising.

My guess is this has something to do with the “$plugins” value on the schema not finding anything, even though I’ve verified that value exists on the mergedData value being passed into <FormKitSchema :schema="schema" :data="mergedData" />. Apologies if this is getting a little hairy/specific to my use case, but it’s still unclear to me if I’m doing something wrong or hitting a bug in the schema stuff. Is there any debug capability I can enable on the FormKitSchema node such that it will dump out what context it has available on init?

const schema = [
  {
    $cmp: 'FormKit',
    props: {
      type: 'form',
      id: 'form',
      onSubmit: '$submit("https://httpbin.org/post")',
      plugins: '$plugins',
      actions: false, 
    },

EDIT: it also occurs to me that if this ever used minified code that the name of the plugins value on data in the FormKitMultiStep component may change and then the reference on the schema would break. I might need to look into exporting the plugin with the component just to pass it back in on component init I guess if that’s the case.

EDIT: my workaround of getting node references in plugin init is working in my npm module now too, was an error on my end when updating that package. So there is still this underlying getNode HMR issue, but I think I got everything working on my end working around that.