Hi fellow campers, I have just finished my Random Quote Generator using React. But I have a trouble by using FCC Cdn to check for requirements to pass the challenge.
Here is my project :
My problem is that I creates React Apps using create-react-app option and I don’t know where to add FCC CDN link. I tried to add to the index.html file in the public folder but it didn’t work.
Please help if you know how to solve this problem.
I’m still a beginner on react, but can you add a link tag in the head of your html file using a react component? The output should be:
Well I tried this with the script tag but didn’t work.
You can put the script in the html file in the public folder.
did you try it and worked ?
Yes it works, but hopefully you just tested it.
I did it before but it didn’t work !
I have added it again as you can see in this commit
can you please check and tell me if there is something wrong ?!!
Hi @Ahmed-Elbessfy! I had the same problem that you have, and I just figured it out. You have to add the FCC CDN as a dependency in CodeSandBox to be able to run it. So simply copy the CDN link and paste it into the field above the ‘Add Resource’ button, then click that button. That should work
You are not linking to the script correctly. It should just be a normal script tag with an src attribute.
<link rel="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" />
I have tried this one and got the same result
I am using VS so how can I do this ?!
Hmm… I thought you were using CodeSandBox.io for some reason. If you want to use my solution you’d have to copy and paste your code into CodeSandBox.io’s environment.
My guess is you are linking to the file in the head, move it to before the closing body tag. Then it should work.
Side note: When I put the test script in the head I get this error.
Uncaught TypeError: Cannot read property 'appendChild' of null
at Module.<anonymous> (bundle.js:154)
at r (bundle.js:1)
I will try it but I think this error is about the bundle itself !!
You can add the FCC CDN in the same way that @stephepush mentioned above but, in addition to that, in order for the FCC test suite to display in Code Sandbox, you have to add
import ReactFCCtest from 'react-fcctest';
at the top of your App.js file and then include
in its return statement along with the rest of your code. That ended up working for me after I read the npm package docs of react-fcctest.
If you don’t want to do all of that, you can also just include
in the “External Resources” section of the left panel and then click on “Add Resource”.
Thanks a lot for your help but I don’t use sandbox and I still searching for a way to solve this issue
Did you actually try moving the script to just before the closing body tag? I don’t see it in your repo. It should work just fine.
As said, you can also try the react-fcctest npm module. Just know it is not an official fCC package. Just do an
npm i react-fcctest in the root of your project, import it in App.js and add the component (look at the docs).