Using nanoid in Vue fails with ''Missing file extension cjs"

Question

I want to use nanoid in my Vue project. I tried both:

import nanoid from 'nanoid';
import { nanoid } from 'nanoid';

but webpack fails with

Module Error (from ./node_modules/eslint-loader/index.js):
error: Missing file extension "cjs" for "nanoid" (import/extensions) at src\components\molecules\ProfileLink.vue:18:24:
  16 | import { BPopover } from 'bootstrap-vue';
  17 | // import nanoid from 'nanoid';
> 18 | import { nanoid } from 'nanoid';

Adding the suffix does not help either:

This dependency was not found

How to fix it?