Codesandbox-client: Request failed with status code 422

[ryanpcmcquen]

🐛 bug report

Description of the problem

How has this issue affected you? What are you trying to accomplish?

I am trying to load and hack on my repo (https://github.com/SurLaTable/slt-ui/tree/feature/fix-codesandbox) using CodeSandbox.

Link to sandbox: link (optional)

Your Environment

| Browser: Chrome |

I get a 422 error ... I am not sure why. This only happens with branches that have a / in them.

[ryanpcmcquen]

@CompuIves, any ideas on this?

[ryanpcmcquen]

Is there a way to have CodeSandbox point to a specific entry point?

[CompuIves]

Hey! I can't open the GitHub repository, could that be the reason that CodeSandbox has trouble importing it? This is giving a 404: https://github.com/SurLaTable/slt-ui/tree/feature/simpler

[ryanpcmcquen]

I am no longer able to reproduce this (even with the old commit that I was using). Is there a way for CodeSandbox to read some package.json attribute that points to custom index.js only intended for CodeSandbox?

[ryanpcmcquen]

@CompuIves, I am getting the error again, it must have to do with the slash in the branch name:
https://codesandbox.io/s/github/SurLaTable/slt-ui/tree/feature/fix-codesandbox

[ryanpcmcquen]

@CompuIves, it is definitely the slash in the branch name. Can we improve branch parsing to escape the slashes? I was digging around for the parser but couldn't find it.

[CompuIves]

Yep, that definitely could be it. We need a better way to detect the branch, we do that here currently:

https://github.com/codesandbox-app/codesandbox-importers/blob/master/packages/git-extractor/src/index.ts#L35

[ryanpcmcquen]

I don't see an example of escaping / in the koa-router docs, so I created an issue there:

https://github.com/alexmingoia/koa-router/issues/469

[bobziroll]

@CompuIves I'm also receiving this error, but it only happens when I try to submit a PR via CodeSandbox. No slash in the URL for this one. Only happens for some repos, e.g.:

Student 1's toy project - Github
Student 1's toy project - CSB

Student 2's toy project - Github
Student 2's toy project - CSB

[bobziroll]

The CSB links in my above comment won't work anymore because we were able to get the PR functionality to work, but now it seems very spotty (most of the time it fails with a 422 error again). I haven't been able to figure out what steps make it work. I'll probably open my own issue for this.

[JustinTBrown]

I am receiving 422s when exporting to GitHub as well.

[bobziroll]

I'm getting them (seemingly randomly) again too. Here's the sandbox I'm trying to submit a PR for:

https://codesandbox.io/s/3048m4orv6

Please let me know if there's been anything diagnosed for this, because it's making it really hard to use it in the way we want at our school.

[bobziroll]

Update: it seems like any repository that contains a React app (bootstrapped with create-react-app) seems to have no issues at all with the PR feature. On the other hand, static websites seem to have the highest likelihood of getting the 422 error. I'll update this message if I find out more info that might help diagnose the problem.

Update: Just tried a static web page again (with and without changing the template to "Vanilla" in the sandbox.config.js file) and got a 502 error for both. Not sure why it's giving a 502 now instead of a 422 like it was before though.

[CompuIves]

Hey @bobziroll, I can't seem to access the sandbox you linked here. Is it private perhaps?

[bobziroll]

@CompuIves Shoot, I've since deleted it because I was testing out steps to fixing it. Sorry!

Relating to testing what causes this - I seriously can't figure out any consistent pattern that causes the 422 error when trying to create the PR. I ran through the following steps:

1. Have 2 computers side-by-side, each logged in to a different Github account
2. Import a sandbox from a Github url (both computers importing the same code)
3. Fork the sandbox, make a trivial change somewhere, and save the file
4. Open the Github menu on the left, fill in the fields, and attempt to submit the PR.

On one of the attempts, both computers worked in creating a PR. On another attempt, one computer worked while another didn't. On the computer that didn't work, I logged out of their sandbox and github and logged into mine, then tried again and it worked fine. Then, (thinking it had something to do with my Github account and wanting to test that theory), I logged out of my Github/sandbox accounts and back into _their_ accounts (assuming it wouldn't work and my theory would be validated), but this time the PR creation worked just fine! So I'm back to having 0 working theories as to what is causing the 422 error.

[reflash]

Same problem. I have a React App and once I try to export it to GitHub repo I get 422 error

[subtleGradient]

Same problem here.
Here's my sandbox: https://codesandbox.io/s/km0p41o9jo

[simplywondrous]

My issue was different than the above cases, but I was also getting a 422 error (it seems to occur when you try to create a Github Repo when you already have one with the same name), so I hope this is helpful to someone:

For a while I'd make a sandbox, export it to Github, then when redirected, be confused as to why the sidebar no longer showed and try to re-access the sandbox from my account dashboard... where the Github tab would ask to Create Repository and I'd try to make the repo again only to encounter an error as there would already be a repo named the same name under my account (created when I exported it the first time).

Steps:

1. Create a new React Sandbox and save (sandbox will be forked, and be something like "https://codesandbox.io/s/r53x69n3zm")
2. Export to GitHub - name it REPO_NAME, and click Create Repository
3. Repo will be created, and page redirects to "https://codesandbox.io/s/github/{USERNAME}/{REPO_NAME}/tree/master/". Left Sidebar (Project Info, File Editor, etc) will not be shown.
4. If you now go back to your account dashboard and access that same repo again(r53x69n3zm), the Github sidebar tab will ask you once again to Create Repository, and if you use the same REPO_NAME a 422 error will result.

Solution:
The solution for me was realizing I needed to save once again once I was at "https://codesandbox.io/s/github/{USERNAME}/{REPO_NAME}/tree/master/", and that would fork it and give me yet another new sandbox - "https://codesandbox.io/s/zn51vz9kkm". This new repo would then be connected to the Github repo. I'd then delete the non-exported (r53x69n3zm) sandbox.

[lbogdan]

Hey @ryanpcmcquen , is this still an issue?

If so, can you please provide a sandbox / github link experiencing this? (all the ones I tried from the OP and comments don't seem to work anymore)

If not, can you please close it? Thanks!

[ryanpcmcquen]

@lbogdan, here is one: https://codesandbox.io/s/github/SurLaTable/slt-ui/tree/bugfix/storeselector-doc-fix

Which now gives a module limit issue.

[lbogdan]

That's a legitimate error, caused by our current limit of 250 modules (files, really) per sandbox.

[haroldao]

Same problem here.
Here's my sandbox: https://codesandbox.io/s/km0p41o9jo

How did you fix your issue?

[Jen-Pearson]

I know this is an old looking thread but I had this when trying to create React_TicTacToe. By removing the _ to make it ReactTicTacToe. It completed without the 422 code error. Nothing obvious in the browser - just got that processing image forever until I opened dev tools to find out what was going on :)

On the github side of things I can now see a repo called React-tictactoe. Weird!