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.

Answer 1

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.