Comments (10)
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.
from vue-autonumeric.
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.
from vue-autonumeric.
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. 😅😅😅
from vue-autonumeric.
adding this to webpack.conf.js resolves the problem. This should be in documentation.
resolve: { alias: { AutoNumeric : 'autonumeric/dist/autoNumeric.min', } },
from vue-autonumeric.
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',
.
from vue-autonumeric.
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
.
from vue-autonumeric.
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 :/
from vue-autonumeric.
Thank you for the fix @SamHwang1990!
This now works with Webpack version 3 and 2.
from vue-autonumeric.
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
.
from vue-autonumeric.
Yes, this is fixed (for real this time) in v1.0.4
.
@sourenaraya comment helped me define how to bundle the AutoNumeric library, thanks!
from vue-autonumeric.
Related Issues (20)
- Add an ability to globally set the default options HOT 1
- Inherit events from component wrapper HOT 2
- Add TypeScript file definition HOT 4
- Directive usage HOT 3
- VueAutonumeric value prop validator should accept strings HOT 1
- Problem when importing `vue-autonumeric`, but not when importing `AutoNumeric` HOT 6
- Ignoring the .lazy modifier HOT 9
- Android cursor issue HOT 2
- Library naming issue HOT 3
- Add support for Nuxt HOT 1
- Set value to zero after null HOT 1
- Error while npm run development HOT 1
- The event passed as a parameter is not a valid wheel event, 'wheel' given. HOT 8
- How to remove keep in memory? HOT 1
- Vue 3.0 compatibility HOT 7
- Trying to edit a value sets the caret to the end of the input HOT 6
- References to autonumeric need to be updated HOT 9
- Support for numeric keyboard via input[type=number]?
- Change event doesn't work HOT 1
- V-model not readable by the autonumeric HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-autonumeric.