Bugs in the next branch (TypeScript migration)

[ojeytonwilliams]

Please add any problems with https://beta.freecodecamp.dev/learn to this issue.

Condensed list of issues below:

• completion modal not showing up: fix(client): open completionModal on shortcut #42685
• closing donation modal error: unrelated to migration
• private 'about' info shows up in profile caching issue #42712
• "checker is not a function" error in console when loading editor
• "Input is not HTMLInputElement" error when submitting URL's by tabbing to the submit button

[ShaunSHamilton]

Closing donation modal produces this error in the console:

[ojeytonwilliams]

Private About descriptions appear in the Profile:

this is very flaky. It seems to come and go.

[ShaunSHamilton]

The private about looks like a React cache issue - refreshing the page consistently makes it disappear for me. Cannot reproduce on .org though.

[ojeytonwilliams]

I couldn't reproduce it reliable on beta and not at all on .dev. So, yes, it definitely sounds like a caching problem, but it might be a new one.

[ShaunSHamilton]

Editor throws error in console, on render (ref #42651):

Warning: Failed prop type: checker is not a function
    in DesktopLayout (created by ShowClassic)
    in ShowClassic (created by withI18nextTranslation(ShowClassic))
    in withI18nextTranslation(ShowClassic) (created by Connect(withI18nextTranslation(ShowClassic)))
    in Connect(withI18nextTranslation(ShowClassic)) (created by PageRenderer)
    in div (created by DefaultLayout)
    in div (created by DefaultLayout)
    in DefaultLayout (created by withI18nextTranslation(DefaultLayout))

[raisedadead]

I do not get errors on the beta for donate modal. Please add elaborate steps to repro?

[ShaunSHamilton]

@raisedadead I get the errors any time I click the Ask me later button.

Also, I realise I am being redirected to freecodecamp.dev, seemingly randomly. I get the errors there as well.

[raisedadead]

I am still unable to reproduce. I would appreciate some detailed steps to debug and see the console logs.

I get the errors any time I click the Ask me later button.

So you mean you do not see the errors with donate modal anymore? Are these the same errors as the modal?

I realise I am being redirected to freecodecamp.dev, seemingly randomly.

Again I will need a detailed sequence of steps to reproduce, but it is possible that you can get that. The reason being we haven't defined "beta.freecodecamp.dev" as the "home" anywhere in code. Meaning, some routing will default to the TLD, as you might have been experiencing.

That said, it's an issue that we would want to keep for the QA cycle later on staging.

[ShaunSHamilton]

To reproduce:

1. Complete enough challenges for Donation Modal to appear
2. Click on Ask me later (to close modal)
3. See in console for error:

react_devtools_backend.js:2560 unhandled_error {err: "Error: Detected container element removed from DOM…amp.dev/framework-7ca6da6cd38fb917112c.js:2:46441", timestamp: "1624991551882", referer: "www.freecodecamp.dev", uid: "uid_7bcc0447cc_mtg6mzi6mjg", env: "sandbox"}
 Uncaught Error: Detected container element removed from DOM
    at VM184 js:2
    at VM184 js:2
    at l (VM184 js:2)
    at vo (react-dom.production.min.js:221)
    at ku (react-dom.production.min.js:253)
    at t.unstable_runWithPriority (scheduler.production.min.js:19)
    at $l (react-dom.production.min.js:122)
    at wu (react-dom.production.min.js:248)
    at ou (react-dom.production.min.js:239)
    at react-dom.production.min.js:123

[ShaunSHamilton]

I have managed to reproduce this many times, and even disabled React Devtools extension for good measure.

Python.for.Everybody.-.Strings.in.Python._.Learn._.freeCodeCamp.org.-.Google.Chrome.2021-06-29.21-40-12_Trim.mp4

---

Also, it seems, if I click on Ask me later , the DonationModal will not reappear, unless I refresh the page. That is, after closing the modal, I can complete 30+ lessons without it reappearing - My understanding is it should reappear:

• If a block has been completed
• 10 lessons have been completed

[scissorsneedfoodtoo]

I took a look at the donation modal and was able to reproduce that error message on both beta.freecodecamp.dev and www.freecodecamp.dev.

It seems like an existing issue with the PayPal script complaining about the container element being removed, and isn't due to the TS migration.

Not the exact same error object as in the screenshot, but here's another for reference:

{err: "Error: Detected container element removed from DOM…amp.dev/framework-7ca6da6cd38fb917112c.js:2:46441", timestamp: "1625027491934", referer: "www.freecodecamp.dev", uid: "uid_952c2cda7a_mdq6mza6nte", env: "sandbox"}

I haven't been able to reproduce the issue with the DonationModal not reappearing, though. So long as I complete new challenges, I can get the modal to reappear normally. If I redo challenges I've already completed, then the modal does not reappear every 10 lessons or when a block is completed.

Not sure if this is intended behavior or not, but it seems to work this way on both beta.freecodecamp.dev and www.freecodecamp.dev.

[raisedadead]

Thanks for the additional steps Shaun. Now that I have wiped my glasses, I have now been able to reproduce and see this consistently.

I believe Kris is correct in his findings, I think we haven't configured PayPal's sandbox script environment to accept the test site as an origin correctly and hence the errors.

But, I was able to successfully make a donation and dismiss the modals - meaning the behaviour seems to be unaffected. So, I guess we are good?

[raisedadead]

The Ctrl + Enter, shortcuts work partially. That I am able to run tests using the shortcut, but I am unable to trigger the completion modal once all tests have passed.

The completion modal shows up only when the "Run the tests" button is clicked.

I think the shortcuts are flaky on the modal as well, that sometimes they move to the next challenge. But sometimes they are stuck.

Tested on a deployed commit as of this comment: 46fd785

[ShaunSHamilton]

@raisedadead Sounds related to the upcoming changes editor which specifically has the logic to not show the modal when Ctrl + Enter is used.

EDIT: Comment ref: https://github.com/freeCodeCamp/freeCodeCamp/blob/next/client/src/templates/Challenges/classic/editor.tsx#L313

[raisedadead]

Thanks for the quick debugginging, those bits should be reinstated. Do you know how?

[ShaunSHamilton]

Do you know how?

It is a bit confusing, as I am unsure where we are going with the upcoming changes. That is, typically, frontend/Show.tsx is used for these challenges, which directly opens the modal. However, now we are using classic/Show.tsx, the logic for frontend and backend is mixed.

Do we plan on removing frontend/Show.tsx and backend/Show.tsx, in favour of classic/Show.tsx?

---

EDIT: Please ignore me 🤦 I realise what needs to be done.

[moT01]

Error in console when submitting URL's:

Steps to reproduce:

• go to a challenge where you need to submit a URL. i.e. a cert project
• type in a URL to submit
• press tab to focus the "I've completed this challenge button"
• press enter to submit the challenge
• see error

[thecodingaviator]

@moT01 I'm unable to reproduce that. Can anyone else reproduce it?

[Nirajn2311]

Same here, I couldn't also reproduce Toms bug.

[moT01]

@ShaunSHamilton found it, so I can't take credit. I was able to reproduce it on production and dev. I believe it's some sort of caching or storage issue. I wasn't able to reproduce on private browsing or a fresh browser.

[scissorsneedfoodtoo]

@moT01 and @ShaunSHamilton, I took a look and was able to reproduce that Assertion failed: Input argument is not an HTMLInputElement bug.

Turns out that it's probably related to the LastPass extension, at least in Chrome. I haven't tried it in Firefox yet.

Like @moT01 mentioned, I'm unable to reproduce the bug in an incognito window, or once I disable LastPass in my main window.

This thread has more information about possible workarounds and fixes: mui/material-ui#14860

[ShaunSHamilton]

Turns out that it's probably related to the LastPass extension, at least in Chrome.

@scissorsneedfoodtoo Ah... brilliant. Well done, for catching that.

[huyenltnguyen]

I'm not sure if this issue is related to the TS migration, but I helped a user to create their FCC account just moment ago, and I found that after the user entered the code and authenticated successfully, they could briefly see the introduction screen (IntroDescription) for a few seconds before automatically got redirected to /learn.

[raisedadead]

Thanks, @huyenltnguyen we have actually pushed the changes live a few minutes ago. I am going to close this umbrella issue and we should start reporting and fixing issues independently.

Can you log a fresh issue for the same?