ui-svg
ui-svg copied to clipboard
Webpack error on ns preview with andoid
When running
ns preview
an then scanning the code on Android, I am getting the following error:
TypeError: _nativescript_core__WEBPACK_IMPORTED_MODULE_0__.Property is not a constructor
File: (file:///data/user/0/org.nativescript.preview/files/app/vendor.js:46:21)
StackTrace:
../node_modules/@nativescript-community/ui-canvas/canvas.common.js(file:///data/user/0/org.nativescript.preview/files/app/vendor.js:46:22)
at __webpack_require__(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:817:30)
at fn(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:121:20)
at ../node_modules/@nativescript-community/ui-canvas/canvas.js(file:///data/user/0/org.nativescript.preview/files/app/vendor.js:284:72)
at __webpack_require__(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:817:30)
at fn(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:121:20)
at ../node_modules/@nativescript-community/ui-svg/index.common.js(file:///data/user/0/org.nativescript.preview/files/app/vendor.js:1700:91)
at __webpack_require__(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:817:30)
at fn(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:121:20)
at ../node_modules/@nativescript-community/ui-svg/index.js(file:///data/user/0/org.nativescript.preview/files/app/vendor.js:1918:71)
at __webpack_require__(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:817:30)
at fn(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:121:20)
at ../node_modules/@nativescript-community/ui-svg/vue/index.js(file:///data/user/0/org.nativescript.preview/files/app/vendor.js:2271:59)
at __webpack_require__(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:817:30)
at fn(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:121:20)
at (file:///data/user/0/org.nativescript.preview/files/app/bundle.js:286:92)
at ./main.js(file:///data/user/0/org.nativescript.preview/files/app/bundle.js:349:30)
at __webpack_require__(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:817:30)
at checkDeferredModules(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:44:23)
at webpackJsonpCallback(file:///data/user/0/org.nativescript.preview/files/app/runtime.js:31:19)
at (file:///data/user/0/org.nativescript.preview/files/app/bundle.js:2:57)
at require(:1:266)
TypeError: _nativescript_core__WEBPACK_IMPORTED_MODULE_0__.Property is not a constructor
at com.tns.Runtime.runModule(Native Method)
at com.tns.Runtime.runModule(Runtime.java:674)
at com.tns.Runtime.run(Runtime.java:666)
at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1192)
at android.app.ActivityThread.handleMakeApplication(ActivityThread.java:7423)
at android.app.ActivityThread.handleBindApplication(ActivityThread.java:7374)
at android.app.ActivityThread.access$1500(ActivityThread.java:302)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2117)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loop(Looper.java:246)
at android.app.ActivityThread.main(ActivityThread.java:8414)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:596)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1130)
main.ts
import Vue from 'nativescript-vue';
import App from './App.vue';
import VueDevtools from 'nativescript-vue-devtools';
import CanvasSVG from '@nativescript-community/ui-svg/vue';
Vue.use(CanvasSVG);
import ExtendedTextField from './components/UI/ExtendedTextField.vue';
if(TNS_ENV !== 'production') {
Vue.use(VueDevtools, {
host: '192.168.1.5'
})
}
import store from './store'
// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')
Vue.component('ExtendedTextField', ExtendedTextField);
new Vue({
store,
render: h => h('frame', [h(App)])
}).$start()
Component with svg
<template>
<FlexboxLayout class="extended-text-field">
<TextField :text="value"
class="extended-text-field__input"
v-bind="$props"
@textChange="emitTextChange"
@returnPress="emitReturnPress"
@focus="emitFocus"
@blur="emitBlur"
/>
<SVGView class="extended-text-field__append-icon"
v-if="appendIcon"
:key="appendIcon"
:src="appendIconSrc"
stretch="aspectFit"
@tap="emitAppendIconClicked"
/>
</FlexboxLayout>
</template>
<script lang="ts">
export default {
name: 'ExtendedTextField',
props: {
value: {
type: [String, Number],
},
appendIcon: {
type: String,
default: undefined,
},
hint: {
type: String,
default: '',
},
isEnabled: {
type: Boolean,
default: true,
},
editable: {
type: Boolean,
default: true,
},
secure: {
type: Boolean,
default: false,
},
keyboardType: {
type: String,
default: '', // done, next, go, search, send
},
autocorrect: {
type: Boolean,
default: true,
}
},
computed: {
appendIconSrc() {
return this.appendIcon ? `~/assets/images/${this.appendIcon}.svg` : null;
},
},
methods: {
emitAppendIconClicked() {
this.$emit('appendIconClicked');
},
emitTextChange(payload) {
this.$emit('input', payload.value);
},
emitReturnPress(payload) {
this.$emit('returnPress', payload);
},
emitFocus(payload) {
this.$emit('focus', payload);
},
emitBlur(payload) {
this.$emit('blur', payload);
}
}
}
</script>
Coding Environment: Windows 10 TNS Version: 7.1.2 Cross-Plattform-Core-Modules Version: not found
package.json
"dependencies": {
"@nativescript-community/ui-svg": "0.0.5",
"@nativescript/core": "^7.0.3",
"@vue/devtools": "^5.3.3",
"nativescript-socketio": "^3.3.1",
"nativescript-toasty": "^3.0.0-alpha.2",
"nativescript-vue": "^2.8.1",
"nativescript-vue-devtools": "^1.4.0",
"vuex": "^3.5.1"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@nativescript/android": "7.0.1",
"@nativescript/types": "^7.0.0",
"@nativescript/webpack": "^3.0.4",
"@types/node": "^14.6.2",
"babel-loader": "^8.1.0",
"nativescript-vue-template-compiler": "^2.8.1",
"nativescript-worker-loader": "~0.12.1",
"sass": "^1.26.10",
"typescript": "^3.9.7",
"vue": "^2.6.12",
"vue-loader": "^15.9.3"
}