Log in to start a topic

Cannot get wijmo to work with Typescript

Posted by: j.puetz on 24 July 2019, 5:55 am EST

  • j.puetz

    • Post Options:
    • Link
      Copy

    Posted 24 July 2019, 5:55 am EST

    Hello I am trying to get wijmo to work, but struggle really hard with it! I can’t find up-to-date info on how to use it with Visual Studio, Typescript (and Knockout, maybe requireJS). The docs only cover using wijmo with angular, react and the like.

    I downloaded wijmo-5.20192.624

    The readme in it says the zip file contains 3 folders: Dist, Samples & VsTemplates. Mine contains 4 folders: Dist, Intellisense, NpmImages & Samples. VsTemplates is missing. Either the readme is outdated or the build in the download is wrong. Maybe the Vs folder could have helped me, but its no big deal.

    Since I am not using any of your common frameworks, I tried using the most neutral tutorial I found: https://www.grapecity.com/wijmo/docs/GettingStarted/QuickStart/QuickStart-PureJS

    My project is using asp.net core 2 and typescript. Typescript is set to target ES5 and use AMD modules, which is why I use requireJS.

    Sadly wijmo does not seem to work with typescript/requrieJS. I always get an error. Some errors I got in the past:

    SyntaxError: import declarations may only appear at top level of a module (es5-esm.js:14:365)

    ReferenceError: exports is not defined (index.js:14:379)

    wijmo is undefined

    As far as I know wijmo5 is written in typescript, so I wonder why the typescript support does not work or is so complicated to get to work.

    I had already posted on Stackoverflow 2 days ago, but nobody was able to help me yet: https://stackoverflow.com/questions/57149008/syntaxerror-using-wijmo-with-requirejs-typescript/57151704?noredirect=1#comment100847890_57151704

    Please help! I hope you guys, could give me some tips, on how to get wijmo to work in a typescript environment within visual studio.

    P.S.: The recaptcha is really annoying! The worst kind of captcha there is. I wonder why everbody uses it? Its really frustrating and I’d recommend getting rid of it!

  • ashwin.saxena

    Posted 25 July 2019, 7:19 am EST

    Hi Janis,

    We are sorry for the inconvenience caused. We are looking into the issue. We will give you an update as soon as we have further information.

    Regarding Knockout documentation:

    We have asked the concerned team to look into this.

    Regards,

    Ashwin

  • j.puetz

    Posted 25 July 2019, 11:17 am EST

    Hello Ashwin,

    thanks for talking time to reply.

    I think wijmo doesnt export its modules for AMD?

    I got the main wijmo library to work in my setup, but it was rather confusing. I had to change (at least) 4 things before the library was working:

    1.) I had skipped back an forth between the library downloaded through npm and the download from this website.

    With the version from npm it would not work, but the version from the website did. From there (wijmo/Dist/controls/) I am using wijmo.min.js & wijmo.grid.min.js version 5.20192.624.

    1. This required me to change the used module-name from “@grapecity/wijmo.grid” to “wijmo/wijmo.grid”.

    2. For TypeScript to compile my scripts using wijmo, I also had to create a types.d.ts file to be able to transpile my script. This is probably required since TypeScript is configured with “strict”: true. This is the content of my types.d.ts file:

    declare module "wijmo/wijmo";
declare module "wijmo/wijmo.grid";
    1. In my require-config I needed to configure shims for wijmo, to ensure wijmo.grid would depend on wijmo. Otherwise it would only load wijmo.grid.min.js and not wijmo.min.js:
    ...
    shim: {
        'wijmo/wijmo.grid': {
            deps: [
                'wijmo/wijmo',
            ]
        },
...

    I hope I’m not forgetting any extra steps.

  • ashwin.saxena

    Posted 26 July 2019, 7:36 am EST

    Hi Janis,

    We are sorry again for the inconvenience.

    Could you please tell us if you are building a new project or adding wijmo to an existing project. If you are developing a new project, could you please tell us whether there is a specific reason to use AMD modules and not a modern bundler like SystemJS or Webpack?

    Also, could you provide us with the sample that you are using so we can further investigate the issue?

  • j.puetz

    Posted 29 July 2019, 6:22 am EST

    Hi Ashwin,

    its an existing project, but it is rather new. I still have the chance of switching module loaders. Are there advantages of SystemJS or Webpack over AMD anyways? Other than the (generated) syntax I though they were doing the same thing. Are these kind of dependency problems mainly caused by AMD?

    • I am not sure about bundling code. If its only the custom code I’d do it too. I think i can configure to transpile all the code into one file. With external libraries, I think its better to use them from a cdn, than to bundle them into your code.

    • As far as a I know, there are only 3 module types: node modules for server side, amd modules for the web, and ES6 modules for modern browsers. Thats why I choose the amd modules.

      I only read out a couple of days ago, that ES6 modules could be transpiled for es5 as well. I thinking about switching from amd to es6 to see if it actually works. Do you think that would fix wijmo.knockout for me?

    I’ll create a small sample later today.

  • ashwin.saxena

    Posted 30 July 2019, 5:08 am EST

    Hi Janis,

    1. If you can switch to any other loader, I would recommend you to use CommonJS or ES2015 modules. Our npm files are shipped using CommonJS by default. Also, AMD and Webpack are 2 different things. AMD is a module loader which means that AMD loads different modules at runtime. On the other hand, webpack is a module bundler meaning it bundles all of the Javascript modules into a single file during the build time. AMD modules do not cause any dependency problem but our wijmo files are not shipped with AMD modules.

    2. You can both bundle the js files and put them on CDN. But, if you wish to use one or the other, it depends on how many js files you have. If you have a small number of files, CDN will be faster but with a large number of files, I would suggest you use a bundler which will be quicker.

    3. Yes, there are mainly 3 types of module loaders, CommonJS, AMD and ES6 or ES2015 and all of them can be used for web development.

      ES6 modules can be transpiled to ES5 using a transpiler like Babel so switching to ES6 module should be able to solve your problem because as I said earlier, wijmo files are not shipped with AMD modules.

    Let us know if you have any other query or require more clarification.

    Regards,

    Ashwin

  • j.puetz

    Posted 31 July 2019, 11:25 am EST

    I created the small sample, that I had promised.

    Also I will try to switch my module loader.

    Edit: Seems like the Upload here did not work. I will send it via E-Mail.

  • ashwin.saxena

    Posted 1 August 2019, 8:56 am EST

    Hi Janis,

    I have got the sample and will take a look at it. I will give you an update on this as soon as possible.

    ~regards

  • ashwin.saxena

    Posted 5 August 2019, 7:21 am EST

    Hi Janis,

    The reason that your sample is not working because wijmo.knockout.min.js uses the global knockout object (window.ko) to apply the bindings. But, when we add knockout using requirejs, knockout does not create a global variable so wijmo was not able to use knockout to apply the bindings. To solve this, you just need to add knockoutjs using CDN instead of requirejs. Please refer to the updated sample attached.

    Wijmo_TS_KO.zip

    Let us know if you face any other issues or have any other query.

    ~regards

  • j.puetz

    Posted 29 August 2019, 7:52 am EST

    I didnt like using the CDN exclusively. My project has to work in intranet situations as well.

    I switched to SystemJS anyways though. Its easy there to configure it, so it loads the dependencies in order and it doesn’t have to use the window object.

    Just posted this for completeness.

    Regards

  • ashwin.saxena

    Posted 29 August 2019, 11:37 pm EST

    Hi Janis,

    We are glad that you were able to resolve the issue. Let us know if you face any other issues.

    ~regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.