Require of AutoNumeric is ES6 module and not the distribution version

[markRosenvinge]

AutoNumeric is required as ES6 module and not as the distribution version.
When compiling a project using webpack, node_modules is usually not transpiled with babel-loader, resulting in AutoNumeric not being transpiled.

Instead of the ES6 module:

require('autonumeric')

Use the distribution version:

require('autonumeric/dist/autonumeric.min')

It also results in faster compiling and smaller file-size.

[AlexandreBonneau]

Hey @markRosenvinge, thanks for pointing that out, it's good to know.

What would you want us to do with that information though?
Add a paragraph in the readme about require()?

[markRosenvinge]

I'm Sorry, I should have been more explicit.

in "src/components/VueAutonumeric.vue" AutoNumeric is imported as an ES6 module. Instead it should be imported as the distribution version.

So the line:

import AutoNumeric from 'autonumeric';

Changes to

import AutoNumeric from 'autonumeric/dist/autoNumeric.min';

What i reffered to earlier is how that same code looks like after it has been transpiled with babel.

[AlexandreBonneau]

AutoNumeric is indeed 'imported' by the vue-autonumeric component using:

import AutoNumeric from 'autonumeric';

However this should use the transpiled version since AutoNumeric's package.json defines the main file as dist/autoNumeric.js.
Would you have a small reproducible test case where such behavior is not happening?




Note: I tried modifying how AutoNumeric is imported by the component and if you do use import AutoNumeric from 'autonumeric/dist/autoNumeric.min'; (be sure to respect the case here otherwise it won't work on case-sensitive OSes), then you are effectively compiling AutoNumeric into vue-autonumeric, resulting in a somewhat bigger bundle.

You could then in the Webpack configuration declare AutoNumeric as externals again, by using:

externals: {
    'autonumeric/dist/autoNumeric.min': 'AutoNumeric',
},

and you'll get back to the normal bundle size.

However you'll see that I modified -- yet again -- the Webpack externals definition from:

externals: {
    <npmPath>: 'autonumeric',
},

to

externals: {
    <npmPath>: 'AutoNumeric',
},

..because when you are using a CDN, the exported object by the AutoNumeric library is named AutoNumeric (!!).
Without that change, it means the vue-autonumeric is looking for autonumeric, does not find it, and fails.

To be sure that this change did not break the building process with webpack 2, 3 and 4, I created as many dummy projects importing vue-autonumeric and the specific webpack version, and so far it works as intended.

Could you please however try in your project with the changes I made and tell me if it works for you too? :

// In the webpack configuration when building vue-autonumeric
externals: {
    'autonumeric/dist/autoNumeric.min': 'AutoNumeric',
},

and

// In the src/components/VueAutonumeric.vue file
import AutoNumeric from 'autonumeric/dist/autoNumeric.min';

Thanks!

[markRosenvinge]

I've tested your solution. It does work, as long as you make sure to have the webpack alias set for 'AutoNumeric'.

Looking forward to see it released :)

[AlexandreBonneau]

This is released in v1.2.4