This time I tell myself let look for a small issue but in an even bigger project and see how much I can learn from it. so I come accross patternfly-react a framework with ready-to-go react components. Then I decide to sign up for issue- 6494, where I'm passing the prop for the
FocusTrap to be made inactive
At first, I would read through the
CONTRIBUTTING.md file to make sure I did not miss anything and learn how to set up my environment. Even though being a big project, the precedure of setting up the environment and running test did not present clearly to me at first.
My first attempt into the project would be running
npm install to install all the required dependacies for the project. Upon completion, I try to run
npm test or
yarn test but there was 416 unit test failed and that is when I know something was wrong with my set up.
I did speak to Duke again after spending time deleting
node_modules and keep installing it over again, and searching for the error on the internet but I got no luck. Then after speaking for a while, I regconize they using
yarn as an package manager which I did not have a chance to work with it before so when I come into the project and see
yarn.lock, I just ignore it but that is where causing me troubles. Instead of using
npm install to installing all the package I will have to use
yarn so as to install required packages for all the
Here come the interesting part, I heard about
mono-repo before but never understand or know how to visualize it in real life untill I start working on this project. So every small repo need their own
node_modules that was the reason why when I check out the general
package_lock.json I did not see a lot of packages listed under the dependacies.
yarn and try to run the
yarn test again but it still showing the same troubles. It come to my realize that I also need to delete all the
node_modules installed by
npm install. This time it will be time consuming if I have to go check and delete each of the
node_modules manually like I usually did. So I try out npkill which I have a chance to work with it during WEB422 and unistalled all the previous
node_modules from the project.
I ran the
yarn test again, this time more test have been passed but those test which have these
import statement could not resolve there path.
After spending time searching for it, I regconize the
import statements are importing a
build version of the repo not only the path to it. So I run
yarn build and all the test went smoothly.
FocusTrap to be made inactive is quite easy for me. where I just need to declared the prop and use it for FocusTrap but the linting always complain but I did not be able to run
yarn lint or
yarn lint:ts on my machine and I did try to communicate with the team and have not hear from them back but it was quite an excited learning journey for me with a big project like this.
You can check out my PR