[Vue] Error loading module

[matiaslopezd]

Hi again, I have a problem using in Vue.

Import

import ShortUniqueId from 'short-unique-id';
const uid = new ShortUniqueId();

Error

./node_modules/short-unique-id/src/index.js 12:10
Module parse failed: Unexpected token (12:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| class ShortUniqueId {
>   counter = 0;
| 
|   debug;

[matiaslopezd]

Temporaly solution to fix:

mounted() {
   const element = document.createElement('script');
   element.src = 'https://rawgit.com/jeanlescure/short-unique-id/master/dist/short-unique-id.min.js';
   element.setAttribute('async', 'true');
   document.body.appendChild(element);
}

And add in function on @click:

 const ShortUniqueId = window['short-unique-id'].default;
 const uid = new ShortUniqueId();
uid.randomUUID(10).toUpperCase();

[jeanlescure]

The package.json defines the module file as:

  "module": "src/index.js",

which means that any ES6 import will use the raw (pre-transpiled) js file.

I used class properties for development, as evidenced by my dev dependency:

@babel/plugin-proposal-class-properties

This is not a problem for projects that implement a plugin for transpiling class properties, but will cause the reported error otherwise.

The quickest workaround for versions < 2.0.5 is to add a plugin such as @babel/plugin-proposal-class-properties to the project.

For v2.0.6 I'll work on refactoring out the usage of class properties.

[jeanlescure]

@matiaslopezd version 2.0.6 is out now which should allow you to use the ES6 module import without error.

Cheers 🍾