Error when building with webpack 2 on linux

[sourenaraya]

Building with webpack hrows an error:
Module not found: Error: Can't resolve 'AutoNumeric' in /VERY_LONG_PATH_TO_MY_PROJECT_DIR/node_modules/vue-autonumeric/dist'

and problem is, your package tries to import AutoNumeric, but actual directory name is autonumeric, in lowercase.
ln -s from AutoNumeric to autonumeric in my node_modules resolves the issue.

[sourenaraya]

adding this to webpack.conf.js resolves the problem. This should be in documentation.
resolve: { alias: { AutoNumeric : 'autonumeric/dist/autoNumeric.min', } },

[AlexandreBonneau]

I created a test project using:

mkdir vueAutonum && cd vueAutonum
npm init # say yes to all
yarn add autonumeric vue-autonumeric webpack@2

...to compile vue-autonumeric with the old webpack version 2 with the files:

src/vueAutonumericTest.js:

import VueAutonumeric from '../node_modules/vue-autonumeric/dist/vue-autonumeric.min.js';

console.log(VueAutonumeric);

webpack.config.js:

module.exports = {
  entry : "src/vueAutonumericTest.js",
  output: {
    filename: "dist/bundle.js"
  },
  resolve: {
    alias: {
      AutoNumeric: 'node_modules/autonumeric/dist/autoNumeric.min',
    },
  },
};

Now, when I run ./node_modules/.bin/webpack, I get the error you mentioned:

Hash: 470e79379d7394141898
Version: webpack 2.7.0
Time: 135ms
           Asset     Size  Chunks             Chunk Names
./dist/bundle.js  12.7 kB       0  [emitted]  main
   [0] ./~/vue-autonumeric/dist/vue-autonumeric.min.js 9.29 kB {0} [built]
   [1] ./src/vueAutonumericTest.js 120 bytes {0} [built]

ERROR in ./~/vue-autonumeric/dist/vue-autonumeric.min.js
Module not found: Error: Can't resolve 'AutoNumeric' in '/home/user/vueAutonum/node_modules/vue-autonumeric/dist'
 @ ./~/vue-autonumeric/dist/vue-autonumeric.min.js 1:82-104
 @ ./src/vueAutonumericTest.js

How did you fix that exactly?

Note: the current version of vue-autonumeric already has the correct alias in build/webpack.base.js: AutoNumeric: 'node_modules/autonumeric/dist/autoNumeric.min',.

[sourenaraya]

I have no idea how webpack works, lol.
Note, that i am using
AutoNumeric : 'autonumeric/dist/autoNumeric.min'
not the
AutoNumeric : 'node_modules/autonumeric/dist/autoNumeric.min'

and it works.

Dont know why alias in vue-autonumeric's webpack.base.js not being used and\or working.

[SamHwang1990]

I think there has two ways to fix this issue:

1. Do not use externals option in build/webpack.base.js
Generally, webpack does not bundle the dependencies in externals, which are expected to provided by repository which require current module.
If remove the externals option, the bundle file in vue-autoNumeric will include the source of autonumeric. Maybe this is not a good choice.

2. Keep the externals option, and add autonumeric to peerDependencies.
If this way works, it will be the better choice.
The autonumeric will be auto installed by outside repository, and the bundle file in vue-autoNumeric will be simplify.

[AlexandreBonneau]

Removing the AutoNumeric dependency from the externals is a no-no, since it would then generate a pretty big Vue component.

I'll try your second suggestions and use peerDependencies.

[AlexandreBonneau]

Ok so I modified the AutoNumeric dependency to a peerDependencies...and the webpack build step (yarn build:release) output the exact same file.
This unfortunately does not solve the problem :/

[SamHwang1990]

I'm sorry to suggest add autonumeric to peerDependencies because it does'n work.

I had created a pr and try to solve the problem: #5

I am not sure why you want to use AutoNumeric instead of autonumeric as the module name depended on. 😅😅😅

[AlexandreBonneau]

Thank you for the fix @SamHwang1990!
This now works with Webpack version 3 and 2.

[SamHwang1990]

However, I think you had made something wrong in new commit a4a27ab.

1. autonumeric was bundled with when you change the module name depended on
Because the key autonumeric doesn't match the AutoNumeric in wepack config:

externals: {
     // This prevent bundling the AutoNumeric library inside the vue-autonumeric component
    // cf. https://webpack.js.org/configuration/externals/
    AutoNumeric: 'autonumeric'
}

2. With webpack, User no need to install autonumeric manually
In vue-autonumeric, you have specify autonumeric as dependency, which mean when npm or yarn run install phase, it will install the autonumeric automatically.

More details, npm will install the autonumeric in the node_modules/autonumeric, and yarn will install in the node_modules/vue-autonumeric/node_modules/autonumeric.