Codesandbox preview never updates the worker

[kettanaito]

Context

• #545

We have a CodeSandbox template used for all our opened pull requests:

https://github.com/mswjs/msw/blob/9373ccf5e699fd46406aadbb55580b4a833e4541/.codesandbox/ci.json#L1-L4

That template contains the mockServiceWorker.js file that's a part of the library but is not installed directly (needs to be placed in a public directory manually, or automatically by including the path in packageJson.msw.workerDirectory).

Expected behavior

The sandbox has the packageJson.msw.workerDirectory property set, which triggers MSW to copy the worker script from the currently installed library version (in this case a pull request preview's built) into the specified public directory.

https://github.com/mswjs/msw/blob/9373ccf5e699fd46406aadbb55580b4a833e4541/config/scripts/postinstall.js#L34-L36

Current behavior

The worker script is never updated, regardless of the sandbox configuration. This results in a pull request built being out of sync with the worker script changes.

Steps to reproduce

1. Go to the preview sandbox of this pull request (link in the comment below).
2. Open the public/mockServiceWorker.js file.
3. See that it has no changes done to this file in this pull request.

Things we've tried

1. Setting "template": "node" in our sandbox.config.json (seems to be applied when editing the config file in the editor, the UI shows "Angular" as the selected option for some reason).

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7be34904e7931a1d1853588c06bcdcafdf46179d:

Sandbox	Source
MSW React	Configuration
MSW React	PR

[kettanaito]

Setting the "template" of the sandbox to "node" did not help, and the sandbox still doesn't call the "postinstall" script, as the worker file is outdated.

[CompuIves]

I'm on vacation right now but I have time next week! Just to be sure, does the package.json actually get updated? Does it have the new property in the generated sandbox?

[kettanaito]

Hey, @CompuIves. Thank you for all the help you've already given and for a chance to look into this once more.

Just to be sure, does the package.json actually get updated?

It doesn't need to be updated, as it always points to the correct public directly, which doesn't change between pull requests:

{
  "msw": {
    "workerDirectory": "public"
  }
}

This always equals to "public". This tells MSW to copy the worker script to the msw.workerDirectory on the postinstall script.

I think what doesn't happen is either the postinstall script or the copying. I'm leaning toward the former. Perhaps there's something wrong with how the absolute worker path is resolved in the sandbox?

[kettanaito]

Just to be sure, does the package.json actually get updated? Does it have the new property in the generated sandbox?

The property in the package.json shouldn't get updated, it always points to the same worker file. It's the file that should change by executing the CLI command on the postinstall hook.

As I understand, Codesandbox uses the repository's state at the certain commit to build and use it in the sandbox. The worker's file contents are updated, as you can see in the changes of this pull request.

@CompuIves, I'm sorry to trouble you, but did you have some time to look into this? I feel this can be something trivial, yet we'd appreciate your support.

It comes down to a single question:

• Can Codesandbox execute postinstall (and similar) NPM hooks that affect the sandbox's files?

The script that needs to run when installing a certain version of this package copies the worker file into a directory relative to the project where that script was run (located in packageJson.msw.workerDirectory). The directory is specified in the template correctly, it's not meant to be changed. The worker file, however, does not get updated according to its contents pushed to a pull request. This makes me suspect that the script is never truly executed.

[CompuIves]

I'm sorry to trouble you, but did you have some time to look into this? I feel this can be something trivial, yet we'd appreciate your support.

No worries! Looking at it now.

Can Codesandbox execute postinstall (and similar) NPM hooks that affect the sandbox's files?

Within the sandbox itself it can't, unless it has the node template. Normally we execute all sandboxes in the browser, but when the template is node we actually run the code on a Docker container, meaning that we run exactly like local (and run postinstall scripts). You can do this by creating a sandbox.config.json in the example sandbox and putting the contents:

{
  "template": "node"
}

The original sandbox will not get the node template yet (this is a quirk that we have right now), but if you create a new commit in this pull request the sandbox based on the original one will actually be node.

An example node sandbox can be found here: https://codesandbox.io/s/node.

I hope this helps!

[kettanaito]

@CompuIves, thank you for the suggestions!

We do use template: "node" in our sandbox.config.json: https://codesandbox.io/s/msw-react-xx1c8?file=/sandbox.config.json, but that does not fix the issue—the postinstall script of msw is not run how it's run when installing that package locally. The template was set to "node" before I created this pull request and pushed the first commit to this branch so it shouldn't be affected by that quirk you've mentioned.

Please, can there be anything else? Is there an example of a sandbox that executes a postinstall script that we can see?

[CompuIves]

Ah I completely missed this notification, apologies for the late reply! I think this is a bug in our system, because it seems like while the template is set to node, it actually isn't node. I'll manually update that now and then it should work!

[CompuIves]

Updated it! There's still one issue with the node version, but you can change the sandbox.config.json to set the node version to a later version.

[kettanaito]

@CompuIves, thank you for looking into this! The node template is indeed working as expected now. I can see the worker file updated when updating the msw dependency via Codesandbox UI.

However, the pull request sandbox still doesn't generate the updated public/mockServiceWorker.js according to the changes. I'm pushing a new commit just to be sure.

[kettanaito]

I confirm that the pull request build doesn't update the worker, despite the source file being updated in the new commits. @CompuIves, please, what would you recommend to debug this further? Can we get access to the sandbox's build logs to see if the worker copying is indeed done? We could push some additional logging to investigate.

[kettanaito]

I've removed the CodeSandbox integration for now until we address this. I may as well try using Projects instead. Closing.