Unable to Import wijmo 5 with Vue2 with typescript

Unable to Import wijmo 5 with Vue2 with typescript

Posted by: surya.yerramsetti on 19 February 2018, 1:53 am EST

• 

  surya.yerramsetti

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 February 2018, 1:53 am EST

  I m getting following error while trying to use wijmo 5+Vue2+Webpack+typescript.
  
  ERROR in ./~/ts-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/herolist/herolist.vue
  
  Module not found: Error: Can’t resolve ‘wijmo/wijmo’

  My tsconfig.json
  // tsconfig.json
  {
    "compilerOptions": {
      // this aligns with Vue's browser support
      "target": "es5",
      // this enables stricter inference for data properties on `this`
      "strict": true,
      // if using webpack 2+ or rollup, to leverage tree shaking:
      "module": "es2015",
      "moduleResolution": "node",
      "outDir": "./built",
      "sourceMap": true,
      "noImplicitAny": true,
      "noImplicitReturns": true,
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "allowSyntheticDefaultImports": true,
      "lib": [
          "es2016",
          "dom"
      ],
      "typeRoots": [
        // add path to @types
        "node_modules/@types"
      ]
  
    },
    "include": [
        "./src/**/*"
    ]
  }
  

  Package.json

  "devDependencies": {
      "css-loader": "^0.28.9",
      "node-sass": "^4.7.2",
      "sass-loader": "^6.0.6",
      "ts-loader": "^3.5.0",
      "typescript": "^2.7.2",
      "vue-loader": "^14.1.1",
      "vue-template-compiler": "^2.5.13",
      "webpack": "^2.5.0",
      "webpack-dev-server": "^2.11.1"
    },
    "dependencies": {
      "axios": "^0.17.1",
      "wijmo": "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.409.tgz",
      "typings": "^1.3.2",
      "vue": "^2.3.13",
      "vue-class-component": "^6.2.0",
      "vue-property-decorator": "^6.0.0",
      "vue-router": "^3.0.1"
    }
  

  And the file in which import is refered.

  
  <template>
  <wj-flex-grid
    :items-source="fruits">
    <wj-flex-grid-column binding="fruit.id" header="Name">
    </wj-flex-grid-column>
    <wj-flex-grid-column binding="fruit.common_name" header="Sales" format="c0">
    </wj-flex-grid-column>
    <wj-flex-grid-column binding="fruit.species" header="Expenses" format="c0">
    </wj-flex-grid-column>
    <wj-flex-grid-column binding="fruit.region" header="Active">
    </wj-flex-grid-column>
    <wj-flex-grid-column binding="fruit.url" header="Date">
    </wj-flex-grid-column>
  </wj-flex-grid>
  </template>
  <script lang="ts">
  import Vue from 'vue';
  import { heroService } from '../hero.service';
  import { Component, Prop, Watch } from 'vue-property-decorator';
  import  wj from "wijmo/wijmo";
  import  wjGrid from "wijmo/wijmo.grid";
  @Component({
  })
  export default class HeroList extends Vue { 
    fruits: any;
  created(){
      this.getHeroes();
  }
  getHeroes(): any {
     this.fruits = new wj.CollectionView(heroService.getHeroes());
     console.log(this.fruits);
  }
  
  }
  </script>
  
  

  Any Help is Appreciated. thanks!

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 20 February 2018, 1:06 am EST

  Hi Surya,

  I am working on this. I will respond on this soon.

  ~nilay

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 20 February 2018, 6:08 pm EST

  Hi,

  I am attaching a sample using : Wijmo + Vue2 + TypeScript + Webpack. Use this sample as a starter.

  ~nilay

  wijmo-ts-vue-starter-project.zip

• 

  akhilesh.vvs

  • Post Options:
  • Link
    Copy

  Posted 2 April 2018, 2:00 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
    }
  })
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 2 April 2018, 3:50 pm EST

  Hi Akhilesh,
  
  Please refer to the attached demo sample. Please modify the attached sample in case the issue persists.

  ~Manish

  FlexGrid_vue-cli.zip