<svg> attribute width: Expected length, "NaNpx"

charliex2 commented 7 years ago

Quite a lot err in console. And my Code:

import VueBarcode from 'vue-barcode'

<vue-barcode value="123456"></vue-barcode>


setSvgAttributes @ svg.js?83f5:144
prepareSVG @ svg.js?83f5:64
render @ svg.js?83f5:36
render @ JsBarcode.js?a07e:227
API.render @ JsBarcode.js?a07e:206
JsBarcode @ JsBarcode.js?a07e:76
render @ index.js?8f42:41
Vue.$watch @ vue.esm.js?65d7:3367
mounted @ index.js?8f42:32
callHook @ vue.esm.js?65d7:2665
insert @ vue.esm.js?65d7:3526
invokeInsertHook @ vue.esm.js?65d7:5469
patch @ vue.esm.js?65d7:5639
Vue._update @ vue.esm.js?65d7:2414
updateComponent @ vue.esm.js?65d7:2538
get @ vue.esm.js?65d7:2881
Watcher @ vue.esm.js?65d7:2870
mountComponent @ vue.esm.js?65d7:2542
Vue$3.$mount @ vue.esm.js?65d7:7863
Vue$3.$mount @ vue.esm.js?65d7:10066
Vue._init @ vue.esm.js?65d7:4236
Vue$3 @ vue.esm.js?65d7:4321
(anonymous) @ main.js?1c90:25
(anonymous) @ app.js:1245
__webpack_require__ @ app.js:660
fn @ app.js:86
(anonymous) @ app.js:2509
__webpack_require__ @ app.js:660
(anonymous) @ app.js:709
(anonymous) @ app.js:712
svg.js?83f5:148 Error: <svg> attribute viewBox: Expected number, "0 0 NaN 0".
setSvgAttributes @ svg.js?83f5:148
prepareSVG @ svg.js?83f5:64
render @ svg.js?83f5:36
render @ JsBarcode.js?a07e:227
.......
(anonymous) @ app.js:709
(anonymous) @ app.js:712
svg.js?83f5:175 Error: <rect> attribute x: Expected length, "NaN".```

lindell commented 7 years ago

I don't get this error. Could you please make an easy way to reproduce it? For example with a Jsfiddle.

jmoren commented 7 years ago

Hi @lindell I am having the same issue using electron-vue. The same error is showing the console. Anyway, I think is a problem with jsbarcode (I am using vuejs 2, ES6, electron). I tried to debug jsbarcode, and all default values are undefined (except explicit props, but svg is not rendering) I will try to reproduce it in jsfiddle.

charliex2 commented 7 years ago

Hi, @lindell Sorry, failed to reproduce it in jsfiddle. A quite simple vue project has been pushed to my github. It may be useful for you to reproduce the issue by yarn run dev. https://github.com/charliex2/vue-barcode-issue-6

webpack version 3.0.0

iSaVD commented 7 years ago

Hi @lindell. I have the same problem. However, test.html in vue-barcode folder works perfectly. And if i specify: "import VueBarcode from 'vue-barcode/test'" in my project, the barcodes are generated without any problems.

EmadAdly commented 7 years ago

@lindell I have the same issue also i use electron-vue

lindell commented 7 years ago

https://github.com/lindell/vue-barcode/commit/4f84f2d37e12d3a200126b6e0c10b17b4e55127f should fix this. Can anyone verify it?

charliex2 commented 7 years ago

@lindell It works. Thanks .

EmadAdly commented 7 years ago

Thanks @lindell i will try but wait you to update npm to 1.0.7

lindell commented 7 years ago

Updated the package in npm now

wparad commented 6 years ago

I was having the same problem, turns out that I was binding a string to the property value

<barcode width="1">

instead of binding the int value

<barcode :width="1">

lindell / vue-barcode

<svg> attribute width: Expected length, "NaNpx" #6