Error Messages When Running yarn develop

[scissorsneedfoodtoo]

@Bouncey, I saw Quincy announce this new web app over on Gitter. Can't wait to get it running and see how everything works!

However, when I run yarn develop, I get the following error:

 ERROR  Failed to compile with 3 errors                               16:22:30

These dependencies were not found:

* /home/kris/Documents/GitHub/forks/learn/.cache/json/javascript-algorithms-and-data-structures-object-oriented-programming-use-closure-to-protect-properties-within-an-object-from-being-modified-externally.json in ./.cache/sync-requires.js
* /home/kris/Documents/GitHub/forks/learn/.cache/json/javascript-algorithms-and-data-structures-functional-programming-use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.json in ./.cache/sync-requires.js
* /home/kris/Documents/GitHub/forks/learn/.cache/json/javascript-algorithms-and-data-structures-functional-programming-use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.json in ./.cache/sync-requires.js

To install them, you can run: npm install --save /home/kris/Documents/GitHub/forks/learn/.cache/json/javascript-algorithms-and-data-structures-object-oriented-programming-use-closure-to-protect-properties-within-an-object-from-being-modified-externally.json /home/kris/Documents/GitHub/forks/learn/.cache/json/javascript-algorithms-and-data-structures-functional-programming-use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.json /home/kris/Documents/GitHub/forks/learn/.cache/json/javascript-algorithms-and-data-structures-functional-programming-use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.json

When I try to run npm install --save ... from the error message, I get an error from npm saying that the filename is too long. I believe it's because my home directory is encrypted, so filenames can only be ~143 characters.

Is there an easy way to work around this limitation? Maybe change the way that the files are saved in .cache/json? I tried poking around the codebase to find a way to get the files to save folders and create a longer path / shorten the actual filenames, but wasn't able to figure out how to do so.

[Bouncey]

Oh thats weird... those files are generated and used by gatsby. Perhaps @KyleAMathews could help? Maybe something to search for in the gatsbyjs/gatsby repo.

[scissorsneedfoodtoo]

Okay! Thanks for the quick response. I'll take a look around the gatsby repo to see if there were any other people with similar issues.

[Bouncey]

Did you find a solution @scissorsneedfoodtoo?

[scissorsneedfoodtoo]

Yes, I was able to find a solution, but unfortunately it means shortening the slug by removing the superBlock from each, leaving them with just the block and title. However this would mean the URL for each page is more in line with beta. For example, beta is now:

https://beta.freecodecamp.org/en/challenges/css-grid/create-your-first-css-grid

Currently Learn is:

https://learn.freecodecamp.org/responsive-web-design/css-grid/create-your-first-css-grid

And by removing the superBlock would be:

https://learn.freecodecamp.org/css-grid/create-your-first-css-grid

We could always shorten the titles of the three challenges causing the error, too, but that doesn't seem ideal. Let me know what you think! In the meantime I'll keep looking around the gatsby repo to see if there's another solution.

[Bouncey]

@scissorsneedfoodtoo thanks for confirming the issue. We should raise this in the gatsby repo so they can look at potential work-arounds, seeing as they are generated and used by gatsby itself.

There are a couple of reasons the url slug has changed from production/beta -> learn

• /challenges/ has been dropped as the learn subdomain is solely for the challenges/lessons provided by freeCodeCamp. We are not hosting any account or meta specific pages (/about, /settings etc...) on the learn subdomain, so the differentiation is not required.
• /superBlock/block/challenge was selected to improve SEO. We are adding pages at both the /superBlock and /superBlock/block levels which will index the content for that block/superBlock. For example, someone searching to learn about microservices will hopefully land on the /apis-and-microservices route and see a list of all the blocks taught in that section, instead of landing on a random challenge potentially halfway through or at the end of a block.

I hope this clears up why things have changed in this respect 😁

[scissorsneedfoodtoo]

@Bouncey, thank you for the explanation! That does certainly clear things up about the changes to the url slug. I especially like the idea of improved SEO and users hopefully being shown a list of all the blocks rather than being thrown into the thick of things.

There was a similar issue that I found in the gatsby repo, similarly encrypted Linux system, too. I'll comment there and see about a work-around.

[Bouncey]

@scissorsneedfoodtoo nice find! Could you link to it from here please so we can track it 👍

[scissorsneedfoodtoo]

Sure! It's issue #4125 in the gatsby repo. I'll write a comment about the issue here a little later today.

[Bouncey]

@scissorsneedfoodtoo Would you like to rename the challenges so that they allow contributors like you to work locally?

[scissorsneedfoodtoo]

@Bouncey, I think it's okay for now. @tchaffee and I are probably in the minority, and it's not a problem to edit the challenge names to work locally. Maybe if a lot of other users run into the same issue we can rename those challenges.

Just to keep you posted about what's going on in the open issue in the Gatsby repo, @KyleAMathews suggested and algorithm to do the following:

1. Naively create the original filename
2. Create a hash the original file name
3. remove common words e.g. and, an, or, etc. I'm sure there's an NPM package for this,
4. Append the hash to the shortened file name
5. if the file name is too long still, split the name at dashes and remove words until the name + hash is < MAX_FILE_NAME_LENGTH

Thought about offering to help implement the method above, but didn't want to mess with the SEO here.

[mstellaluna]

I am running Windows 10 Pro 64-bit, if you need me to try anything on windows, let me know.

[scissorsneedfoodtoo]

I'm going to go ahead and close this issue since it's so unlikely that others will run into it. Also, I've since reinstalled my OS without encryption and this issue no longer affects me.

Just in case someone does have the same problem in the future, the workaround I used was to change these lines:

learn/gatsby-node.js

Lines 14 to 16 in 2f3c21c

	const slug = `/${dasherize(superBlock)}/${dasherize(block)}/${dasherize(
	title
	)}`;

to the following:

    const slug = `/${dasherize(block)}/${dasherize(
      title
    )}`;

Then running yarn develop passes. The only problem seems to be that certain pages like the intro to each section don't work. All the challenges load, though.

[tchaffee]

In case it helps someone, my workaround was to move the repo out of my home directory.