Thursday, August 15, 2019

Error: Invariant failed: You should not use Link outside a Router

As of the time of this writing, the latest version for connected-react-router is 6.5.2, and the latest version for react-router and react-router-dom is 5.0.1. However, I got the errors that says Link should not be used outside a Router when using those versions.



Cause of the error: https://github.com/ReactTraining/react-router/issues/6634#issuecomment-500084539


The example of connected-react-router (even if the latest version is 6.5.2) uses connected-react-router 6.0.0 though: https://github.com/supasate/connected-react-router/blob/d822fb9afd12e9d32e8353a04c1c6b4b5ba95f72/examples/basic/package.json#L26

That example uses react-router and react-router-dom 4.3.1.


To fix the error, just use the same version from the example. Pin the version of connected-react-router to 6.0.0, and both react-router, react-router-dom to ^4.3.1.

"dependencies": {
    "connected-react-router": "6.0.0",
    "history": "^4.9.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-redux": "^7.1.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "3.1.1",
    "redux": "^4.0.4"
},


Then delete yarn.lock and node_modules:
$ rm yarn.lock
$ rm -rf node_modules

Then reinstall:
$ yarn install

Then add prop-types:
$ yarn add prop-types


As of the time of this writing, I got ^15.7.2 for prop-types.


That's all.




Wednesday, August 14, 2019

npm install -g without sudo

On my machine, ~/.npmrc file is not existing. So I created one, and then add the following:


prefix=~/.npm


And in ~/.bash_profile (which is also not existing on my machine, so I created one), I added this line:

export PATH="$HOME/.npm/bin:$PATH"


Restarted terminal, npm install -g now works even without the sudo


Followed these steps:

https://medium.com/@ExplosionPills/dont-use-sudo-with-npm-still-66e609f5f92

https://www.reddit.com/r/applehelp/comments/9tf7hx/bashrc_on_mojave/



Thursday, August 8, 2019

All things being equal, they are not equal

I put all my shared files on external drive with exFAT file system. Found out later that the default cluster size (128 KB) that macOS allocates for exFAT drives is atrociously wasteful for npm-based projects. The external drive is permanently plugged to the back of iMac's Thunderbolt 3 port.

Image

For 128KB cluster size partition, a 3.5GB npm-based project consumes 81GB of space, yes that's 81GB not 8.1GB. For 4K cluster size partition, a 3.5GB npm-based project consumes 5.44GB only.

I resized the exFAT drive's cluster size to 4 KB, there is a problem when the computer boots though. The exFAT drive affects the boot speed of the computer. Do note that the computer is booting from internal drive (APFS), not from external exFAT drive.

From cold boot to Apple logo, the exFAT drive affects the boot speed of the computer to almost ten minutes.

Here are the other boot speed from various exFAT cluster sizes:

8 KB = 2 minutes 50 seconds
16 KB = 50 seconds
32 KB = 16 seconds
64 KB = 8 seconds
128 KB = 7 seconds


For other file systems cluster sizes:

4 KB APFS = 5 seconds
4 KB NTFS = 5 seconds

For both file systems, they don't affect the boot speed of the computer even if they are permanently plugged to Thunderbolt port.

Ultimately I decided to use NTFS and used third-party software on macOS that can read and write to NTFS drive.


Further space saved by deleting node_modules from npm-based projects by using Yarn Plug'n'Play:




Saturday, August 3, 2019

Could not read from remote repository

Got this error when pushing code to GitHub:

Developers-iMac:experiment-react-route-based-lazy-load dev$ git push -u origin master
Warning: Permanently added the RSA host key for IP address '13.250.177.223' to the list of known hosts.
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.


One solution that works:

Developers-iMac:experiment-react-route-based-lazy-load dev$ git remote set-url origin https://github.com/ienablemuch/experiment-react-route-based-lazy-load
Developers-iMac:experiment-react-route-based-lazy-load dev$ git push -u origin masterEnumerating objects: 28, done.
Counting objects: 100% (28/28), done.
Delta compression using up to 8 threads
Compressing objects: 100% (28/28), done.
Writing objects: 100% (28/28), 302.35 KiB | 12.09 MiB/s, done.
Total 28 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), done.
To https://github.com/ienablemuch/experiment-react-route-based-lazy-load
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

Got the solution from: https://stackoverflow.com/questions/21255438/permission-denied-publickey-fatal-could-not-read-from-remote-repository-whil/55239661#55239661