React SDK custom bindings don't execute within StackBlitz VM

Bugs
1

I’ve created a React SDK bug repro template: GitHub - buildquick/builder-repro-react. The idea is that you can duplicate the template, make some modifications to reproduce an error you’re encountering while using the React SDK, and share your results with Builder’s team, this forum, or a BuildQuick Expert.

In an ideal world, users should be able to follow the instructions in the repo README, spin up a new dev environment in StackBlitz, and share the link with anyone.

However, for some reason, I run into this kind of error in the server terminal when loading a Builder page using my template within StackBlitz, which doesn’t happen on my local dev environment:

Builder custom code error: Should not happen in var _a,_virtual_index=(null===(_a=state.project)||void 0===_a?void 0:_a.image)||"https://via.placeholder.com/800x600.png?text=Placeholder+image";return _virtual_index VMError: Should not happen

In general, this is an error coming from the React SDK, and on the server, it can only occur when:

  1. You’re running the dev server with the DEBUG=true environment variable set (otherwise, the error won’t show).
  2. A data binding, action, or animation fails to execute within the Node VM created by the React SDK during SSR.

In the case of my template, and in the sample error above, it’s a data binding that’s failing to execute. Here’s the relevant code from the SDK where it’s failing: builder/string-to-function.ts at 0c98b27cd2fc5cad4d916b1cee7836ea3a4d6bb3 · BuilderIO/builder · GitHub

My question is, why does this fail specifically in StackBlitz? The error is beyond vague: Should not happen. I searched the Builder open source repo for this error and didn’t find one. I’m pretty sure it has something to do with the VM and possibly how StackBlitz implements a Node VM within the browser.

Has the team encountered a similar error when hosting inside of StackBlitz? Is there something obviously wrong in my configuration?

You can still use the template by deploying locally, but I think that it would be a huge win for the community if we could get this working within StackBlitz so that repro cases can be shared with just URL.

Steps to reproduce:

  1. Follow the instructions at GitHub - buildquick/builder-repro-react, creating your own development environment by forking the template’s StackBlitz environment.
  2. Look at the server terminal.

- or -

  1. Go here: Builder React SDK repro template (new forked) - StackBlitz
  2. Look at the server terminal.
2

So I dug into this for a bit but was not able to find anything useful.

The error comes from VM2 not from React SDK. (I see that you already have the latest version of VM2) From what I can tell the VM2 is trying to set up a sandbox in StackBlitz and it fails one of its own invariants. (As in the VM2 author thinks that the check should never fail, and yet it did. Hence the error is so vague.)

I agree with you that this would be very cool to have. I will file an issue with VM2 repo and use your code as a reproduction. Hopefully, we can get a response from them.

1 Like
3
1 Like
4

Thanks for looking into this, @Misko, and filing an issue upstream. Looks like vm2 is labeling your issue as WONTFIX, unfortunately.

I heard a rumor that maybe you guys are going to do away with the dependency on vm2 altogether since certain hosting providers (e.g., Vercel) strip out vm2 from deployments. Is that correct?

5

I know nothing about Vercel.

I did reach out to the StackBlitz team to see if they can fix it.

1 Like