DEV Community: Allan Philip Barku

gyp: No Xcode or CLT version detected macOS Catalina

Allan Philip Barku — Mon, 20 Jan 2020 14:47:54 +0000

gyp: No Xcode or CLT version

Did you recently update your macOS Catalina to version 10.15.2? If you did, then you probably in the same boat too. What I immediately noticed from my terminal is this new shinny error about gyp: No Xcode or CLT version detected any time I ran either yarn install or npm install

gyp: No Xcode or CLT version detected! gyp ERR! configure error

Well if you are wondering if that was my entire error? It is not even close. The line goes on and on. The funny thing is am so sure I have command line tools installed. The result of

xcode-select --install

should start the reinstallation process but if you get the result in the image below then you already have command line tools installed

Solution

Reinstall command line tools by removing the previously installed version

Step 1

First, get the location of the installed command line tools by running the command below:

xcode-select --print-path

the result of the above command

/Library/Developer/CommandLineTools

Step 2

Knowing the path to the currently installed command line tools from the previous step, You can now go ahead and remove it from the system. For the next set of commands, you need sudo privileges to run successfully.

sudo rm -r -f /Library/Developer/CommandLineTools

Provide the root password to remove the command line tools. If you already have git installed, you would get a prompt to guide you through the installation of command line developer tools.

Click on install and follow the rest of the instructions in prompt to reinstall command line developer tools. If for some reasons, you do not get the prompt right after uninstalling your previous command line developer tools, no need to panic. Run the following command to get the prompt.

xcode-select --install

Click on install and then agree to the licence to proceed with the installation. Depending on your internet speed it will take some time for the system to complete the download of the command line developer tools. The installation process should proceed immediately after a successful download. Look out for the done button as shown in the image below to confirm command line tools is successfully installed.

With the reinstallation of the command line developer tools the gyp: No Xcode or CLT version detected error message should disappear when you run any yarn or npm commands from the command line.

Install Command Line Tools on macOS Catalina

Allan Philip Barku — Fri, 17 Jan 2020 11:53:34 +0000

macOS Catalina

Before we get right to how to install command line tools on macOS, let us look at what macOS Catalina is all about. Apple just made available a major release of its macOS codenamed macOS Catalina (version 10.15). macOS Catalina is the sixteenth release of Apple’s desktop operating system for Macintosh computers. So with the release of macOS Catalina, we say goodbye to macOS Mojave (version 10.14)

macOS Catalina is the first of its kind to support only 64-bit applications and activation lock. Read more about all the new feature of macOS Catalina from apple.com

Command-line tools on macOS Catalina is essential to running of commands and development task. Just like with all new versions of macOS you have to install command-line tools to run commands. The good news is the procedure has not changed much across the various versions of macOS

Install Command Line Tools

Open your terminal to begin the process of installing command-line tools on macOS Catalina. With your terminal opened, type the command below into the prompt and press the return key to execute it. After executing the command below a pop-up window should open with the option to install. The popped-up window should look similar to the image below

xcode-select --install

Subsequently, click on the Install button to proceed with the installation of command-line developer tools. Most importantly, as with every application, you have to agree to the license to proceed with the installation. Hence click agree on the license agreement window to continue with the installation.

Therefore, as a result of agreeing to license the download the command line tools is triggered. After that, the installation will kick in and should not take too long.

Finally, click on the Done button to complete the installation process.

After that run some beautiful code from the terminal. In conclusion, run your commands from the terminal to confirm the successful installation of command-line tools on macOS Catalina.

Originally published at https://anansewaa.com on October 11, 2019

Vue packages version mismatch error fix

Allan Philip Barku — Thu, 16 Jan 2020 09:47:28 +0000

Approachable, versatile and performant are the words used to describe Vue.js on their website. Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.

The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue is widely used with Laravel framework, By default, fresh Laravel applications contain an ExampleComponent.vue Vue component located in the directory. The file ExampleComponent.vue is an example of a single file Vue component which defines its JavaScript and HTML template in the same file. Single file components provide a very convenient approach to building JavaScript driven applications.

Vue packages version mismatch error occurs when Vue and Vue-template-compiler version numbers are different.

As shown in the image above, my Vue version is higher than that of the Vue-template-compiler, this causes things to not work correctly. Make sure to use the same version for both. Specifying the exact version of Vue and Vue-template-compiler rather than leaving it up to npm (node package manager) to install or yarn to figure out dependencies helps keep both in sync hence no Vue packages version mismatch.

How I got it to work

Since the version of the Vue-template-compiler is older than that of the Vue I decided to update it to same version number as the Vue thus 2.5.16 In your case the number might not be same as mine so replace the version number with what you see in your error message in the following command

npm install vue-template-compiler@2.5.16 --save-dev

The above command would fix the version mismatch error as shown in the accompanying image above.