Sandpack not working for React Environment about sandpack HOT 7 CLOSED

Same problem, since yesterday...
We're trying to figure out what's happened

from sandpack.

@theashishmaurya we have forked the repo, made several patches (with pnpm patches) for our needs (so we didn't made PRs) and we're using our CDNs but if we find the error I'll report here for sure.

The weird part is that:

1. the SandPack website has the same problem
2. we use our CDNs but we have the same error since yesterday. So we probably forgot to move something on our CDNs 🤔

First of all we need to understand WHERE is the issue but currently we have no idea 😅
We'll work on this in the next hours / days

from sandpack.

My bad! I made a silly mistake on the last sandpack version.
It should be fixed in a couple of minutes in the next release version

from sandpack.

Been facing this issue, I am not sure if any one is working on this or not.

from sandpack.

@fabiobiondi I am also looking into this as of now, will share my finding here, if possible try to make a pr with the solution.

from sandpack.

from sandpack.

Sure! Basically, I misplaced the spread operator within the object configuring the Sandpack bundler. This mistake led to an unexpected behavior inside the bundler due to the overwriting of default values.

This caused the error:

this.dispatch({
  type: "compile",
  // other properties I omitted for now
  externalResources: this.options.externalResources || [], 
  sandboxId: this.options.sandboxId,
  ...this.options, // 👈 
})

The spread operator (...this.options) was placed after all the property assignments and their defaults. As a result, the new spread overwrote all defaults set above because this.options also contained externalResources property and it's very likely that it was undefined.

Here's two example, one buggy and the another correct:

// 🐞 buggy implementation
const options = {
  externalResources: undefined
}

const foo = {
  externalResources: options.externalResources || [], 
  ...options
}

foo.externalResources // undefined 

And here's the correct implementation, which ensure to keep the default values:

// ✅ Correct
const options = {
  externalResources: undefined
}

const foo = {
  ...options,
  externalResources: options.externalResources || [], 
}

foo.externalResources // [] 

Hope it helps!

from sandpack.