Fresh create-react-app Import from GitHub Failing to Build
kylecoberly opened this issue ยท 12 comments
๐ bug report
Preflight Checklist
- I have read the Contributing Guidelines for this project.
- I agree to follow the Code of Conduct that this project
adheres to. - I have searched the issue tracker for an issue that matches the one I want
to file, without success.
Description of the problem
When I create a fresh React app with create-react-app and push it to GitHub, it won't build when imported to CodeSandbox. Fails on Node 12 and 17. Error is {err: TypeError}, and then it tells me it's retrying package fetch.
How has this issue affected you? What are you trying to accomplish?
Create interactive examples of React apps while maintaining the source code in GitHub.
To Reproduce
npx create-react-app some-projectgit remote add origin some-github-url.gitgit push origin master- Import repo to a new Sandbox
- Observe error
Link to sandbox: Failing Sandbox
Your Environment
| Software | Name/Version |
|---|---|
| ะกodesandbox | Web |
| Browser | Firefox |
| Operating System | Linux |
Hey Kyle! Do you still see this issue? I've been trying to reproduce it, but couldn't reproduce the some problem.
Hey Kyle! Do you still see this issue? I've been trying to reproduce it, but couldn't reproduce the some problem.
Everything worked for me before. Doesn't work now. Can't use any project from my git. You can try import my projects and see this error.
https://github.com/faceless49/portfolio.git
https://github.com/faceless49/socialNetwork.git
I was still having the same issue this morning (same one @faceless49 had). I removed a package called Web Vitals from the package.json and index.js and it worked. Not sure why this isn't working on codesandbox.io, there weren't any issues with it locally.
I was still having the same issue this morning (same one @faceless49 had). I removed a package called Web Vitals from the
package.jsonandindex.jsand it worked. Not sure why this isn't working on codesandbox.io, there weren't any issues with it locally.
Thank you man. Working now
Oh wow, that's super interesting. I'm not seeing the issue here, so it might be a CDN cache issue. Going to take a closer look tomorrow.
That's a beautiful portfolio btw!
Also seeing this issue (also with create-react-app), only in latest Chrome (92.0.4515.159 on macOS 11.5.2) - in Safari 14.1.2 it loads:
https://codesandbox.io/s/github/inespart/random-color-generator-react-app
Tried clearing all application data in the DevTools and disabling uBlock Origin, neither helped.
I was also able to replicate this today with a new CRA project imported from GH on FF (my main browser), but not on Chrome or Safari. I found I could get the project to run in two ways:
- By removing the
web-vitalsdependency - By disabling my adBlock (AdBlocker Ultimate)
Checking the console I can see that the request to fetch this specific package is being blocked by AdBlocker Ultimate on FF:
I think that might explain why this issue seems to occur quite randomly, and only to some of us.
@CompuIves we might need to consider a bit of an adblock evasion strategy for certain dependencies like this, since this is something that more people will run into now that it's included by default with CRA.
@karlhorky would you be able to check your network tab for the request for this dependency? It's surprising to me that it's still failing for you with uBlock disabled.
I was also able to "break" a sandbox on my machine by installing the web-vitals dependency. Here's a minimal repro.
@smhutch can't reproduce this, so maybe it's an issue with the adblocker?
@DeMoorJasper Yeah, I think it only happens with certain ad-blockers, and is not a general issue affecting all CRA imports.
Since CRA ships with web-vitals now though, I think we might still benefit from trying to find a workaround for these cases. I expect a high percentage of users use some kind of ad-blocker.
So disabling uBlock Origin didn't work for me on the codesandbox.io domain, so I played around a bit - it appears that I needed to add csb.app on the Trusted Sites tab:
This is working now.
Debugged this a bit further based on uBlocks block lists and it appears to be caused by this list: https://easylist.to/easylist/easyprivacy.txt
We're also looking into ways to bypass adblockers for our package downloader and/or get the list to exclude the codesandbox packager
Nice, that would be great, thanks @DeMoorJasper ! ๐