SyntaxError using Wijmo with RequireJs / Typescript

Question

I have a project set up, that uses Typescript and RequireJS to load the dependencies. I fail to get the wijmo.grid dependecy to work.

I started with the Quickstart manual from Grapecity and adjusted it into my combination of Typescript & RequireJs.

This is what I want to do in test.ts:

import { FlexGrid} from '@grapecity/wijmo.grid';

export class TestViewModel {
    constructor() {
        let grid = new FlexGrid('#hostElement');
    }
}

The script tags:

<script src="~/lib/requirejs/require.js"></script>
<script src="~/js/require-config.js"></script>
<script>
    require(
        ["my-test"],
        function (myTest) {
            var viewModel = new myTest.TestViewModel();
        }
    );
</script>

This is my require-config.ts:

declare var require: any;
require.config({
    baseUrl: "/",
    paths: {
        "jquery": [
            "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery",
            "lib/jquery/dist/jquery-3.4.1"
        ],
        "knockout": [
            "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-debug",
            "lib/knockout/knockout-3.5.0.debug"
        ],
        "@grapecity/wijmo.grid": [
            "lib/@grapecity/wijmo.grid/es5-esm"
        ],
        "my-test": "js/test"
    },
    waitSeconds: 15
});

This is my tsconfig.json:

{
  "compileOnSave": true,
  "compilerOptions": {
    "strict": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "removeComments": false,
    "target": "es5",
    "outDir": "wwwroot/js/",
    "module": "amd",
    "moduleResolution": "node",
    "lib": [
      "es6",
      "dom"
    ]
  },
  "exclude": [
    "wwwroot"
  ]
}

Now when I access that page, I expect it to work, but I get an error:

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

What am I doing wrong here?

Edit:

I also tried using the index-module in require-config.ts:

"@grapecity/wijmo.grid": [
    "lib/@grapecity/wijmo.grid/index"
],

This leads to a different error:

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

It seems like the wijmo modules are build targeting other module loaders than stated, or I am still missing some configuration.

That means that `lib/@grapecity/wijmo.grid/es5-esm` is not in the right format, as is to be expected give the file name. Point your dependency to a different output or transpile the code using TypeScript or something — Aluan Haddad, Jul 22 '19 at 15:22
@AluanHaddad That filename version suggests it is for es5, so I am confused why it would be wrong. About esm I read it's for compatibility with es5, so that seems right to me too. Also the other versions are all newer, I think for es2015. — Tigerware, Jul 22 '19 at 15:29
es5-esm msans everything is transpiled to es5 except module constructs (`import`, `export`). — Aluan Haddad, Jul 22 '19 at 18:10
https://www.grapecity.com/wijmo/docs/GettingStarted/NPM-Module-Formats — Aluan Haddad, Jul 22 '19 at 18:16

Aluan Haddad · Answer 1 · 2019-07-23T15:08:52.083

That means that lib/@grapecity/wijmo.grid/es5-esm is not in the right format, as is to be expected give the file name. You can either map your dependency to a different output or transpile the code using TypeScript or Babel or something.

In particular, the filename es5-esm.js suggests that everything is transpiled to es5 except module constructs (import, export).

If we consult the documentation, we see that this is in fact the case.

Wijmo npm packages provide their content in multiple formats, which are combinations of the language version (ES5 or ES2015) and module format (CommonJS or ESM). Every format in the installed package folder is represented by a separate .js file, referenced by a special field in the package.json file. Modern bundlers like Webpack can use a package file in the preferred format, depending on the bundler configuration. Bundlers without this capability will use the main field in package.json to resolve module name to a specific .js file. In the Wijmo packages, it is the index.js file which contains the (most compatible) ES5 + CommonJS format.

Therefore,

 paths: {
   "@grapecity/wijmo.grid": [
     "lib/@grapecity/wijmo.grid/index"
    ],
 }

should do the trick.

I tried using "lib/@grapecity/wijmo.grid/main", but it wont load with it. "Error: Script error for "@grapecity/wijmo.grid", needed by: my-test". I think that part in the docs is refering to package.json, which has this entry: "main": "./index.js", — Tigerware, Jul 23 '19 at 06:40
Using "lib/@grapecity/wijmo.grid/index" gives the me another error: "ReferenceError: exports is not defined". It seems like none of them is in the right format. I guess I will have to include transpiling the wijmo*.ts files in my project. I don't think I should be required to do so, just bc im targeting ES5 with AMD. — Tigerware, Jul 23 '19 at 06:44

SyntaxError using Wijmo with RequireJs / Typescript

1 Answers1