Pinning Node Versions

Taken by an amazing photographer. Thanks Rudy!

As I dive into the code for the company I’m interning with, I’ve been more and more excited to dive into frontend development. Unfortunately I came across a road block because as I cloned the repo and tried to run locally, I got an error that was referring me back to the sass file used to style components.

$spec-black: #222525
^
      Media query expression must begin with '('
      in /Users/johnsonkow/Development/SPEC/SPECwebsite/specollective.org/src/components/all.sass (line 8, column 1)

Now I’ve never uses sass so I wasn’t sure if the syntax was wrong so I checked the master branch which is actively deployed and it worked perfectly meaning that the error wasn’t actually pointing me to the problem. I found a quick fix on stack overflow which was to add a semi colon ‘;’ to each line of code on the sass file but why? I was quite literally so confused as to what the problem could be.

After talking with my mentor, it came down to the version of node I have versus the version of node the app requires. I found that the node version I had was 15 while the one needed in the development is 14. The problem occurred on the sass file because upon using node-sass, a library to bind NodeJS with LibSass, you had to use the corresponding node version with node-sass.

node-sass support chart

As mentioned I had Node 15 while running node-sass 4.14+ which isn’t compatible according to this chart. So I had to downgrade my node version but this only works for me. What happens to all the other developers that want to work on this? They’ll encounter the same error.

I pinned the version of Node such that people that fork or clone this repo will be able to immediately run the correct version of node.

Let’s get started. First thing you’ll need to do is create an ‘.nvmrc’ file in the root of your project. In that file, add the version of node your project uses, in my case ‘14.8.0’. Lastly run the following commands.

nvm use
nvm install
nvm exec

That’s it! When you run these commands you’re telling your local to run the specific version of node defined inside the .nvmrc file. After that, I ran ‘yarn start’ and my localhost was FINALLY showing the website. What a headache! I hope this saves you some time and as always happy coding!