Freecodecamp: [beta] Can't load code for challenge "Applied Visual Design: Set the Font-size for Multiple Heading Elements"

Created on 18 Feb 2017 · 15Comments · Source: freeCodeCamp/freeCodeCamp

Challenge Name

Applied Visual Design: Set the Font-size for Multiple Heading Elements

Issue Description

The page loads the challenge description and tests but the code editor and the small "console output" box under the buttons show an infinite loading animation. The Developer Console shows some errors, which you can see in the screenshot below.

The other challenges seems to be loaded without problems.

Browser Information

Browser Name, Version: Chrome 56.0.2924.87 (64-bit)
Operating System: Windows 7 x64
Mobile, Desktop, or Tablet: Desktop

Screenshot

error

bug

Source

Atomk

All 15 comments

Confirmed

2017-02-19 01 42 56

/cc @BerkeleyTrue

raisedadead on 18 Feb 2017

I've seen this exact error several times the last month.

Greenheart on 18 Feb 2017

Including the link shown in the error would be extremely helpful in debugging this.

Does moving from the previous challenge to this challenge also show the same errors?

BerkeleyTrue on 20 Feb 2017

@BerkeleyTrue No, moving from the previous challenge the code in the editor is shown correctly, but the error in the console is still there. Also, reloading the page shows the same error reported in this issue.
What kind of link do you need? You mean this one?

https://facebook.github.io/react/docs/error-decoder.html?invariant=32&args[]=47
error

Atomk on 20 Feb 2017

Can anyone replicate this error in development?

BerkeleyTrue on 20 Feb 2017

@BerkeleyTrue I can reproduce in my local environment with Firefox 51.0.1 (64-bit) on Ubuntu 16.04.

Greenheart on 20 Feb 2017

@Greenheart is this error specific to FF?

BerkeleyTrue on 20 Feb 2017

@BerkeleyTrue I've seen this in both Chrome 55 & 56 as well as FF 50 & 51. It seems to only occur on some specific challenges. I don't see any pattern yet, but maybe these challenges are special in some way - or maybe campers load them/submit solutions in a special way that causes the bundle crash.

Greenheart on 20 Feb 2017

So a little bit of digging around whilst having a coffee at work points to the <li> element for the Sign Up nav link as havening the reactId of 32.

Could this be caused by the server/client markup mismatch issues we get in development? i.e. react diffs that part of the DOM and finds it isn't there, but it's still expected so it throws an error?

That li is removed when the user object resolves and is placed into the store.

Bouncey on 23 Feb 2017

👍1

Going from this challenge to the map page, the map "list" is not shown.
map

The console shows almost the same error.
error

Atomk on 23 Feb 2017

This is the XML timeout caught by the error Observable

SCRIPT5022: Minified React error #32; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=32&args[]=47 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
File: bundle-42504ef8f715698a3c10.js, Line: 786, Column: 21
Error: XMLHttpRequest timeout
   {
      [functions]: ,
      @@hasInstance: undefined,
      @@isConcatSpreadable: undefined,
      @@iterator: undefined,
      @@match: undefined,
      @@replace: undefined,
      @@search: undefined,
      @@species: undefined,
      @@split: undefined,
      @@toPrimitive: undefined,
      @@toStringTag: undefined,
      @@unscopables: undefined,
      __proto__: { },
      code: "ETIMEDOUT",
      description: "XMLHttpRequest timeout",
      message: "XMLHttpRequest timeout",
      name: "Error",
      rawRequest: {
         [functions]: ,
         @@hasInstance: undefined,
         @@isConcatSpreadable: undefined,
         @@iterator: undefined,
         @@match: undefined,
         @@replace: undefined,
         @@search: undefined,
         @@species: undefined,
         @@split: undefined,
         @@toPrimitive: undefined,
         @@toStringTag: undefined,
         @@unscopables: undefined,
         __proto__: { },
         DONE: 4,
         headers: { },
         HEADERS_RECEIVED: 2,
         LOADING: 3,
         method: "GET",
         msCaching: "auto",
         onloadend: null,
         onloadstart: null,
         OPENED: 1,
         readyState: 0,
         response: "",
         responseBody: <String expected>,
         responseText: "",
         responseType: "",
         responseXML: null,
         status: 0,
         statusText: "",
         Symbol()_j.qbardueevt2: undefined,
         Symbol()_l.qbardueevt2: undefined,
         Symbol(should not be considered a local binding)_i.qbardueevt2: undefined,
         Symbol(super this bound)_k.qbardueevt2: undefined,
         Symbol(var used to be block scoped)_h.qbardueevt2: undefined,
         timeout: 0,
         UNSENT: 0,
         upload: { },
         url: "/services/user?_csrf=ska1j4NM-GPMeQBJIR24T7mxpD213t4n6a_U&returnMeta=true",
         withCredentials: false
      },
      statusCode: 0,
      Symbol()_j.qbardueevt2: undefined,
      Symbol()_l.qbardueevt2: undefined,
      Symbol(should not be considered a local binding)_i.qbardueevt2: undefined,
      Symbol(super this bound)_k.qbardueevt2: undefined,
      Symbol(var used to be block scoped)_h.qbardueevt2: undefined,
      url: "/services/user?_csrf=ska1j4NM-GPMeQBJIR24T7mxpD213t4n6a_U&returnMeta=true"
   }

Bouncey on 23 Feb 2017

react diffs that part of the DOM and finds it isn't there, but it's still expected so it throws an error?

In this case react just throws away the DOM and rebuilds it. It does not throw a nebulous error.

BerkeleyTrue on 23 Feb 2017

Reason for this error seems to be that the seed file was like the following:

"<ul>",
"<li>content</li>",
"<li>content</li>",
"</ul>"

React wants to put everything that is between quotes inside a paragraph, so it becomes something like

<ul>
  <p></p>
  <p class="wrappable" data-reactid="id"></p>
  <li>content</li>
  <p></p>
  <p class="wrappable" data-reactid="id"></p>
  <li>content</li>
</ul>

which it seems to thoroughly dislike.