Vue cli + Typescript; Unable to use Wijmo 5 when using .vue style component

Vue cli + Typescript; Unable to use Wijmo 5 when using .vue style component

Posted by: akhilesh.vvs on 2 April 2018, 11:02 am EST

• 

  akhilesh.vvs

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 April 2018, 11:02 am EST

  How can i achieve the same thing if using vue-cli (.vue) components ? Below are the errors which i am facing.

  Error 1: Assertion failed in Wijmo: Cannot find the host element.

  Error 2: vue.runtime.esm.js:574 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

  found in

  —>

  <template>
    <div>
           <wj-flex-grid :items-source="data.data">
           </wj-flex-grid>
    </div>
  </template>
  
  <script lang="ts">
  import Vue from "vue";
  import _ from "lodash";
  import Templatestore from "../store/Template";
  import { Component, Emit, Model, Prop, Watch } from "vue-property-decorator";
  import { Template } from "@/Models/Template";
  import { WjFlexGrid } from "wijmo/wijmo.vue2.grid";
  
  @Component({
    components: {
      "wj-flex-grid": WjFlexGrid
    }
  })
  

  Any help is appreciated. Thanks.

• 

  akhilesh.vvs

  • Post Options:
  • Link
    Copy

  Posted 2 April 2018, 11:47 am EST

  My Package.json

    "dependencies": {
      "@types/lodash": "^4.14.106",
      "axios": "^0.18.0",
      "babel-polyfill": "^6.26.0",
      "buefy": "^0.6.3",
      "json-server": "^0.12.1",
      "lodash": "^4.17.5",
      "vue": "^2.5.13",
      "vue-router": "^3.0.1",
      "vuex": "^3.0.1",
      "vuex-typex": "^3.0.1",
      "wijmo": "^5.20181.436"
    },
    "devDependencies": {
      "raw-loader": "~0.5.1",
      "@vue/cli-plugin-babel": "^3.0.0-beta.6",
      "@vue/cli-plugin-typescript": "^3.0.0-beta.6",
      "@vue/cli-service": "^3.0.0-beta.6",
      "node-sass": "^4.7.2",
      "sass-loader": "^6.0.6",
      "vue-template-compiler": "^2.5.13",
      "vue-property-decorator": "^6.0.0"
    },
  

  As provided in main post above wj-flex-grid is not my inidvidual component , i was just testing everything out.

  Edit 2: I also followed the directions presented here and i am getting the same errors.
  
  http://devlog.grapecity.co.jp/entry/2018/02/15/wijmo-vue-quickstart

  Google translated : https://translate.google.com/translate?sl=auto&tl=en&js=y&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Fdevlog.grapecity.co.jp%2Fentry%2F2018%2F02%2F15%2Fwijmo-vue-quickstart&edit-text=&act=url

  Edit3: Ive also tried out the module from prereleases and i am having same issues.

  
      "wijmo": "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.405.tgz"
  
  

• 

  venkata.vimjam

  • Post Options:
  • Link
    Copy

  Posted 2 April 2018, 12:29 pm EST

  I am in the same boat too, i am having similar errors when using Vue cli 3.0.0 beta 5. I suspect something changed in the beta relating to Vue 3.0 changes.

  i did import flexgrid, the package referenced is from pre release packages and i am using vue cli 3.0 beta 5.

  import { FlexGrid } from 'wijmo/wijmo.grid';
  import { WjFlexGrid } from "wijmo/wijmo.vue2.grid";
  

  This is my vue.config file

  module.exports = {
      configureWebpack: function (config) {
          // mutate config directly, or return new config
          config.devtool = "#source-map";
          config.entry = {
              app: ['babel-polyfill',
                  './src/main.ts'
              ]
          };
          config.resolve = {
              alias: {
                  'vue$': 'vue/dist/vue.esm.js'
              }
          };        
      }
  }; 
  

  P.S How do i reference my enterprise licence key in package.json file ?

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 3 April 2018, 6:51 am EST

  Hi,

  Please refer to attached sample and let us know if you still face any issues.
  
  Feel free to edit the sample to reflect your problem if any.

  You don’t need to refer licence key in package.json.
  
  If you are using wimo version 5.20173.431 or earlier then you can download the licenced version from your account page (grapecity.com)and use those dependencies for production.

  From version 5.20181.433 onwards, we have changed our licencing policy. So if you are using pre-release version, please let me know.

  Regards

  test-app.zip

• 

  rick.b69

  • Post Options:
  • Link
    Copy

  Posted 5 April 2018, 7:48 pm EST

  Is it possible that i could get an example project in vue-cli 3.0.0 beta ? All these dev dependencies are very unfamiliar to me.

  If not could you reason as to why wijmo is failing in vue cli and not in your builds ? what dependencies or build procedures are the key factors here ?

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 9 April 2018, 9:52 am EST

  Hi,

  We are working on it. Will update you Tommorrow

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 10 April 2018, 6:27 am EST

  The problem you are facing is because the vue-cli 3.0 is configured to use vue runtime-only builds and not the full standalone vue(runtime+compile).

  You can read more about vue runtime+compiler vs runtime only from here:-https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

  To use the standalone build, create a vue.config.js file in your project’s root folder with following code:-

  module.exports = {
  compiler: true
  }
  

  Please refer to the attached sample in vue-cli 3.0.0 beta and let us know if you still face any issues.

  cli-beta-project.zip