ui-svg icon indicating copy to clipboard operation
ui-svg copied to clipboard

Webpack error on ns preview with andoid

Open florianrubel opened this issue 5 years ago • 0 comments

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"
  }

florianrubel avatar Jan 15 '21 10:01 florianrubel