[Vuetify] Multiple instances of Vue detected

Setting up unit tests today using localeVue with Vuetify and @vue/test-unit I ran into the warning message:

[Vuetify] Multiple instances of Vue detected

After googling around I found a number of issues related to this warning message. There are different ways to solve it, which I will address in this post.

1. Ignore it

It is a warning message, so you can safely ignore it. But that red warning text sure is annoying.

2. Use Vue instead of localeVue

You could use initialize the component using Vue instead of localVue. That said the documentation of @vue/test-unit explicitly warns agains this.

3. Suppress the warning message

A hack, but in my opinion the least evel one of all the options is suppressing the warning message. This can be done very locally in the beforeEach. This is the code I am using that is based on this issue comment.

The SilenceWarnHack.js class:

/**
 * This is a hack to suppress the Vuetify Multiple instances of Vue detected warning.
 * See https://github.com/vuetifyjs/vuetify/issues/4068#issuecomment-446988490 for more information.
 */
export class SilenceWarnHack {
  constructor() {
    this.originalLogError = console.error
  }
  enable() {
    console.error = (...args) => {
      if (args[0].includes('[Vuetify]') && args[0].includes('https://github.com/vuetifyjs/vuetify/issues/4068')) return
      this.originalLogError(...args)
    }
  }
  disable() {
    console.error = this.originalLogError
  }
}

And the beforeEach function that is part of the test file:

import { createLocalVue, shallowMount } from '@vue/test-utils'
import { SilenceWarnHack } from '@tst/helpers/SilenceWarnHack'
import Vuetify from 'vuetify'
import VStatsCard from '@/components/common/VStatsCard.vue'

const silenceWarnHack = new SilenceWarnHack()

describe('VStatsCard.vue', () => {
  let localVue = null
  beforeEach(() => {
    silenceWarnHack.enable()
    localVue = createLocalVue()
    localVue.use(Vuetify)
    silenceWarnHack.disable()
  })
  ...
}

It works like a dream 🙂

Advertisements

Add a global ignore file to git

Had enough of adding your IDE’s files to the .gitignore file? Time to add a global ignore file for git.

Just execute the following commands.

On *nix or with Windows git bash:

git config --global core.excludesfile '~/.gitignore-global'

With Windows cmd:

git config --global core.excludesfile "%USERPROFILE%\.gitignore-global"

Then you need to create the file:

notepad %USERPROFILE%\.gitignore-global

And add for example the following contents:

data/
.idea/
*.log

That’s it, now you only have to do this one time and not for each project individually.

Adding aliases with Babel

Had enough of complicated import and require statements in your Node/JavaScript files? I’m used to developing in Vue which uses Webpack aliases that by default sets up the @ alias that points to the src directory. I’m working on a project that I am using Babel but not Webpack. It turns out Babel has the cool plugin babel-plugin-module-resolver that also setup aliases.

Install the plugin.

$ npm i --save-dev babel-plugin-module-resolver

So we have the following directory structure.

project
├── src
│  └─ MyCoolService
│    └─index.js
│  └── index.js
├── test
│  └── MyCoolService.spec.js
│  .babelrc
│  package.json

In the spec file I want to test MyCoolService. Importing is messy.

import MyCoolService from '../src/MyCoolService'

I want to do it the Vue way.

import MyCoolService from '@/MyCoolService'

Can it be done? O yes, babel-plugin-module-resolver to the rescue! Create a .babelrc file with the following contents.

// .babelrc
{
  "plugins": [
    ["module-resolver", {
      "root": ["./src/**"]
      "aliases": [
        "@": "./src"
      ]
    }]
  ]
}

Now we can import with the @ alias. Alternatively as the root points to src you can also import as follows.

import MyCoolService from 'MyCoolService'

How cool is that? Happy coding!

WTF!?! Docker asks for Azure AD credentials when sharing C drive

On my Docker quest I was surprised once again. I wanted to share my drive with my Docker container. I was presented with a login dialog that asked for my Azure AD credentials. Azure AD credentials? Seriously? Do I have Azure AD credentials?

UPDATE 9 November 2018

It turns out you do not have to use an Azure AD account for Shared Drives at all. You can just create a local account (i.e. DockerHost) using the instructions below points 2 to 4 .

The confusing part is that the dialog displayed the username as AzureAD\MyName. This didn’t ring a bell. After fiddling around I figured out that I could use my Office 365 credentials, but the username needed to be changed to my email address in the following format AzureAD\[email protected]. Go figure.

After logging in nothing happened and the share was unchecked again. WTF?!?!

After googling around I found the following post Sharing your C drive with Docker for Windows when using Azure Active Directory by Tom Chantler, which gave me enough information to fix the problem.

I had to make to three changes to the solution he describes in his post:

  1. I do not have Azure AD credentials. So I used my Office 365 credentials, which also uses Azure AD. So instead of the username being AzureAD\MyName, I had to change it to AzureAD\[email protected].
  2. I’m running Windows 10 Professional. It initially would not let me create a local users who’s username was not an email address. In the first dialog I needed to select ‘I don’t have this person’s sign-in information’ and in the next step ‘Add user without Microsoft account’. Then I could create the user with the same username (MyName) without the Azure\ prefix.
  3. Change the account type to Administrator.
  4. Go to the Docker Settings and select Shared Drives and use the local user account created in the previous step to authenticate. It should work now.

 

After that the C drive was shared. Whooha!

Docker: incorrect username or password

I’m reacquainting myself with Docker. My first steps were dodgy. I immediately ran into problems testing if Docker was installed correctly on my Windows 10 machine, when I wanted to execute the hello-world image.

docker run hello-world

Which threw the following error.

Unable to find image 'hello-world:latest' locally
docker: Error response from daemon: Get https://registry-1.docker.io/v2/library/hello-world/manifests/latest: unauthorized: incorrect username or password.
See 'docker run --help'.

It turned out the problem was that I was a little to eager when I signed into the Docker Hub in the Docker Settings.

Screenshot

After logging out with the following command it worked.

docker logout

Go figure…

Encoding HTML tags in WordPress

Grrrr very frustrating. When you add pieces of HTML code to pages and add code tags in the HTML view when you switch back the tags have disappeared. To get around this you need to encode the tags using HTML encoding.

The &gt; and &lt; are character entity references for the > and < character in HTML. It is not possible to use the less than (<) or greater than (>) signs in html, because the browser will mix them with tags. To use these characters you can use entity names (&gt;) and entity numbers(<).

Just do a search & replace to change the < and > then to &gt; and &lt;.